编程 Javascript

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

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）

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

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

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

- Author -

Crab0314

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript下通过的XMLHttpRequest发送请求的代码

Jun 28 Javascript

关于跨站脚本攻击问题

Dec 22 Javascript

javascript Promise简单学习使用方法小结

May 17 Javascript

AngularJS 使用ng-repeat报错 [ngRepeat:dupes]

Jan 19 Javascript

jquery实时获取时间的简单实例

Jan 26 Javascript

js的OOP继承实现(必看篇)

Feb 18 Javascript

使用proxy实现一个更优雅的vue【推荐】

Jun 19 Javascript

Spring boot 和Vue开发中CORS跨域问题解决

Sep 05 Javascript

JSON生成Form表单的方法示例

Nov 21 Javascript

JS 自执行函数原理及用法

Aug 05 Javascript

解决layui-open关闭自身窗口的问题

Sep 10 Javascript

微信小程序实现页面浮动导航

Jan 08 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 时间计算问题小结

2009/01/04 PHP

PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题

2011/05/29 PHP

php处理restful请求的路由类分享

2014/02/27 PHP

详解WordPress中创建和添加过滤器的相关PHP函数

2015/12/29 PHP

关于Laravel Route重定向的一个注意点

2017/01/16 PHP

TextArea 控件的最大长度问题(js json)

2009/12/16 Javascript

用js做一个小游戏平台 (一)

2009/12/29 Javascript

JavaScript修改css样式style动态改变元素样式

2013/12/16 Javascript

node.js中的fs.fstat方法使用说明

2014/12/15 Javascript

Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能

2015/11/02 Javascript

基于jquery实现智能提示控件intellSeach.js

2016/03/17 Javascript

node.js插件nodeclipse安装图文教程

2020/10/19 Javascript

JQuery手速测试小游戏实现思路详解

2016/09/20 Javascript

BootStrap实现鼠标悬停下拉列表功能

2017/02/17 Javascript

浅谈vue项目重构技术要点和总结

2018/01/23 Javascript

自定义vue组件发布到npm的方法

2018/05/09 Javascript

nodejs实现套接字服务功能详解

2018/06/21 NodeJs

layui实现数据表格隐藏列的示例

2019/10/25 Javascript

微信小程序工具函数封装

2019/10/28 Javascript

微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

2020/06/23 Javascript

[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式

2019/12/19 DOTA

python选择排序算法的实现代码

2013/11/21 Python

Python实现的多线程端口扫描工具分享

2015/01/21 Python

python 将md5转为16字节的方法

2018/05/29 Python

Python应用库大全总结

2018/05/30 Python

python + selenium 刷B站播放量的实例代码

2020/06/12 Python

HTML5的文档结构和新增标签完全解析

2017/04/21 HTML / CSS

美国一家著名的儿童鞋制造商：Stride Rite

2017/01/02 全球购物

雅诗兰黛旗下专业男士保养领导品牌：Lab Series

2017/05/15 全球购物

优秀的自荐信要注意哪些

2014/01/03 职场文书

购房协议书范本

2014/10/02 职场文书

群众路线对照检查剖析材料

2014/10/09 职场文书

2014年学校体育工作总结

2014/12/08 职场文书

2015年监理工作总结范文

2015/04/07 职场文书

浅谈Laravel中使用Slack进行异常通知

2021/05/29 PHP

python字典的元素访问实例详解

2021/07/21 Python