小程序页面生命周期

小程序生命周期的函数是在某种情况下执行的事件类型函数, 即不是手动调用的函数

在小程序使用page()注册页面实例, 使用app()注册小程序实例

在page()的括号中加入一个json型的对象, 其有中很多键值对{a:1, b:2, ...}

可用如下的键来填充a,b, ...的位置

onLoad : 页面加载

onReady : 页面初次渲染完成

onShow : 页面显示

onHide: 页面隐藏

onUnload : 页面卸载

onPullDownRefresh : 监听下拉

onReachBottom : 触底

一个页面从访问开始加载到卸载可经过这几个 事件

对页面做相关的操作, 它会触发相应事件

根据事件的不同, 有些是反复执行, 有些只执行一次

对于onPullDownRefresh事件需要在相应的.json文件中开启("enablePullDownRefresh" : true) 

Page({
data: {
logs: []
},
/* 监听页面相应事件 */
// 页面加载
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return util.formatTime(new Date(log));
})
});
console.log("this pag excute: 页面加载.");
},
// 页面初次渲染完成
onReady : function () {
console.log("this pag excute: 页面初次渲染完成.");
},
// 页面显示
onShow: function () {
console.log("this pag excute: 页面显示.");
console.log(app.globalData.userInfo);
},
// 页面隐藏
onHide: function () {
console.log("this pag excute: 页面隐藏.");
},
// 页面卸载
onUnload: function () {
console.log("this pag excute: 页面卸载.");
},
// 监听下拉
onPullDownRefresh: function () {
console.log("this pag excute: 监听下拉.");
},
// 触底
onReachBottom: function () {
console.log("this pag excute: 触底.");
},
onShareAppMessage : function() {
}
})

页面加载函数:

在js中加入这个函数, 则当该页面被加载的时候执行

它有一个重要的地方, 就是它的参数

如下, 在事件触发时, 自定义数据 (data-*) 会被封装, 传递到onLoad的参数对象中

<image src='{{item.img}}' data-movie_id='{{item.movie_id}}' catchtap="tap"></image>

onLoad: function (options) {
console.log(options.movie_id);
}

分享页面的函数:

在js文件中加入此函数, 则该页面就可以被分享

return 返回对象中的title属性可以设置分享的标题, 标题可以是内部变量中的数据

onShareAppMessage : function(){
return {
title: '天天推荐' + this.data.movieList[0].movieName
}
}

最后

以上就是朴素外套为你收集整理的小程序页面生命周期的全部内容，希望文章能够帮你解决小程序页面生命周期所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。