微信小程序页面生命周期

Alex 发布于2019-08-23 12:50 / 2921人阅读

摘要：页面点击跳转到生命周期页页面点击按钮跳转页面获取当前页面参数页面显示切入前台时触发。如或底部切换到其他页面，小程序切入后台等。

onLoad(Object query)

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

//url wxml页面


//url页面点击按钮跳转(js）
clickme:function(){
    wx.navigateTo({
      url:"../lifeperiod/lifeperiod?id=10086"
    })
  }

//lifeperiod页面获取当前页面参数(js）
onLoad: function (option) {
    console.log(option.id)
  },

onShow

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

//wxml
{{showme}}
//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 或使用组件	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 或使用组件	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮	onUnload	onShow
重启动	调用 API wx.reLaunch 或使用组件	onUnload	onLoad, onShow

私有云云服务器页面生命周期应用程序的生命周期应用程序生命周期管理 ios应用程序生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99042.html

微信小程序Taro开发(2)：生命周期及开发中注意点

摘要：入口文件继承自组件基类，它同样拥有组件生命周期，但因为入口文件的特殊性，他的生命周期并不完整，如。支持组件化开发，组件代码可以放在任意位置，不过建议放在下的目录中。生命周期 componentWillMount 在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch componentDidMount 在微信小程序中这一生命周期方法对应页面的onRe...

morgan 2019-08-23 14:09 评论0 收藏0
微信小程序知识总结及案例集锦

摘要：对微信小程序进行全局配置，决定页面文件的路径窗口表现设置网络超时时间设置多等。微信小程序知识总结及案例集锦微信小程序的发展会和微信公众号一样，在某个时间点爆发学习路径微信小程序最好的教程肯定是官方的文档啦，点击这里直达微信官方文档认真跟着文档看一遍，相信有vue前端经验的看下应该就能上手了，然后安装微信小程序开发者工具新建一个quick start项目，了解代码结构，...

sean 2019-08-20 17:45 评论0 收藏0
微信小程序和Android开发对比(上篇)

摘要：小程序微信把这个小程序框架称为，并声称是在微信中开发小程序的框架。在小程序里面，对应的是和，注意虽然模式和很像，但是在形式上算是微信自己开发的一套所以你需要使用他们自己的标签。这篇文章将围绕下面几个方面：从开发模式（过程）上对比Android和小程序，比较两种模式的异同从实现功能上对比，主要是看看微信小程序的局限自己的一些看法，微信的优势开发过程上的对比在我看来,开发一...

yy736044583 2019-08-22 10:41 评论0 收藏0