在经过上一篇文章的介绍之后,我们知道了大体的生命周期在什么时候执行,这次主要是以代码的形式来展示一下具体的阶段执行什么生命周期方法。

首先我们编写一个代码可以从首页跳转到日志页面:

<!--index.wxml-->
<text>首页</text>
<navigator url="/pages/logs/logs">跳转到Log页面</navigator>

在日志页面当中编写监听生命周期的方法:

// logs.js
Page({
onLoad() {
console.log("onLoad");
},
onShow() {
console.log("onShow");
},
onReady() {
console.log("onReady");
},
onHide() {
console.log("onHide");
},
onUnload() {
console.log("onUnload");
}
})

onLoad/onShow/onReady

这三个方法在日志页面被加载时会被调用,运行如上的首页代码,然后从首页点击 navigator 跳转到日志页面,然后就可以查看到效果了。

?> onLoad/onShow/onReady 生命周期方法当中可以做的一些事情

  • onLoad/onShow:可以在这个方法当中进行发送网络请求,获取网络数据
  • onShow:可以恢复之前一些状态
  • onReady:可以在这个方法进行操作页面了,页面已经被渲染了

onHide

?> onHide 生命周期方法当中可以做的一些事情

  • onHide:保存当前一些状态

onUnload

?> onUnload 生命周期方法当中可以做的一些事情

  • onUnload:释放资源/移除监听

点击返回按钮返回到上一级,至于为什么就会调用 onUnload 方法这里就需要说起小程序页面之间的跳转当中其实是有一个 的,当我们点击了返回按钮,我们的日志页面就会出栈,所以不在栈当中就会被销毁了。

微信小程序-页面生命周期方法的更多相关文章

  1. 微信小程序之生命周期(三)

    [未经作者本人同意,请勿以任何形式转载] 上一篇介绍微信小程序开发工具使用和项目目录结构. 这一章节介绍微信小程序的生命周期,什么是生命周期呢? 通俗的讲,生命周期就是指一个对象的生老病死. 从软件的 ...

  2. [转] 微信小程序之生命周期

    本篇文章介绍小程序的生命周期,由于小程序分为应用和页面两个部分,所以小程序的生命周期就涉及到三个部分,分别是: 应用的生命周期 页面的生命周期 应用的生命周期对页面生命周期的影响 一.应用的生命周期 ...

  3. 教你理解微信小程序的生命周期和运行原理

    转自:http://blog.csdn.net/tsr106/article/details/53052879  写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君 ...

  4. 微信小程序的生命周期和APP对象的使用

    1.生命周期和APP对象的使用: //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSy ...

  5. 理解微信小程序的生命周期和运行原理

    写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君公众号带你学习小程序的生命周期和运行原理. 小程序由两大线程组成:负责界面的线程(view thread)和服务线 ...

  6. 微信小程序-APP生命周期与运行机制

    QQ讨论群:785071190 开发微信小程序之前需要先了解微信小程序运行机制以及其生命周期,小程序APP生命周期需要先从app.js这个文件开始. 阅读过"微信小程序-代码构成" ...

  7. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  8. 微信小程序APP生命周期

    小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...

  9. 对微信小程序的生命周期进行扩展 – Typescript 篇

    最近利用业余时间倒腾了一个微信小程序,主要目的是横向比较一些业界小程序平台的架构和做法.因为有在其他平台长期的开发经验,对于小程序的一些机制做了一些辩证的思考.例如,小程序的页面,其实不是一个页面,而 ...

  10. 微信小程序-Page生命周期

    QQ讨论群:785071190 微信小程序开发之前我们还需认识一下小程序页面的生命周期,丛"微信小程序-代码构成"一文中我们可以了解到小程序页面中有一个.js的文件,这篇博文我们来 ...

随机推荐

  1. SpringBoot 引用仓库中没有 第三方包 - 将jar 包安装本地 maven

    命令如下: mvn install:install-file -Dfile="D:\Projects\lib\com.ibm.mq-7.0.1.3.jar" -DgroupId=c ...

  2. STM32CubeMX教程16 DAC - 输出3.3V内任意电压

    1.准备材料 开发板(正点原子stm32f407探索者开发板V2.4) STM32CubeMX软件(Version 6.10.0) keil µVision5 IDE(MDK-Arm) ST-LINK ...

  3. AcWing 第五场周赛

    比赛链接:Here AcWing 3726. 调整数组 签到题 void solve() { int n; cin >> n; int x = 0, y = 1, c; for (int ...

  4. Round A 2021 - Kick Start 2021

    比赛链接:https://codingcompetitions.withgoogle.com/kickstart/round/0000000000436140 K-Goodness String (5 ...

  5. 一、Mycat实战---为什么要用mycat

    系列导航 一.Mycat实战---为什么要用mycat 二.Mycat安装 三.mycat实验数据 四.mycat垂直分库 五.mycat水平分库 六.mycat全局自增 七.mycat-ER分片 本 ...

  6. kafka集群五、__consumer_offsets副本数修改

    系列导航 一.kafka搭建-单机版 二.kafka搭建-集群搭建 三.kafka集群增加密码验证 四.kafka集群权限增加ACL 五.kafka集群__consumer_offsets副本数修改 ...

  7. secure boot (一)fit image

    前言 secure boot 和FIT Image是前段时间接触到的,其实早就该总结下了,奈何懒癌犯了,拖了好久才写出来. 之前也有人问我,工作后最大的感受是什么?我的回答是:"快速学习&q ...

  8. element的table组件在flex布局下宽度不能自适应

    问题描述 用了flex布局,左侧固定宽度,右侧flex:1:(表格在右侧区域),且中间容器都有width:100%,当将屏幕变大,表格随着变宽,当屏幕变小时,表格不会随着屏幕变小,宽度无法自适应. 解 ...

  9. 04 Tcl字符串

    Tcl字符串 4.1 Tcl将说有的变量值视作字符串,并将他们作为字符串进行保存. 命令 描述 append 将值追加到字符串尾 binary 二进制化字符串 format 字符串格式化 regexp ...

  10. Oracle实例的启动和关闭

    启动模式 1.NoMount 模式(启动实例不加载数据库) 命令:startup nomount 讲解:这种启动模式只会创建实例,并不加载数据库,Oracle仅为实例创建各种内存结构和服务进程,不会打 ...