fjc0k / mounted

基于 Taro 的小程序组件库。

v1 版本还不甚稳定，请勿用于生产环境！

Mounted

一款基于 Taro 的小程序组件库。

⚠ 注意

• 目前仅支持 微信小程序。

• 推荐和 TypeScript 一起使用。

特性

• 使用 TypeScript 编写。
• 专注 小程序。
• 只产出与业务低耦合的 基础组件。
• 支持 自定义主题。

使用

首先，使用以下命令安装：

# yarn
yarn add mounted

# 或者，npm
npm i mounted --save

然后，在 app.scss 中引入组件样式：

若你未使用 scss，请在 app.js 同级目录新建 app.scss，并在 app.js 中引入：import './app.scss'。

@import '../node_modules/mounted/src/styles/components.scss';

最后，在页面中按需引入组件：

import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { MSticky } from 'mounted'

export default class Demo extends Taro.Component {
  render() {
    return (
      <View>
        <MSticky>
          <View className='title'>
            <Text>标题</Text>
          </View>
        </MSticky>
      </View>
    )
  }
}

自定义主题

若需自定义主题，直接在 app.scss 中覆盖变量即可，如：

// 主色调
$primaryColor: #1AAD19;

@import '../node_modules/mounted/src/styles/components.scss';

组件库所使用的样式变量都在 src/styles/settings.scss 文件内。

设计稿尺寸

组件库内部采用的是 375 尺寸，若你的项目也是基于 375 的，可跳过。

若你的项目是基于其他尺寸，比如 750 的，请在 app.scss 中覆盖设计稿尺寸变量：

// 设计稿尺寸
$designWidth: 750;

@import '../node_modules/mounted/src/styles/components.scss';

许可

MIT © Jay Fong