前言

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 版本预览

首个多端 UI 组件库 - Taro UI 发布_第1张图片

微信小程序预览

首个多端 UI 组件库 - Taro UI 发布_第2张图片

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

首个多端 UI 组件库 - Taro UI 发布_第3张图片

特性

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

快速开始

安装 Taro

安装 Taro 开发工具 @tarojs/cli

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

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

初始化项目

使用命令创建模板项目

1
$ taro init myApp

安装 Taro UI

1
2
$ cd myApp
$ npm i taro-ui

使用

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

import { AtButton } from 'taro-ui'

示例

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 (
'index'>
'primary'>按钮文案</AtButton>
View>
)
}
}

编译并预览

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

微信小程序编译预览模式

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

H5编译预览模式

1
2
3
4
5
6
# 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/)
上次更新:2019-04-20 19:28:31