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


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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
常用js脚本
Dec 03 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
七个很有意思的PHP函数
May 12 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
javascript实现评分功能
2020/06/24 Javascript
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
python实现换位加密算法的示例
2018/10/14 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
极简的HTML5模版
2015/07/09 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
学生个人求职自荐信格式
2013/09/23 职场文书
年度考核自我鉴定
2014/02/02 职场文书
教师新年寄语
2014/04/03 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
服装店员工管理制度
2015/08/07 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Mysql 如何批量插入数据
2021/04/06 MySQL
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB