关闭

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

时间: 2019-09-24阅读: 717标签: 小程序

也许在小程序所有生命周期里,我们用的最多的就是 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 提示等。总之,可以自由控制了。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6122

关闭

web view内嵌的h5页面与小程序直接相互跳转的实现

在小程序中使用web-view组件嵌套的H5页面,如何实现和小程序页面之间的相互跳转呢?下面就简单介绍下如何实现的,希望能帮助到您

小程序跨页面交互的作用与方法

微信小程序的分包大小已经到达了 12M 大小,一方面说明小程序的确逐步为开发者放开更大的权限,另一方面也说明了对于某些小程序 8M 的大小已经不够用了

个人小程序应用开发指南

小程序依附于各大平台,支付宝、微信、头条、百度等小程序,都是在平台上进行开发,平台提供对应的技术支持和用户环境。对于个人开发者,这个还是蛮方便的,它本身带有流量属性,易于传播。

探索小程序实现

随着小程序的发展与功能的逐步完善,越来越多的产品需要小程序与 APP 的功能能有一些共性,社区跨平台的解决方案越来越多,比如 taro 等为代表的把一套代码编译成多端运行的机制

小程序websocket心跳库——websocket-heartbeat-miniprogram

在16年的时候因为项目接触到websocket,而后对心跳重连做了一次总结,写了篇博客,而后18年对之前github上的demo代码进行了再次开发和开源,最终封装成库。如下:在2020年也就是今年初,同事建议说可以考虑兼容一下小程序,心想也挺好的。

小程序自定义tabbar占位问题

针对于小程序中自定义tabbar问题,有多种自定义方式。其中之一就是需要将原先系统自带的tabbar隐藏,调用,就是在小程序底部原先放置tabbar的内容会出现空白,仍然会出现占位问题。

小程序插件怎么玩?有赞和千万级用户的“群里有事”做了一次示范

小程序插件让大的公司赋能外部开发者变得非常方便,极大降低了中小开发者开发丰富的小程序应用的门槛,未来的发展是很值得期待的。尤其是国庆节前夕,微信公布的关于小程序跳小程序的新政策,极大地限制了不同主体之间小程序互跳的自由度

微信小程序遇到的坑

微信小程序开发之路上遇到的那些坑,微信小程序开发常见之坑总结,在开发过程中碰到的问题和解决:小程序textarea组件字数限制问题 、scroll-view 中不能使用 textarea 组件 、input组件的问题、关于数据绑定的问题、关于生命周期的问题、关于picker组件

微信小程序跳转小程序

以前小程序跳小程序直接通过api调用跳转即可,但在2018.11.1下午微信公众平台通知需做navigateToMiniProgramAppIdList配置,否则无法提交审核,配置要跳转的微信小程序id ,最多不能超过10个。

小程序开发实践总结

从微信发布小程序以来,各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。前前后后也开发了四五个小程序了。总觉得要留下点什么,既是记录那些年我们踩过的坑,也是希望大家别再掉坑。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!