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


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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
JavaScript脚本性能的优化方法
Feb 02 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
Vue实现穿梭框效果
Sep 30 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
JavaScript闭包详解
2015/02/02 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python 寻找局部最高点的实现
2019/12/05 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
Ruby如何定义一个类
2012/10/08 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
计算机专业自荐信
2013/10/14 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
授权委托书格式范文
2014/08/02 职场文书
代理人委托书
2014/09/16 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
Python中的tkinter库简单案例详解
2022/01/22 Python