微信小程序的生命周期的详解


Posted in Javascript onOctober 19, 2017

今天记录一下微信小程序的app生命周期及各页面的生命周期。

(一)小程序的生命周期

在app.json中进行监听,三个方法

①onLauch方法只在小程序启动时触发一次。

②onShow方法,在小程序启动时,及由后台切换至前台显示时触发。

③onHide方法,在小程序由前台显示切换至后台时触发。

可以通过 ↓ 这张图片,感受一下各生命周期。

微信小程序的生命周期的详解

比较有趣的地方是,小程序启动时会触发两次onShow,我不知道是为什么。希望了解的同学解释一下。

(二)页面的生命周期

1.在index中我添加了两种方式跳转到新增的crab页面 ↓ 在这里简单介绍一下

①在index.wxml文件中通过在<navigator>标签中添加url实现跳转

②将button绑定到index.js中的方法实现跳转,此处我将方法命名为turnCrabFunction,并在index.js中实现该方法。

微信小程序的生命周期的详解

微信小程序的生命周期的详解

2.下面介绍crab.js中的各生命周期

↓图为该文件部分代码,使用console.log进行打印,方便我们进行观察各生命周期。(各函数后面注释对应功能说明。)

微信小程序的生命周期的详解

其中,onSomeFunction是我随意命名的,其他方法均有固定名字及含义。

3.在index界面,我们选择任意一种方式进入crab界面。↓图进行详细说明

微信小程序的生命周期的详解

(如果无法实现下拉刷新,请检查app.json中window参数,或检查当前页面的crab.json文件是否覆盖该参数为false)

微信小程序的生命周期的详解

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 #Javascript
js 两个日期比较相差多少天的实例
Oct 19 #Javascript
Angular弹出模态框的两种方式
Oct 19 #Javascript
vue使用axios跨域请求数据问题详解
Oct 18 #Javascript
JS实现按钮颜色切换效果
Sep 05 #Javascript
JS实现元素上下左右移动效果
Oct 18 #Javascript
JS去掉字符串中所有的逗号
Oct 18 #Javascript
You might like
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python数据归一化及三种方法详解
2019/08/06 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
python绘制高斯曲线
2021/02/19 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
高中美术教学反思
2014/01/19 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
《比的意义》教学反思
2016/02/18 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
CPU不支持Windows11系统怎么办
2021/11/21 数码科技