1 简介
Taro 是一套遵循React语法规范的多端统一开发 框架。使用Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。
2 特性
React 语法风格
Taro 遵循 React 语法规范，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。
快速开发微信小程序
Taro 立足于微信小程序开发，众所周知小程序的开发体验并不是非常友好，比如小程序中无法使用 npm 来进行第三方库的管理，无法使用一些比较新的 ES 规范等等，针对小程序端的开发弊端，Taro 具有以下的优秀特性
支持使用 npm/yarn 安装管理第三方依赖
支持使用 ES7/ES8 甚至更新的 ES 规范，一切都可自行配置
支持使用 CSS 预编译器，例如 Sass 等
支持使用 Redux 进行状态管理
小程序 API 优化，异步 API Promise 化
支持多端开发转化
Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 Taro 代码可以支持转换到 微信/百度/支付宝/字节跳动/QQ小程序 、快应用、 H5 端 以及 移动端（React Native）。
3 安装及使用
安装
1）node 环境（>=8.0.0）；
2）Taro开发工具@tarojs/cli
$ npm install -g @tarojs/cli
使用
1）使用命令创建模板项目
$ taro init myApp
- 项目结构
├── 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
- 各端dev环境启动
$ npm run dev:weapp 微信小程序
$ npm run dev:swan 百度小程序
$ npm run dev:alipay 支付宝小程序
$ npm run dev:tt 字节跳动小程序
$ npm run dev:qq QQ小程序
$ npm run dev:rn
生命周期
（1）onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
（2）onShow：加载完成后、后台切到前台或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发
（4）onHide：从前台切到后台或进入其他页面触发
（5）onUnload：页面卸载时触发
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
页面事件处理函数
增加在小程序中的专属事件处理函数，如下：
onPullDownRefresh()： 监听用户下拉刷新事件
onReachBottom()：监听用户上拉触底事件
onPageScroll(Object)：监听用户滑动页面事件
onShareAppMessage(Object)： 监听用户点击页面内转发按钮（Button 组件 openType='share'）或右上角菜单“转发”按钮的行为，并自定义转发内容。
onTabItemTap(Object)：点击 tab 时触发
小程序冒泡事件与非冒泡事件
会随之触发父元素的称为冒泡事件，反之，则是非冒泡事件
e.stopPropagation()
TabBar系统化配置
app.config.js
tabBar: {
backgroundColor: "#FFFFFF",
borderStyle: "black",
selectedColor: "#00478B",
color: '#c9c9c9',
list: [
{
pagePath: 'pages/home/index',
text: "主页",
selectedIconPath: "./image/tab_home_s.png",
iconPath: "./image/tab_home.png"
}, {
pagePath: 'pages/mine/index',
text: "我的",
selectedIconPath: "./image/tab_mine_s.png",
iconPath: "./image/tab_mine.png"
}
],
},
组件的事件传递都要以 on 开头
在微信小程序中 bind 开头这样的用法，都需要转成以 on 开头的形式。
