Taro快速入门

一、安装

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