Page生命周期

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
指的是页面的js中的Page参数。

生命周期指的是页面从打开到关闭过程中可在某一步时执行一些操作。

onLoadfunction 生命周期回调—监听页面加载
onShowfunction 生命周期回调—监听页面显示
onReadyfunction 生命周期回调—监听页面初次渲染完成
onHidefunction 生命周期回调—监听页面隐藏
onUnloadfunction 生命周期回调—监听页面卸载

onLoad/onShow

js:

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("监听页面加载")
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("监听页面初次渲染完成")
  },
  • onLoad指的是新页面刚开始加载时就会执行指定的内容。
  • onReady指的是页面第一次加载完成页面就会执行指定的内容,如果切换后台再切回来不会激发该生命周期。


onShow/onHide

  • onShow在页面刚加载、从后台切换回页面、从其他页面切换回该页面时都会触发该生命周期。
  • onHide在从该页面切到其他地方时会触发。

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
      console.log("监听页面显示")
    },
    
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
      console.log("监听页面隐藏")
    },


Page其他动作

onUnload

卸载页面时才会执行,用到的频率不是很多。

onPullDownRefresh

当用户执行下拉刷新时会执行指定任务。

实验

首先在demo4的json中添加允许下来刷新参数:

enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh

demo4.json:

{
  "usingComponents": {},
  "enablePullDownRefresh":true
}

demo4.js:

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("监听页面下拉刷新")
  },

这样就能监听到下拉动作。

onReachBottom

页面上拉触底事件触发指定任务,但是页面对高度有一定的要求,否则不会触发。

实验

首先在wxml中写一个盒子,让页面具有一定的高度。

<!--pages/demo4/demo4.wxml-->
<text>pages/demo4/demo4.wxml</text>
<view style="height:1000px;background:#ccc;"></view>

js:

  onReachBottom: function () {
    console.log("触底了")
  },



onShareAppMessage

分享时触发的事件,如果将这个参数删去,那么在页面右上角点击三个小点时就不能转发分享。
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object

参数类型说明最低版本
fromString转发事件来源。
button:页面内转发按钮;
menu:右上角转发菜单
1.2.4
targetObject如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined1.2.4
webViewUrlString页面中包含web-view组件时,返回当前web-view的url1.6.4

实验

这是允许分享时,点击三个小点看到的操作页。

接下来删除onShareAppMessage,再次点击。


可以看到不允许分享。

最后修改:2024 年 03 月 14 日
如果觉得我的文章对你有用,请随意赞赏