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


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加解密功能页面
Dec 12 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
php flv视频时间获取函数
2010/06/29 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python中logging模块的用法实例
2014/09/29 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
设计师个人求职信范文
2014/02/02 职场文书
中秋寄语大全
2014/04/11 职场文书
《悯农》教学反思
2014/04/28 职场文书
战略合作意向书
2014/07/29 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
基于angular实现树形二级表格
2021/10/16 Javascript