微信小程序页面生命周期详解


Posted in Javascript onJanuary 31, 2018

微信小程序页面生命周期介绍,具体如下

页面生命周期函数

onLoad—-监听页面加载
onReady—-监听页面初次渲染完成
onShow—-监听页面显示
onHide—-监听页面隐藏
onUnload—-监听页面卸载

Page({

 /**
  * 页面的初始数据
  */
 data: {
  banner_url:data.bannerList(),
  open:false
 },

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

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
  console.log("==onReady==");
 },

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

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

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
  console.log("==onUnload==");
 }
})

进入首页触发的函数

微信小程序页面生命周期详解 

进入和离开blog页面的触发函数

微信小程序页面生命周期详解 

总结:

1. 在离开首页进入详情页面的时候采用的是onHide函数—-只是将页面隐藏,当我们回到首页的时候直接用onShow显示就好;
2. 在离开详情页面的时候采用的是onUnload函数—-此处是将页面卸载,所以下次进入详情页面的时候,我们需要将页面再次(加载—-显示—-渲染)
3. 以上情况是在不设置open-type的情况,如果open-type=”redirect”,那么在离开首页的时候就会触发onUnload,从而不能再返回首页。

详情参考:微信小程序组件的navigator

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
原生js实现3D轮播图
Mar 21 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 #Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 #Javascript
微信小程序App生命周期详解
Jan 31 #Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
微信小程序switch组件使用详解
Jan 31 #Javascript
vue项目中导入swiper插件的方法
Jan 30 #Javascript
微信小程序实现手势图案锁屏功能
Jan 30 #Javascript
You might like
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
php mail to 配置详解
2014/01/16 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
CI框架常用方法小结
2016/05/17 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
python中使用mysql数据库详细介绍
2015/03/27 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python入门学习指南分享
2018/04/11 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
使用python3构建文件传输的方法
2019/02/13 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
对python中return与yield的区别详解
2020/03/12 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
致铅球运动员广播稿精选
2014/01/12 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
python中的sys模块和os模块
2022/03/20 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS