小程序监听返回键_微信小程序的生命周期学习笔记-应用篇

e41183374bf2fdb8e4959c7f9ae09e79.png

在我们学习微信小程序的过程当中,我们会参考很多资料。在这些资料中,我们经常能够看到“生命周期”四个字,在前面的课程中也提到过。在这里做一个说明。

生命周期是一类函数的统称,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。他们的作用是负责监听一些操作或者状态,当到达了某些特殊的时间点或者发生了某些特殊的事件时,这些函数就会触发,我们可以通过这种函数来在相应的时间点或事件下,实现我们的小程序应有的功能。

我们在小程序中主要研究三种生命周期:应用生命周期、页面生命周期、组件生命周期。

应用生命周期

应用生命周期也称小程序生命周期,是三种生命周期中相比之下比较易懂的一种,所以我们会重点介绍应用生命周期。掌握了应用生命周期可以为页面生命周期和组件生命周期的掌握做好基础。

应用生命周期主要包含五个函数:

属性类型必填描述onLaunchFunction否监听小程序初始化onShowFunction否监听小程序启动或切前台onHideFunction否监听小程序切后台onErrorFunction否错误监听函数onPageNotFoundFunction否页面不存在监听函数

onLaunch

我们在创建一个新的微信小程序项目时,打开app.json文件,我们就可以看到一个叫做onLaunch的函数,如图。

07adc8160358b52019e580aa26bd07c1.png

Luanch在英文中是“启动”的意思。onLaunch函数在小程序启动并完成初始化后触发,只触发一次。如上图,小程序在读取用户的一些信息,可以在小程序的其他地方使用。

我们现在重新编写onLaunch函数如下。

onLaunch: function () {    console.log("Launch");}

这段程序所做的事情就是在小程序启动、完成初始化后,在调试器的console中输出一个“Launch”的字符串。

保存、编译后,我们在console中得到了“Launch”字符串,如图。

bd58408778b167214bd61534c3ec1cbd.png

在onLaunch函数中,我们可以像其中添加自己想要进行的初始操作,例如获取用户信息、申请权限、获取服务器数据等,为小程序的后续功能提供方便。

onShow

Show,即为出现。在屏幕上从无到有,从非当前小程序变为当前小程序,即为出现一次。对于微信小程序的消失与重现,无非是从别的地方切到了这个小程序当中,把这个小程序切到了前台。

我们在onLaunch的同层级同样编写一个onShow函数如下,以测试onShow函数的执行时间点。(下面测试的onHide、onError和onPageNotFound都是在这个层级)

onShow: function () {    console.log("Show");}

在开发者工具中,有切后台的测试功能,即模拟各种情况之中将小程序从后台切回前台的状况。我们随意选择几种,每次将小程序切回前台,都会输出一个“Show”字符串。请大家自己尝试。

这里需要注意的是,小程序启动、进行初始化的时间点也属于出现一次。

将onShow函数和onLuanch函数放到一起,重新启动小程序,会发现,onLuanch的执行时间点早于onShow的执行时间点。

onHide

Hide,即为隐藏。与onShow相反,onHide的时间点是微信小程序被切到后台时开始执行。通过onHide函数,我们可以实现小程序被切到后台后,计时器暂停计时、统计切后台次数等自己想要的功能。

测试代码如下:

onHide: function () {    console.log("Hide");}

和之前的测试代码一样,在执行onHide函数时我们会在console中得到一个“Hide”字符串。

当我们点击开发者工具中切后台的按键的一瞬间,就可以得到“Hide”字符串了。大家可以自行尝试。

onError

Error是错误的意思。onError函数的执行时间点是在我们的代码运行出错时执行。

onError测试代码如下:

onError: function (err) {    console.log("Error");    console.log(err);}

onError函数与其他函数不同,我们需要传递一个参数err来记录错误内容。当然这里给参数起的名字是err,起别的名字也可以,根据自己的习惯来命名即可。

这里我们给了onError函数两个任务:当代码执行出错时,先在console中输出“Error”字符串,然后把错误信息输出出来。

至于测试的方法有很多,例如我们可以在onLaunch或onShow中随便加一行错误代码,如下:

onShow: function () {    console.log("Show");    abc}

这里abc就是一行错误代码。之所以会想到用onLaunch和onShow,是因为这两个函数在小程序一启动就会执行,方便测试。大家自己尝试。

onPageNotFound

Page Not Found,是页面没有找到的意思。换言之,我们提供的页面不存在,导致代码执行出现了错误。但是,在应用生命周期中的这个onPageNotFound,触发是有一定条件的,它只有在小程序最初启动时找不到启动页面才会触发,其他情况下不会触发。所谓的启动页面,可简单理解为小程序运行后的第一个页面。

我们先把测试代码写好:

onPageNotFound: function () {    console.log("PageNotFound");}

我们的测试方法是:更改编译模式。

我们首先在开发者工具的上方找到编译设置,点击普通编译右侧的倒三角,如图。

b31bfe9763bf74eba07cb692b0ee0430.png

选择“添加编译模式”,修改里面的启动页面,将其中的页面修改成一个不存在的页面即可。大家可以自行测试。修改后编译,就会在console中输出“PageNotFound”的字符串了。

对于其他的找不到页面的情况,我们也可以去测试。例如在启动初始化时我们想要跳转到一个不存在的页面,这种情况下不触发onPageNotFound函数,我们可以在onLaunch函数中做出如下改动:

onLaunch: function () {    wx.navigateTo({      url: 'pages/123/123',    })}

我们在js文件和json文件中用wx.navigateTo实现导航功能,其效果与我们在wxml文件中写的

abc

相同。这里不进行详细介绍。

测试后我们会发现,这种情况下onPageNotFound不会被触发。

与应用生命周期相关的API

与应用生命周期相关的较主要的API有两种:

属性类型描述wx.getLaunchOptionsSync()Object获取小程序启动时的参数wx.getEnterOptionsSync()Object获取本次小程序启动时的参数

wx.getLaunchOptionsSync()

微信开放文档中的介绍:获取小程序启动时的参数,与App.onLaunch的回调参数一致。

我们先在onLaunch函数中写如下代码,以作测试:

onLaunch: function () {    console.log(wx.getLaunchOptionsSync());}

这段代码可以将wx.getLaunchOptionsSync()的返回值在console输出。运行后可以得到如下结果:

0ca2f311a824d9e510fc375d3f3933ef.png

这些都是onLaunch函数的回调参数,我们可以通过wx.getLaunchOptionsSync()来获取这些参数。

wx.getLaunchOptionsSync()的相关值和referredInfo的结构,以及返回有效referredInfo的场景,详见微信开放文档:

https://developers.weixin.qq.com/miniprogram/dev/api/base/app/life-cycle/wx.getLaunchOptionsSync.html

wx.getEnterOptionsSync()

微信开放文档中的介绍:获取本次小程序启动时的参数。如果当前是冷启动,则返回值与 App.onLaunch 的回调参数一致;如果当前是热启动,则返回值与 App.onShow 一致。

冷启动,可以理解为小程序第一次启动,需要进行初始化的启动,根据之前我们的学习可知,进行初始化后,小程序将执行App.onLaunch和App.onShow两个函数。此时的wx.getEnterOptionsSync()返回App.onLaunch的参数。

热启动,可以理解为已经热过身一般,已经运行过,即为从后台将小程序切到前台。根据之前我们的学习,此时小程序只执行App.onShow。那么wx.getEnterOptionsSync()返回App.onShow的参数。

onShow: function () {    console.log(wx.getEnterOptionsSync());}

大家可以通过上面的代码,分别对以下两种情况进行测试:

a.冷启动:编译后运行

b.热启动:切后台后返回小程序

观察两种情况的结果,与之前我们测试wx.getLaunchOptionsSync()所得到的结果相比对,大家可以自己尝试。

其他与应用生命周期有关的API

获取参数的应用级事件

属性对应的应用生命周期wx.onAppShowApp.onShowwx.onAppHideApp.onHidewx.onErrorApp.onErrorwx.onPageNotFoundApp.onPageNotFound

取消监听的应用级事件

属性取消监听wx.offAppShow小程序切前台事件wx.offAppHide取消监听小程序切后台事件wx.offError取消监听小程序错误事件wx.offPageNotFound小程序要打开的页面不存在事件

此处不对以上API做详细介绍。大家可以借鉴上文介绍的两个API的研究方法,来对这些API进行学习。

新书介绍

以下是本人3月份出版的新书,拜托多多关注!

744c9ae9fabf01bed749d211e3dadef8.png

本书利用Python 的标准GUI 工具包tkinter,通过可执行的示例对23 个设计模式逐个进行说明。这样一方面可以使读者了解真实的软件开发工作中每个设计模式的运用场景和想要解决的问题;另一方面通过对这些问题的解决过程进行说明,让读者明白在编写代码时如何判断使用设计模式的利弊,并合理运用设计模式。

对设计模式感兴趣而且希望随学随用的读者通过本书可以快速跨越从理解到运用的门槛;希望学习Python GUI 编程的读者可以将本书中的示例作为设计和开发的参考;使用Python 语言进行图像分析、数据处理工作的读者可以直接以本书中的示例为基础,迅速构建自己的系统架构。


觉得本文有帮助?请分享给更多人。

关注微信公众号【面向对象思考】轻松学习每一天!

面向对象开发,面向对象思考!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值