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

mounted's Issues

Mounted 组件计划

前言

秉持「只产出与业务低耦合的基础组件」的理念，不会考虑列表、卡片等与具体业务 UI 设计高度关联的组件。

计划

• Button: 基于小程序原生的 Button，但去除其自带的样式，并且对相关 API 进行封装，返回一个纯粹的、更易根据具体业务 UI 进行扩展的基础按钮组件。 使用 .m-pure-button 类名去除小程序按钮自带的样式。 小程序有 bug，暂不考虑。暂添加 pureButton mixin 代替。

• DatePicker: Picker 风格的日期选择器。

• TimePicker: Picker 风格的时间选择器。

• DateTimePicker: Picker 风格的日期时间选择器，本质是一个分段选择器。

• Calendar: 日历组件。

• Table: 表格组件。

• FormIdCollector: 微信小程序 form id 收集组件。因 Taro 自 1.9.1 版本后的某个版本开始不再支持递归组件，实现上可能会需要两个组件互相调用。

建议修改：使用循环的 index 变量作为 key 是一种反优化

编译小程序时提示：
编译 组件文件 node_modules/mounted/src/components/PickerView/index.tsx
建议修改：使用循环的 index 变量作为 key 是一种反优化。参考：https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md

189 | }
190 | return (<PickerView value={fullSelectedIndexes} className={m-picker-view ${disabled && 'm-picker-view_disabled'} ${className}} style={styles.view} indicatorStyle={height:${styles.indicator.height}} onPickStart={this.props.onPickStart} onPickEnd={this.props.onPickEnd} onChange={this.handleChange}>

191 | {normalizedData.map((colData, colIndex) => (
| ^^^^^^^^
192 | <PickerViewColumn key={column-${colIndex}}>
193 | {colData.map((item, itemIndex) => (
194 |