https://github.com/fjc0k/mounted

基于 Taro 的小程序组件库。
https://github.com/fjc0k/mounted

taro taro-components weapp weapp-components

Last synced: 3 months ago
JSON representation

基于 Taro 的小程序组件库。

• Host: GitHub
• URL: https://github.com/fjc0k/mounted
• Owner: fjc0k
• License: mit
• Created: 2019-01-26T18:46:58.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-06-06T14:26:33.000Z (about 4 years ago)
• Last Synced: 2024-03-19T11:48:08.643Z (4 months ago)
• Topics: taro, taro-components, weapp, weapp-components
• Language: TypeScript
• Homepage: https://npm.im/mounted
• Size: 1.21 MB
• Stars: 69
• Watchers: 5
• Forks: 8
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Lists

• awesome-taro - Mounted - 一款基于 Taro 的小程序组件库

README

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



  



# Mounted

一款基于 [Taro](https://github.com/NervJS/taro) 的小程序组件库。



## ⚠ 注意

- 目前仅支持 **微信小程序**。

- 推荐和 **TypeScript** 一起使用。

## 特性

- 使用 **TypeScript** 编写。

- 专注 **小程序**。

- 只产出与业务低耦合的 **基础组件**。

- 支持 **自定义主题**。

## 使用

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

```bash

# yarn

yarn add mounted

# 或者，npm

npm i mounted --save

```

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

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

```scss

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

```

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

```js

import Taro from '@tarojs/taro'

import { View, Text } from '@tarojs/components'

import { MSticky } from 'mounted'

export default class Demo extends Taro.Component {

  render() {

    return (

      

        

          

            标题

          

        

      

    )

  }

}

```

## 自定义主题

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

```scss

// 主色调

$primaryColor: #1AAD19;

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

```

> 组件库所使用的样式变量都在 [src/styles/settings.scss](https://github.com/fjc0k/mounted/blob/master/src/styles/settings.scss) 文件内。

## 设计稿尺寸

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

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

```scss

// 设计稿尺寸

$designWidth: 750;

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

```

## 许可

MIT © Jay Fong