官方文档 | Taro UI | 更多资源

认知

Taro 是一套遵循 React 语法规范的 多端开发 解决方案, 使用 Taro 可以只书写一套代码, 再通过 Taro 的编译工具, 将源代码分别编译出可以在不同端运行的代码

Taro UI 是一款基于 Taro 框架开发的多端 UI 组件库, 一套组件可以在 微信小程序、支付宝小程序、百度小程序、H5 多端适配运行

快速上手

node 环境 >= 8.0.0, 推荐 nvm 来管理 node

安装 CLI 工具

1
2
3
4
5
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli
$ cnpm install -g @tarojs/cli
# 如果安装过程出现 sass 相关的安装错误, 安装 mirror-config-china 后重试
$ npm install -g mirror-config-china

项目初始化

1
2
3
4
# 创建模版项目
$ taro init myApp
# 不在全局安装的情况下使用 npx 创建模版项目
$ npx @tarojs/cli init myApp

运行

注意: 保持 @tarojs/cli 的版本与各端依赖版本一致

小程序 (包含微信/百度/支付宝/字节跳动/qq/京东/快应用)

进入各自的小程序开发工具后, 执行以下命令, 进行小程序编译预览及打包(去掉 –watch 将不会监听文件修改, 并会对代码进行压缩打包)

1
2
3
4
5
6
7
8
9
10
11
12
13
# / 号后分别代表微信、百度、支付宝、字节跳动、qq、京东、快应用
# yarn
$ yarn dev:weapp/swan/alipay/tt/qq/jd/quickapp
$ yarn build:weapp/swan/alipay/tt/qq/jd/quickapp
# npm script
$ npm run dev:weapp/swan/alipay/tt/qq/jd/quickapp
$ npm run build:weapp/swan/alipay/tt/qq/jd/quickapp
# 仅限全局安装
$ taro build --type weapp/swan/alipay/tt/qq/jd/quickapp --watch
$ taro build --type weapp/swan/alipay/tt/qq/jd/quickapp
# npx 用户也可以使用
$ npx taro build --type weapp/swan/alipay/tt/qq/jd/quickapp --watch
$ npx taro build --type weapp/swan/alipay/tt/qq/jd/quickapp

H5

无需特定开发者工具, 执行以下命令进行项目的预览和打包, 可通过浏览器进行预览

1
2
3
4
5
6
7
8
9
10
11
12
# yarn
$ yarn dev:h5
$ yarn build:h5
# npm script
$ npm run dev:h5
$ npm run build:h5
# 仅限全局安装
$ taro build --type h5 --watch
$ taro build --type h5
# npx 用户也可以使用
$ npx taro build --type h5 --watch
$ npx taro build --type h5

React Native

1
2
3
4
5
6
7
8
# yarn
$ yarn dev:rn
# npm script
$ npm run dev:rn
# 仅限全局安装
$ taro build --type rn --watch
# npx 用户也可以使用
$ npx taro build --type rn --watch
  1. RN 端和其他端样式兼容性差异较大, 如需兼容 RN 端, 建议 RN 端和其他端同步开发
  2. 如需支持 RN 端, 必须使用 flex 布局, 并且样式选择器仅支持类选择器, 且不支持 组合器

样式上 H5 最为灵活, 小程序其次, RN 最弱, 同一多端样式即短版对齐, 也就是要以 RN 的约束来管理样式, 同时兼顾小程序的限制, 核心用三点概括

  • 使用 Flex 布局
  • 基于 BEM 写样式
  • 采用 style 属性覆盖组件样式

    RN 中 View 标签默认主轴方向是 column, 如果不将其他端改为与 RN 一致, 就需要在所有用到 display: flex 的地方都显式声明主轴位置

常用 CLI 命令

1
2
3
4
5
6
7
8
9
init [projectName]  创建一个带有默认模块的项目
config <cmd>        Taro 配置
create              在当前项目的 pages 目录下快速生成新的页面文件
build               Build a project with options
update              Update packages of taro
convert             Convert weapp to taro
info                检测 Taro 环境及依赖的版本等信息
doctor              诊断项目的依赖、设置、结构，以及代码的规范是否存在问题，并尝试给出解决方案
help [cmd]          display help for [cmd]

更新

1
2
3
4
5
6
7
8
# taro
$ taro update self [version]
# npm
npm i -g @tarojs/cli@[version]
# yarn
yarn global add @tarojs/cli@[version]
# 更新项目中 Taro 相关的依赖, 如果命令更新失败, 需要在 package.json 中手动更新, 然后重新安装依赖
$ taro update project [version]

快速创建新页面

1
2
# 在当前项目的 pages 目录下快速生成新的页面文件, 并填充基础代码, 提升效率利器
$ taro create --name [pageName]

CLI 配置

1
2
3
4
5
6
7
8
9
10
# 查看用法
$ taro config --help
# 设置配置项<key>的值为<value>
$ taro config set <key> <value>
# 读取配置项<key>
$ taro config get <key>
# 删除配置项<key>
$ taro config delete <key>
# 打印所有配置项
$ taro config list [--json]

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── components         公共组件目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── banner     页面 index 私有组件
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── utils              公共方法库
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json

命名规范

  • 普通 js/ts 文件: 小写 + 下划线
  • 组件: 大驼峰命名