taro开发微信小程序: 生命周期

文章来源

生命周期
componentWillMount

在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch

componentDidMount

在微信小程序中这一生命周期方法对应页面的onReady或入口文件app中的onLaunch，在 componentWillMount后执行

componentDidShow

在微信小程序中这一生命周期方法对应 onShow

componentDidHide

在微信小程序中这一生命周期方法对应 onHide

componentDidCatchError

错误监听函数，在微信小程序中这一生命周期方法对应 onError

componentDidNotFound

页面不存在监听函数，在微信小程序中这一生命周期方法对应 onPageNotFound

shouldComponentUpdate

页面是否需要更新

componentWillUpdate

页面即将更新

componentDidUpdate

页面更新完毕

componentWillUnmount

页面退出，在微信小程序中这一生命周期方法对应 onUnload

在小程序中 ，页面还有一些专属的方法成员，如下：

1. onPullDownRefresh： 页面相关事件处理函数–监听用户下拉动作

2. onReachBottom： 页面上拉触底事件的处理函数

3. onShareAppMessage： 用户点击右上角转发

4. onPageScroll： 页面滚动触发事件的处理函数

5. onTabItemTap： 当前是 tab 页时，点击 tab 时触发

6. componentWillPreload： 预加载，只在微信小程序中可用

注意

1.通常入口文件会包含一个 config 配置项，这里的配置主要参考微信小程序的全局配置而来，在编译成小程序时，这一部分配置将会被抽离成 app.json，而编译成其他端，亦会有其他作用。

2.入口文件继承自 Component 组件基类，它同样拥有组件生命周期，但因为入口文件的特殊性，他的生命周期并不完整，如：componentWillMount、componentDidMount、componentDidShow、componentDidHide、componentDidCatchError、componentDidNotFound。

3.入口文件需要包含一个 render 方法，一般返回程序的第一个页面，但值得注意的是不要在入口文件中的 render 方法里写逻辑及引用其他页面、组件，因为编译时 render 方法的内容会被直接替换掉，你的逻辑代码不会起作用。

4.Taro 支持组件化开发，组件代码可以放在任意位置，不过建议放在 src 下的 components 目录中。一个组件通常包含组件 JS 文件以及组件样式文件，组织方式与页面类似。

taro项目目录如下:

├── 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