脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序 改变onLoad的执行时机

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

 更新时间：2019年11月01日 14:24:49   作者：binnng  
这篇文章主要介绍了详解小程序如何改变onLoad的执行时机，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

您可能感兴趣的文章:

相关文章

  • 通过js控制时间,一秒一秒自己动的实例

    通过js控制时间,一秒一秒自己动的实例

    下面小编就为大家带来一篇通过js控制时间,一秒一秒自己动的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • HTML中事件触发列表与解说

    HTML中事件触发列表与解说

    HTML中事件触发列表与解说...
    2007-07-07
  • JSDoc 介绍使用规范JsDoc的使用介绍

    JSDoc 介绍使用规范JsDoc的使用介绍

    JsDoc Toolkit 是一个把js描述格式化成文档的工具。开发者只需按JsDoc的规范写好注释就可以很方便导出文档。它是google 推荐的 JsDoc生成工具。
    2011-02-02
  • 2种简单的js倒计时方式

    2种简单的js倒计时方式

    这篇文章主要为大家详细介绍了2个简单js倒计时方式，一是带天数的倒计时，二是单纯分钟和秒倒计时，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • js省市联动效果完整实例代码

    js省市联动效果完整实例代码

    这篇文章主要介绍了js省市联动效果完整实例代码,涉及JavaScript数组的定义与遍历技巧,代码非常具有实用价值,需要的朋友可以参考下
    2015-12-12
  • iframe父子页面实现共用滚动条的常见方法

    iframe父子页面实现共用滚动条的常见方法

    在开发过程中,有时候需要用到iframe复用不同域名下的页面内容,为了提供连贯的用户体验,经常需要在主页面（父页面）和iframe子页面之间共享滚动位置,本文将介绍其中较为常见的一种方法来实现iframe父子页面共用滚动条,需要的朋友可以参考下
    2024-05-05
  • JS实现返回上一页并刷新页面的方法分析

    JS实现返回上一页并刷新页面的方法分析

    这篇文章主要介绍了JS实现返回上一页并刷新页面的方法,结合实例形式分析了javascript针对移动端、PC端浏览器的页面缓存刷新相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • javascript框架设计之种子模块

    javascript框架设计之种子模块

    本文给大家介绍的是司徒正美的javascript框架设计的第二章种子模块的相关内容，算是一个小小的读后感，小伙伴们可以参考下。
    2015-06-06
  • 原生JavaScript实现网页版计算器

    原生JavaScript实现网页版计算器

    这篇文章主要为大家详细介绍了原生JavaScript实现网页版计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 详解webpack+ES6+Sass搭建多页面应用

    详解webpack+ES6+Sass搭建多页面应用

    这篇文章主要介绍了webpack+ES6+Sass搭建多页面应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论