首个多端 UI 组件库 - Taro UI 发布

前言

Taro一步一步的在布生态。今日早读文章由@凹凸实验室投稿分享。

正文从这开始~~

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/

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

特性

• 简单易用：支持 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

关于本文
作者：@阿集
原文：
https://aotu.io/notes/2018/08/27/the-birth-of-taro-ui/

最后，他曾分享过：