转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-10/

之前讲了小程序全局的生命周期,今天咱们说说单个页面的生命周期!源码:https://github.com/limingios/wxProgram.git 中的No.5

Page页面的生命周期

  • 官方介绍

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

  • 运行小程序查看生命周期
//index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}, onLoad: function () {
console.log("index->onLoad")
this.setData({
motto: app.globalData
})
},
onReady: function () {
console.log("index->onReady")
},
onShow: function () {
console.log("index->onShow")
},
onHide: function () {
console.log("index->onHide")
},
onUnload: function () {
console.log("index->onUnload")
},
})

加载onLoad,加载onShow,全部显示的时候调用onReady

  • 修改代码演示onHide 和 onUnload
    >增加一个绑定事件跳转的方式来演示onHide和onUnLoad
  1. navigateTo
//index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}, onLoad: function () {
console.log("index->onLoad")
this.setData({
motto: app.globalData
})
},
onReady: function () {
console.log("index->onReady")
},
onShow: function () {
console.log("index->onShow")
},
onHide: function () {
console.log("index->onHide")
},
onUnload: function () {
console.log("index->onUnload")
},
clickMe: function(){
wx.navigateTo({
url: '../test/test',
})
}
})

左上角有返回键

navigateTo 可以hide

  1. redirectTo
//index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}, onLoad: function () {
console.log("index->onLoad")
this.setData({
motto: app.globalData
})
},
onReady: function () {
console.log("index->onReady")
},
onShow: function () {
console.log("index->onShow")
},
onHide: function () {
console.log("index->onHide")
},
onUnload: function () {
console.log("index->onUnload")
},
clickMe: function(){
wx.redirectTo({
url: '../test/test',
})
}
})

redirectTo 有onUnLoad 没有hide

PS:这块主要是对配置的生命周期的熟悉,了解下redirectTo 和 navigateTo 之前的区别。

「小程序JAVA实战」 小程序私有页面的生命周期以及导航(10)的更多相关文章

  1. 「小程序JAVA实战」 小程序默认加载的页面和生命周期(八)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-08/ 小程序如何加载的呢?生命周期!源码:https://github.com/limingios ...

  2. 「小程序JAVA实战」小程序视频播放的时候生命周期的控制(56)

    转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinbofangdeshihoushengmingzhouqi ...

  3. 「小程序JAVA实战」小程序页面的上拉下拉刷新(50)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxuyemiandeshanglaxialashuaxin49/ 之前已经 ...

  4. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  5. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  6. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  7. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  8. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  9. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

随机推荐

  1. 【spark】常用转换操作:sortByKey()和sortBy()

    1.sortByKey() 功能: 返回一个根据键排序的RDD 示例 val list = List(("a",3),("b",2),("c" ...

  2. 【ccf2017-12-2】游戏(模拟)

    问题描述 有n个小朋友围成一圈玩游戏,小朋友从1至n编号,2号小朋友坐在1号小朋友的顺时针方向,3号小朋友坐在2号小朋友的顺时针方向,……,1号小朋友坐在n号小朋友的顺时针方向. 游戏开始,从1号小朋 ...

  3. hdu4715

    题解: 二分图判断 建立原图的补图 判断是否是二分图 代码: #include<cstdio> #include<cmath> #include<cstring> ...

  4. ZOJ 3207 80ers' Memory(strcmp函数的用法)

    80ers' Memory Time Limit: 1 Second      Memory Limit: 32768 KB I guess most of us are so called 80er ...

  5. a, b交换与比较问题

    1. 求a, b中较大的数,不使用if.?.switch等判断语句. 答案: 另一种思路是求两者的差,然后通过位运算判断差值的正负,不过个人觉得还是第一种各位简洁优雅. 2. 交换a, b的值,要求不 ...

  6. Java局域网对战游戏、天气预报项目

    功能 1.天气预报 2.局域网对战 展示  java学习群669823128   部分源码 package game.weather; import java.util.HashMap; public ...

  7. Hibernate中 一 二级缓存及查询缓存(1)

    最近趁有空学习了一下Hibernate的缓存,其包括一级缓存,二级缓存和查询缓存(有些是参照网络资源的): 一.一级缓存     一级缓存的生命周期和session的生命周期一致,当前sessioin ...

  8. [CSU1911]Card Game

    vjudge 题意 两个数组\(\{a_i\}\)和\(\{b_i\}\),求从中分别选出两个数或运算结果为\(x\)的方案数. sol 裸的FWT. code #include<cstdio& ...

  9. LOJ10050 The XOR Largest Pair

    题意 在给定的 \(N\) 个整数 \(A_1,A_2,-,A_N\) 中选出两个进行异或运算,得到的结果最大是多少? 对于 \(100\%\) 的数据,\(1\le N\le 10^5, 0\le ...

  10. BZOJ5337 [TJOI2018]str

    题意 小豆参加了生物实验室.在实验室里,他主要研究蛋臼质.他现在研究的蛋臼质是由k个氨基酸按一定顺序构成的.每一个氨基酸都可能有a种碱基序 列si_j 构成.现在小豆有一个碱基串s,小豆想知道在这个碱 ...