本文主要是简单的介绍一下taro，我自己也是在学习，不正确的地方欢迎指出。
taro是什么
taro是一套遵循React语法规范的多端开发解决方案。使用taro可以只用书写一套代码，再通过taro的编译工具，将源代码分别编译出在不同的端（微信/京东/百度/字节跳动小程序、h5、React-Native等）运行的代码,如果需要满足不同端都有所表现，taro可以极大的帮助我们。taro多与taro-ui结合开发。
taro的安装
taro的安装比较简单，使用npm全局安装@tarojs/cli即可
npm install -g @tarojs/cli
taro项目初始化
在这之后就可以开始taro版hello world编写了
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
taro需要运行不同的命令，将taro代码编译成不同端的代码，然后在对应的开发工具中查看效果。其主要原因是Taro 订制好一个统一的组件库标准，以及统一的API标准，在不同的端依靠它们的语法与能力去实现这个组件库与API，同时为不同的端编写相应的运行时框架，负责初始化等等操作。
我这边只做了h5和微信小程序的示例
npm run dev:h5 // h5
npm run dev:weapp // 微信小程序
可以看到在dist文件下编译生成了对应不同端的代码，如微信小程序端的代码，这时再打开微信小程序的开发工具就可以查看相关页面了。
介绍下taro几个点
1、页面的生命周期
由于页面 JS 也继承自Component组件基类，所以页面同样拥有生命周期，页面增加的生命周期方法如下：
componentDidShow()
页面显示/切入前台时触发
componentDidHide()
页面隐藏/切入后台时触发， 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
组件的生命周期则和react生命周期一致
2、路由
小程序中的路由比较轻量，不需要额外配置路由文件，只需要在入口文件配置好对应的页面，再调用taro的api即可。在运行的时，小程序内维护了一个页面的栈，始终展示栈顶的页面即page对象，当用户进行跳转、后退等操作时，相应的会使页面栈进行入栈，出栈等操作。
// 跳转到目的页面，打开新页面
Taro.navigateTo({
url: '/pages/test/index'
})
// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
url: '/pages/test/index'
})
同时可以通过跳转的url中传入参数，在目标页的生命周期函数中通过 this.$router.params 获取参数
componentWillMount () {
console.log(this.$router.params)
}
3、全局变量
在 Taro 中推荐使用 Redux 来进行全局变量的管理，但是对于一些小型的应用， Redux 就可能显得比较重了，这时候如果想使用全局变量，推荐如下使用。
新增一个自行命名的 js 文件，例如 global_data.js，示例代码如下
const globalData = {}
export function set (key, val) {
globalData[key] = val
}
export function get (key) {
return globalData[key]
}
随后就可以在任意位置进行使用
import { set as setGlobalData, get as getGlobalData } from'./path/name/global_data'
setGlobalData('test', 1)
getGlobalData('test')
4、组件的提前constructor和render提前调用
可以看到taro在编译小程序端的时候, constructor和render会默认会多调用一次，表现得与 React 不太一致。
这是因为，Taro 的组件编译后就是小程序的自定义组件，而小程序的自定义组件的初始化时是可以指定 data 来让组件拥有初始化数据的。开发者一般会在组件的 constructor 中设置一些初始化的 state，同时也可能会在 render 中处理 state 与 props 产生新的数据，在 Taro 中多出的这一次提前调用，就是为了收集组件的初始化数据，给自定义组件提前生成 data ，以保证组件初始化时能带有数据，让组件初次渲染正常。
所以，在编码时，需要在处理数据的时候做一些容错处理，这样可以避免在 constructor 与 render 提前调用时出现由于没有数据导致出错的情况。
5、尺寸单位
在 Taro 中书写尺寸按照 1:1的关系来进行书写，即从设计稿上量的长度100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值。
const config = {
designWidth: 750,
deviceRatio: {
'640': 2.34 / 2,
'750': 1,
'828': 1.81 / 2
}
}
6、多端开发
假如有一个 Test 组件存在微信小程序、H5三个不同版本，那么就可以像如下组织代码
test.js 文件，这是 Test 组件默认的形式，编译到微信小程序和 H5 两端端之外的端使用的版本
test.h5.js 文件，这是 Test 组件的 H5 版本
test.weapp.js 文件，这是 Test 组件的 微信小程序 版本
使用 Test 组件的时候，引用的方式依然和之前保持一致，import的是不带端类型的文件名，在编译的时候会自动识别并添加端类型后缀
import Test from '../../components/test'
<Test />
