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


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 相关文章推荐
javascript 获取select下拉列表值的代码
Sep 07 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
Vue组件基础用法详解
Feb 05 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 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
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python实现提取文章摘要的方法
2015/04/21 Python
初步讲解Python中的元组概念
2015/05/21 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python搜索算法原理及实例讲解
2020/11/18 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
外贸英语毕业生自荐信
2013/11/14 职场文书
大学生工作自荐书
2014/06/16 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
小学感恩主题班会
2015/08/12 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL