详解小程序如何改变onLoad的执行时机

前端之家收集整理的这篇文章主要介绍了详解小程序如何改变onLoad的执行时机前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。

很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:

  1. Page({
  2. onLoad() {
  3. this.userData = getUserData()
  4. wx.getLocation({
  5. type: 'wgs84',success (res) {
  6. // 业务代码
  7. // ...
  8. }
  9. })
  10. }
  11. // ...
  12. })

久而久之,每个页面的 js 里都是如上的重复代码。如果可以先执行完通用的初始化代码,再执行每个页面各自的 onLoad 多好,可惜小程序并没有提供类似的钩子函数,那就自己来吧。

代理 onLoad

按照前几篇的方法,可以代理原有的 onLoad 事件:

  1. var originPage = Page
  2.  
  3. function MyPage(config) {
  4. this.lifetimeBackup = {
  5. onLoad: config.onLoad
  6. }
  7. config.onLoad = function(options) {
  8. // 自定义代码
  9. // 公共的初始化代码
  10. this.userData = getUserData()
  11. wx.getLocation({
  12. type: 'wgs84',success (res) {
  13. // 执行 onLoad
  14. this.lifetimeBackup.onLoad.call(this,options)
  15. }
  16. })
  17. }
  18.  
  19. // ...
  20.  
  21. originPage(config)
  22. }

当然,实际开发过程中的初始化代码不可能这么少,可以用很多方式把它抽离出去,比如这样:

  1. // utils/initial.js
  2. function initial(callback) {
  3. this.userData = getUserData()
  4. wx.getLocation({
  5. type: 'wgs84',success (res) {
  6. callback()
  7. }
  8. })
  9. }
  10.  
  11. // utils/wx.js
  12. var initial = require('./initial')
  13. var originPage = Page
  14.  
  15. function MyPage(config) {
  16. this.lifetimeBackup = {
  17. onLoad: config.onLoad
  18. }
  19. config.onLoad = function(options) {
  20. initial(() => {
  21. this.lifetimeBackup.onLoad.call(this,options)
  22. })
  23. }
  24. // ...
  25. originPage(config)
  26. }

也可以使用更多高级的方法抽离出去,比如 event bus 之类的,就不多赘述。

看似很简单,但其实这样忽略了一个问题 —— 生命周期顺序被打乱了!如果初始化方法里有异步代码,那首先执行的可能就是 onShow ,而不是约定的 onLoad。

恢复生命周期顺序

为了保证生命周期函数能够按顺序执行,可以先临时清空生命周期函数,然后再依次执行,如下代码所示:

  1. // utils/wx.js
  2. const LIFETIME_EVENTS = ['onLoad','onShow','onReady']
  3. var initial = require('./initial')
  4. var originPage = Page
  5.  
  6. function MyPage(config) {
  7. LIFETIME_EVENTS.forEach((event) => {
  8. // 备份生命周期函数
  9. this.lifetimeBackup[event] = config[event]
  10. // 临时清空
  11. config[event] = function() {}
  12. })
  13. config.onLoad = function(options) {
  14. initial(() => {
  15. // 依次执行生命周期函数
  16. LIFETIME_EVENTS.forEach((event) => {
  17. this.lifetimeBackup[event].call(this,options)
  18. })
  19. })
  20. }
  21. // ...
  22. originPage(config)
  23. }

注意上述代码还是有问题的,当小程序业务跳走再返回或者切后台前台时,onShow 无法正常触发,因为被设置为空函数了。

为了保证 onShow 等生命周期函数的后续正常运行,需要在依次执行完生命周期函数后,再把它们恢复到 config 下,这是必不可少的。完整代码如下:

  1. // utils/wx.js
  2. const LIFETIME_EVENTS = ['onLoad',options)
  3. // 执行完后,恢复过来
  4. config[event] = this.lifetimeBackup[event]
  5. })
  6. })
  7. }
  8. // ...
  9. originPage(config)
  10. }

总结

代理了 onLoad 后,就可以手动控制其执行的时机,可以折腾的事情就多了很多。比如当初始化函数需要执行(请求)的内容比较多,耗时比较长时,可以统一给页面增加一些 loading 提示等。总之,可以自由控制了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的JavaScript相关文章