详解小程序如何改变onLoad的执行时机
也许在小程序所有生命周期里，我们用的最多的就是onLoad，一大堆代码都要在初始化的时候执行。
很多时候，初始化的代码是每个页面共用的，比如获取用户信息、获取定位等：
Page({
onLoad(){
this.userData=getUserData()
wx.getLocation({
type:'wgs84',
success(res){
//业务代码
//...
}
})
}
//...
})
久而久之，每个页面的js里都是如上的重复代码。如果可以先执行完通用的初始化代码，再执行每个页面各自的onLoad多好，可惜小程序并没有提供类似的钩子函数，那就自己来吧。
代理onLoad
按照前几篇的方法，可以代理原有的onLoad事件：
varoriginPage=Page
functionMyPage(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
functioninitial(callback){
this.userData=getUserData()
wx.getLocation({
type:'wgs84',
success(res){
callback()
}
})
}
//utils/wx.js
varinitial=require('./initial')
varoriginPage=Page
functionMyPage(config){
this.lifetimeBackup={
onLoad:config.onLoad
}
config.onLoad=function(options){
initial(()=>{
this.lifetimeBackup.onLoad.call(this,options)
})
}
//...
originPage(config)
}
也可以使用更多高级的方法抽离出去，比如eventbus之类的，就不多赘述。
看似很简单，但其实这样忽略了一个问题——生命周期顺序被打乱了！如果初始化方法里有异步代码，那首先执行的可能就是onShow，而不是约定的onLoad。
恢复生命周期顺序
为了保证生命周期函数能够按顺序执行，可以先临时清空生命周期函数，然后再依次执行，如下代码所示：
//utils/wx.js
constLIFETIME_EVENTS=['onLoad','onShow','onReady']
varinitial=require('./initial')
varoriginPage=Page
functionMyPage(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
constLIFETIME_EVENTS=['onLoad','onShow','onReady']
varinitial=require('./initial')
varoriginPage=Page
functionMyPage(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提示等。总之，可以自由控制了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。