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


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获取location.href的参数实例代码
Aug 02 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
基于jquery编写分页插件
Mar 07 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
React组件生命周期详解
Jul 03 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
layui2.0使用table+laypage实现真分页
Jul 27 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
layui表格设计以及数据初始化详解
Oct 26 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
15种PHP Encoder的比较
2007/03/06 PHP
php 动态添加记录
2009/03/10 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
php多进程应用场景实例详解
2019/07/22 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
Node.js编码规范
2014/07/14 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
基python实现多线程网页爬虫
2015/09/06 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
关于python中的xpath解析定位
2020/03/06 Python
如何理解python面向对象编程
2020/06/01 Python
Python datetime模块使用方法小结
2020/06/18 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
英语生日邀请函
2014/01/23 职场文书
王老吉广告词
2014/03/20 职场文书
研究生求职自荐书
2014/06/23 职场文书
家长学校培训材料
2014/08/20 职场文书
2015年教学工作总结
2015/04/02 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
公司员工奖惩制度
2015/08/04 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
python自动化测试通过日志3分钟定位bug
2021/11/20 Python
MySQL Server 层四个日志
2022/03/31 MySQL