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


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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
JavaScript中如何调用Java方法
Sep 16 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使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
js打造数组转json函数
2015/01/14 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
python中的lambda表达式用法详解
2016/06/22 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
小学生学习感言
2014/03/10 职场文书
四群教育工作实施方案
2014/03/26 职场文书
借款协议书
2014/04/12 职场文书
物业保安岗位职责
2014/07/02 职场文书
妇女工作先进事迹
2014/08/17 职场文书
优秀员工推荐材料
2014/12/20 职场文书
寒假生活随笔
2015/08/15 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python