一、安装
npm install -g @tarojs/cli
二、初始化项目
taro init myApp
image.png
三、运行
npm run dev:weapp
该命令这是将react代码转换为小程序代码
四、将代码导入到小程序
image.png
小程序开发者工具导入后效果：
image.png
五、代码结构
image.png
1、config用于配置页面配置，可以配置导航条的背景颜色，文案等。至于可以配置哪些，要看小程序的页面配置文档
(https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE）
2、生命周期
由于小程序提供的生命周期与react不一致，所以相应的生命周期写法也会不一样。
taro对应小程序的生命周期
生命周期
componentWillMount
在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch
componentDidMount
在微信小程序中这一生命周期方法对应页面的onReady或入口文件app中的onLaunch，在 componentWillMount后执行
componentDidShow
在微信小程序中这一生命周期方法对应 onShow
componentDidHide
在微信小程序中这一生命周期方法对应 onHide
componentDidCatchError
错误监听函数，在微信小程序中这一生命周期方法对应 onError
componentDidNotFound
页面不存在监听函数，在微信小程序中这一生命周期方法对应 onPageNotFound
shouldComponentUpdate
页面是否需要更新
componentWillUpdate
页面即将更新
componentDidUpdate
页面更新完毕
componentWillUnmount
页面退出，在微信小程序中这一生命周期方法对应 onUnload
最后，taro只是把react代码转换为小程序代码，所以小程序有什么能力，taro才能提供什么能力，也才有对应的写法
六、参考链接
Taro文档：https://nervjs.github.io/taro/docs/before-dev-remind.html
小程序文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
