微信小程序Taro开发(2):生命周期及开发中注意点

113次阅读

共计 1419 个字符,预计需要花费 4 分钟才能阅读完成。

生命周期
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

正文完
 0