小程序的生命周期和页面的生命周期
2019-09-23 本文已影响0人
小贤笔记
注: 文章摘自 何时不少年 - CSDN
小程序的生命周期——App.js
App() 必须在 app.js 中注册，且不能注册多个。所以 App() 方法在一个小程序中有且仅有一个。
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。先上代码：
App({
onLaunch() {
console.log('App onLaunch');
},
onShow(){
console.log('App onShow');
},
onHide(){
console.log('App onHide');
},
onError(){
console.log('App onError');
},
getPics() {
return this.globalData.picList;
}
});
| 属性 | 类型 | 描述 | 触发时机 |
|---|---|---|---|
| onLaunch | Function | 生命周期函数–监听小程序初始化 | 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） |
| onShow | Function | 生命周期函数–监听小程序显示 | 当小程序启动，或从后台进入前台显示，会触发 onShow |
| onHide | Function | 生命周期函数–监听小程序隐藏 | 当小程序从前台进入后台，会触发 onHide |
| onError | Function | 错误监听函数 | 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 |
| 其他 | Any | - | 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问，上面的getPics就是函数， globalName是数据，这里面的函数和数据都是全局的。调用方式：在Pager中通过getApp()方法得到App对象并获得全局的数据和调用全局的函数 |
注意：
- 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
- 不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
- 通过 getApp() 获取实例之后，不要私自调用生命周期函数。
页面的生命周期
Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等
生命周期函数
Page({
data:{
name: 'test'
},
// 生命周期函数--监听页面加载
onLoad(options){
console.log("test1 onLoad");
},
// 生命周期函数--监听页面初次渲染完成
onReady(){
console.log("test1 onReady");
},
// 生命周期函数--监听页面显示
onShow(){
console.log("test1 onShow");
},
// 生命周期函数--监听页面隐藏
onHide(){
console.log("test1 onHide");
},
// 生命周期函数--监听页面销毁
onUnload(){
console.log("test1 onUnload");
},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() {
console.log("test1 onPullDownRefresh");
},
// 页面上拉触底事件的处理函数
onReachBottom() {
console.log("test1 onReachBottom");
}
});
