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


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:void(0)的问题使用探讨
Apr 10 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
用js简单提供增删改查接口
May 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
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
CentOS安装php v8js教程
2015/02/26 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
javascript prototype,executing,context,closure
2008/12/24 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python三引号如何输入
2020/07/06 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
给老婆的搞笑检讨书
2014/01/12 职场文书
化学教育专业自荐信
2014/07/04 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
接待员岗位职责范本
2015/04/15 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS