【微信小程序】生命周期函数微信小程序

详细请走官网

目录

1.简单说明
2.测试
3.Component 构造器

1.简单说明

/** * 页面的初始数据 */ data: {},/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 页面创建时执行 },/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { // 页面首次渲染完毕时执行 },/** * 生命周期函数--监听页面显示 */ onShow: function () { // 页面首次渲染完毕时执行 },/** * 生命周期函数--监听页面隐藏 */ onHide: function () { // 页面从前台变为后台时执行 },/** * 生命周期函数--监听页面卸载 */ onUnload: function () { // 页面销毁时执行 },/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { // 触发下拉刷新时执行 },/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { // 页面触底时执行 },/** * 用户点击右上角分享 */ onShareAppMessage: function () { // 页面被用户分享时执行 }

onPageScroll: function() { // 页面滚动时执行 }, onResize: function() { // 页面尺寸变化时执行 }, onTabItemTap(item) { // tab 点击时执行 console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // 事件响应函数 viewTap: function() { this.setData({ text: 'Set some data for updating view.' }, function() { // this is setData callback }) }, // 自由数据 customData: { hi: 'MINA' }

2.测试

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("页面加载") },/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log("页面初次渲染完成") },/** * 生命周期函数--监听页面显示 */ onShow: function () { console.log("页面显示") },

进入页面顺序
加载–显示–渲染

文章图片

页面分享顺序
分享–隐藏–显示

文章图片

3.Component 构造器 Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。
此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。
代码示例：

Component({ data: { text: "This is page data." }, methods: { onLoad: function(options) { // 页面创建时执行 }, onPullDownRefresh: function() { // 下拉刷新时执行 }, // 事件响应函数 viewTap: function() { // ... } } })

【【微信小程序】生命周期函数】这种创建方式非常类似于自定义组件，可以像自定义组件一样使用 behaviors 等高级特性。
具体细节请阅读官网 Component 构造器章节。