preface

Taro is a multi-terminal development solution created by JINGdong · Bump Lab, which aims to make a set of code run in multiple terminals. Taro after the 1.0 release, also started to support reference to third party small program component libraries, such as iView, Vant-appp, Echarts -for-weixin, however, the market is still lacking a set of multi-end UI component libraries written by Taro. In order to further enrich Taro’s development ecology and provide developers with better development experience and faster development speed, Bump Lab independently designed a set of UI component library. After more than two months of elaboration, It was finally released with the 1.0 version of Taro.

Taro UI

Taro UI is a multi-end UI component library built by Bump Lab and written based on Taro. In addition to the high appearance level, The biggest highlight of Taro UI is that it supports multi-terminal operation. With the help of Taro UI, which supports multi-terminal operation, it can be adapted to run in wechat mini program/H5 / ReactNative as long as the performance difference of CSS on different platforms is solved.

Github:github.com/NervJS/taro…

Documents: taro – UI. Aotu. IO /

H5 release preview:

Wechat applet Preview:

The first edition consists of six modules and 33 components. In the future, we will continue to enrich the components and add some common business components.

features

  • Easy to use: support NPM installation, automatically handle the dependency between NPM resources
  • Framework support: Develop components based on Taro, seamless with Taro
  • Multi-terminal adaptation: a set of components can be run in wechat applet/H5 / ReactNative and other multi-terminal adaptation
  • Beautiful style: Xiaoming (AT-UI designer, main program) personally designed, details check, in line with the modern flat design aesthetic
  • Rich components: Provides rich basic components to cover most application scenarios and meet various functional requirements
  • On-demand references: Individual components can be used as needed, without importing all files and minimizing injection into the project
  • Multiple themes: Multiple theme colors are built in for you to choose from (this feature will be available in version 1.1)

Quick start

Install the Taro

Install Taro development tool @tarojs/ CLI

Use NPM or YARN to install the yarn globally, or use NPX directly

$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cliCopy the code

Initialize the project

Create a template project using the command

$ taro init myAppCopy the code

Install the Taro UI

$ cd myApp
$ npm i taro-uiCopy the code

use

Import components in your code and use them according to the documentation

import { AtButton } from 'taro-ui'

The sample

In/myApp/SRC/pages/index/index. The JSX file to add the following code

import Taro, { Component, Config } from '@tarojs/taro' import { View } from '@tarojs/components' import { AtButton } from 'taro-ui' import './index.scss' export default class Index extends Component { config: Config = { navigationBarTitleText: } render () {return (<View className='index'> <AtButton type='primary'> </AtButton> </View>)}}Copy the code

Compile and preview

Enter the project directory to start development, you can choose small program preview mode, or H5 preview mode, if using wechat small program preview mode, you need to download and open wechat developer tools, select preview project root directory.

Wechat small program compilation preview mode

# # NPM script $NPM run dev: weapp global installation only $taro build - type weapp - watch # NPX users can also use $NPX taro build - type weapp --watchCopy the code

H5 compile preview mode

$NPM script $NPM run dev:h5 # Global install only $taro build --type h5 --watch # NPX Users can also use $NPX taro build --type h5 --watchCopy the code

feedback

If you have any comments or suggestions, please create an issue on Github and thank you for your support and contribution.

Convex laboratory
Aotu. IO/notes / 2018 /…