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


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字符串处理性能的代码
Dec 07 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
Uploadify上传文件方法
Mar 16 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
详解Vue3中对VDOM的改进
Apr 23 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实现的click captcha点击验证码类实例
2014/09/23 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
自制PHP框架之设计模式
2017/05/07 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python中的With语句的使用及原理
2020/07/29 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
主要的Ajax框架都有什么
2013/11/14 面试题
高校教师自荐信范文
2014/03/13 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers