前言

Taro 是由京东·凹凸实验室倾力打造的多端开发解决方案，旨在让一套代码在多端运行。Taro 1.0 版本发布后，也开始支持引用第三方的小程序组件库，如 iView、vant-weapp、echarts-for-weixin，然而目前市场仍然缺少一套由 Taro 编写而成的多端 UI 组件库。为了进一步丰富 Taro 的开发生态，让开发者有更好的开发体验和更快的开发速度，凹凸实验室自主设计了一套 UI 组件库，经过两个多月的精雕细琢，终于跟随 Taro 1.0 版本正式发布。

Taro UI

Taro UI 是一款由凹凸实验室打造、基于 Taro 编写的多端 UI 组件库。除了高颜值，Taro UI 最大的亮点就是支持多端运行。Taro UI 借助 Taro 支持多端运行的特点，只需解决不同平台 CSS 的表现差异问题，就可以在微信小程序/ H5 / ReactNative 等多端适配运行。

Github：https://github.com/NervJS/taro-ui

文档：https://taro-ui.aotu.io/

H5 版本预览：

微信小程序预览：

第一版组件共有六个模块、三十三个组件，未来还将继续丰富组件，增加一些常用业务组件。

特性

简单易用：支持 npm 安装，自动处理 npm 资源之间的依赖关系
框架支持：基于 Taro 开发组件，与 Taro 无缝衔接
多端适配：一套组件可以在微信小程序/ H5 / ReactNative 等多端适配运行
样式美观：小明哥(AT-UI 设计者、主程)亲自设计，细节把关，符合现代扁平化设计审美
组件丰富：提供丰富的基础组件，覆盖大部分使用场景，满足各种功能需求
按需引用：可按需使用独立的组件，不必引入所有文件，可最小化注入到项目中
多套主题：内置多套主题颜色，任君选择（将在 1.1 版本开放此特性）

快速开始

安装 Taro

安装 Taro 开发工具 @tarojs/cli

使用 npm 或者 yarn 全局安装，或者直接使用 npx

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

初始化项目

使用命令创建模板项目

$ taro init myApp

安装 Taro UI

$ cd myApp
$ npm i taro-ui

使用

在代码中 import 组件并按照文档说明进行使用

import { AtButton } from 'taro-ui'

示例

在 /myApp/src/pages/index/index.jsx 文件添加以下代码

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>
    )
  }
}

编译并预览

进入项目目录开始开发，可以选择小程序预览模式，或者 H5 预览模式，若使用微信小程序预览模式，则需要自行下载并打开微信开发者工具，选择预览项目根目录。

微信小程序编译预览模式

# npm script
$ npm run dev:weapp
# 仅限全局安装
$ taro build --type weapp --watch
# npx用户也可以使用
$ npx taro build --type weapp --watch

H5编译预览模式

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx用户也可以使用
$ npx taro build --type h5 --watch

意见反馈

如果有任何的意见或者建议，欢迎在 Github 创建 issue，感谢你的支持和贡献。

感谢您的阅读，本文由凹凸实验室版权所有。如若转载，请注明出处：凹凸实验室（https://aotu.io/notes/2018/08/27/the-birth-of-taro-ui/）上次更新：2018-08-28 11:03:44