脚本宝典收集整理的这篇文章主要介绍了

微信小程序页面生命周期

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

如图所示:微信小程序页面生命周期

  • onLoad(Object query)

    页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
    可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

    //url wxml页面
    <button bindtap='clickme'>点击跳转到生命周期页</button>
    
    //url页面点击按钮跳转(js)
    clickme:function(){
        wx.navigateTo({
          url:'../lifeperiod/lifeperiod?id=10086'
        })
      }
    
    //lifeperiod页面获取当前页面参数(js)
    onLoad: function (option) {
        console.log(option.id)
      },

输出结果

  • onShow

    页面显示/切入前台时触发。

//wxml
<text>{{showme}}</text>
//js
onReady: function () {
    console.log("onReady-test")
    this.setData({
      showme: "loveweiwei"
    })
},
onShow: function () {
    console.log("onShow-test");
    this.setData({
      showme: "loveme"
    })
}

猜猜显示loveme还是loveweiwei?

答案展示

onShow监听页面显示比onReady函数监听页面初次渲染完成先调用

加载顺序

  • onReady

    页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

  • onHide

    页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。
    从url页面跳转到lifeperiod页面,会触发url页面的onHide。

  • onUnload

    页面卸载时触发。如redirectTo或navigateBack到其他页面时。
    从lifeperiod页面返回url页面,会触发lifeperiod页面的onUnload。


图片描述

注意:返回url页面时显示loveme,是因为onReady为监听页面初次渲染完成触发


图片描述


路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面 onLoad, onShow
打开新页面 调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/> onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/> onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮 onUnload onShow
重启动 调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/> onUnload onLoad, onShow

总结

以上是脚本宝典为你收集整理的

微信小程序页面生命周期

全部内容,希望文章能够帮你解决

微信小程序页面生命周期

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过