详解小程序如何改变onLoad的执行时机
2019-11-01 18:06
1021 查看
也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。
很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:
Page({ onLoad() { this.userData = getUserData() wx.getLocation({ type: 'wgs84', success (res) { // 业务代码 // ... } }) } // ... })
久而久之,每个页面的 js 里都是如上的重复代码。如果可以先执行完通用的初始化代码,再执行每个页面各自的 onLoad 多好,可惜小程序并没有提供类似的钩子函数,那就自己来吧。
代理 onLoad
按照前几篇的方法,可以代理原有的 onLoad 事件:
var originPage = Page function MyPage(config) { this.lifetimeBackup = { onLoad: config.onLoad } config.onLoad = function(options) { // 自定义代码 // 公共的初始化代码 this.userData = getUserData() wx.getLocation({ type: 'wgs84', success (res) { // 执行 onLoad this.lifetimeBackup.onLoad.call(this, options) } }) } // ... originPage(config) }
当然,实际开发过程中的初始化代码不可能这么少,可以用很多方式把它抽离出去,比如这样:
// utils/initial.js function initial(callback) { this.userData = getUserData() wx.getLocation({ type: 'wgs84', success (res) { callback() } }) } // utils/wx.js var initial = require('./initial') var originPage = Page function MyPage(config) { this.lifetimeBackup = { onLoad: config.onLoad } config.onLoad = function(options) { initial(() => { this.lifetimeBackup.onLoad.call(this, options) }) } // ... originPage(config) }
也可以使用更多高级的方法抽离出去,比如 event bus 之类的,就不多赘述。
看似很简单,但其实这样忽略了一个问题 ―― 生命周期顺序被打乱了!如果初始化方法里有异步代码,那首先执行的可能就是 onShow ,而不是约定的 onLoad。
恢复生命周期顺序
为了保证生命周期函数能够按顺序执行,可以先临时清空生命周期函数,然后再依次执行,如下代码所示:
// utils/wx.js const LIFETIME_EVENTS = ['onLoad', 'onShow', 'onReady'] var initial = require('./initial') var originPage = Page function MyPage(config) { LIFETIME_EVENTS.forEach((event) => { // 备份生命周期函数 this.lifetimeBackup[event] = config[event] // 临时清空 config[event] = function() {} }) config.onLoad = function(options) { initial(() => { // 依次执行生命周期函数 LIFETIME_EVENTS.forEach((event) => { this.lifetimeBackup[event].call(this, options) }) }) } // ... originPage(config) }
注意上述代码还是有问题的,当小程序业务跳走再返回或者切后台到前台时,onShow 无法正常触发,因为被设置为空函数了。
为了保证 onShow 等生命周期函数的后续正常运行,需要在依次执行完生命周期函数后,再把它们恢复到 config 下,这是必不可少的。完整代码如下:
// utils/wx.js const LIFETIME_EVENTS = ['onLoad', 'onShow', 'onReady'] var initial = require('./initial') var originPage = Page function MyPage(config) { LIFETIME_EVENTS.forEach((event) => { // 备份生命周期函数 this.lifetimeBackup[event] = config[event] // 临时清空 config[event] = function() {} }) config.onLoad = function(options) { initial(() => { // 依次执行生命周期函数 LIFETIME_EVENTS.forEach((event) => { this.lifetimeBackup[event].call(this, options) // 执行完后,恢复过来 config[event] = this.lifetimeBackup[event] }) }) } // ... originPage(config) }
总结
代理了 onLoad 后,就可以手动控制其执行的时机,可以折腾的事情就多了很多。比如当初始化函数需要执行(请求)的内容比较多,耗时比较长时,可以统一给页面增加一些 loading 提示等。总之,可以自由控制了。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- nice命令_Linux nice 命令用法详解:改变程序执行的优先权等级
- VC6生成的串口执行程序如何在其它电脑上运行
- 程序执行的一些漏洞,错误如何避免?
- 如何执行java程序
- 程序是如何被计算机所执行的?
- 上篇文章补充,Inno Setup 编译器打包程序时如何不改变文件夹内容
- 转载:C程序中如何获取命令执行的结果
- (4)用记事本写Java程序HelloWorld,以及用控制台如何执行程序
- 微信小程序,如何在返回前一个页面时,执行前一个页面的方法
- 如何实现点击Winform程序窗体中的一个按钮,执行这个exe文件?
- iOS 程序退到后台,如何继续执行任务
- 【SpringMvc】的入门程序和执行过程详解
- linux内核分析第七周-Linux内核如何装载和启动一个可执行程序
- C#如何定时执行程序(例如每天晚上12:00)
- js 程序执行与顺序实现详解
- Android 软件开发之如何使用Eclipse Debug调试程序详解
- Oracle技术之如何使用ordered提示改变SQL执行计划
- 6.Linux内核如何装载和启动一个可执行程序
- c语言中如何添加计时函数,统计程序执行的时间
- 在服务器上 .netFramework2.0 环境下,如何能在不改变服务器设置下,让站点能够运行 AJAX 程序