本文详解如何在小程序中通过代理Page来改变onLoad的执行时机，实现通用初始化代码（如获取用户信息、定位）优先于页面逻辑执行。针对异步操作导致生命周期顺序错乱的问题，提供了备份与恢复生命周期函数的完整方案，确保onShow等后续钩子正常触发。
小程序 onLoad 执行时机与通用初始化需求
在小程序的各种生命周期钩子中，onLoad 无疑是最常被使用的，大量的初始化逻辑往往都集中在这里执行。
通常情况下，一些通用的初始化操作是多个页面共用的，例如获取用户基本信息或获取地理位置等。
Page({
onLoad() {
this.userData = getUserData()
wx.getLocation({
type: 'wgs84',
success (res) {
// 业务代码
// ...
}
})
}
// ...
})
随着项目发展，每个页面的 JavaScript 文件中都会充斥着类似的重复代码。如果能在执行页面特定的 onLoad 之前，先统一执行完这些通用的初始化逻辑，将会极大提升开发效率。遗憾的是，小程序原生并未提供此类钩子，因此我们需要自行实现。
通过代理 Page 改变 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 提示以提升用户体验。总之，这种机制让我们能够更灵活地控制页面初始化流程。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。