项目作者: fjc0k

项目描述 :
基于 Taro 的小程序组件库。
高级语言: TypeScript
项目地址: git://github.com/fjc0k/mounted.git
创建时间: 2019-01-26T18:46:58Z
项目社区:https://github.com/fjc0k/mounted

开源协议:MIT License

下载


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



Mounted

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

⚠ 注意

  • 目前仅支持 微信小程序

  • 推荐和 TypeScript 一起使用。

特性

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

使用

首先,使用以下命令安装:

  1. # yarn
  2. yarn add mounted
  3. # 或者,npm
  4. npm i mounted --save

然后,在 app.scss 中引入组件样式:

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

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

最后,在页面中按需引入组件:

  1. import Taro from '@tarojs/taro'
  2. import { View, Text } from '@tarojs/components'
  3. import { MSticky } from 'mounted'
  4. export default class Demo extends Taro.Component {
  5. render() {
  6. return (
  7. <View>
  8. <MSticky>
  9. <View className='title'>
  10. <Text>标题</Text>
  11. </View>
  12. </MSticky>
  13. </View>
  14. )
  15. }
  16. }

自定义主题

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

  1. // 主色调
  2. $primaryColor: #1AAD19;
  3. @import '../node_modules/mounted/src/styles/components.scss';

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

设计稿尺寸

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

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

  1. // 设计稿尺寸
  2. $designWidth: 750;
  3. @import '../node_modules/mounted/src/styles/components.scss';

许可

MIT © Jay Fong