1.先搞清微信小程序的生命周期和页面生命周期的关系
微信小程序的生命周期包括App生命周期和页面生命周期。App生命周期指的是小程序从启动到退出的整个过程,而页面生命周期则是指小程序中每个页面从创建到销毁的过程。
在小程序中,当用户打开小程序时,会触发App的onLaunch生命周期函数,表示小程序已经被启动。随后,用户可以在小程序中打开不同的页面,每个页面都有自己的生命周期。
当用户打开一个页面时,会触发该页面的onLoad函数,表示页面已经被创建。接着,会依次触发onShow函数,表示页面已经显示出来,onReady函数,表示页面已经准备好了。此时,页面处于活动状态,用户可以进行交互操作。 当用户离开当前页面时,会依次触发onHide函数,表示页面已经被隐藏起来,不再处于活动状态。如果用户再次返回到该页面,会再次依次触发onShow函数和onReady函数,重新激活该页面。当用户关闭小程序时,会触发App的onHide函数和onUnload函数,表示小程序已经被隐藏或销毁。
因此,可以看出,小程序的页面生命周期是嵌套在App生命周期之中的,页面的生命周期会受到App生命周期的影响。
2.如果在onLaunch生命周期函数中请求用户信息,在页面的onShow函数中使用,但是onShow先于onLaunch执行,可能会导致页面使用时用户信息还未获取到,可以通过以下两种方式解决:
1.使用事件驱动 可以在App中定义一个事件,当获取用户信息完成后,触发该事件,然后在页面的onShow函数中监听该事件,等待事件触发后再获取用户信息。
// app.js
App({
onLaunch: function () {
// 获取用户信息
wx.getUserInfo({
success: res => {
// 将用户信息存储到全局变量中
this.globalData.userInfo = res.userInfo;
// 触发事件
this.triggerEvent('userInfoReady', res.userInfo);
}
});
},
globalData: {
userInfo: null
}
})
// index.js
Page({
onShow: function () {
// 监听事件
getApp().on('userInfoReady', (userInfo) => {
// 在获取到用户信息后,可以在onShow函数中使用
console.log(userInfo);
});
}
});
2.使用Promise 可以将获取用户信息的操作封装成一个Promise,然后在onLaunch生命周期函数中调用该Promise,等待操作完成后再将用户信息存储到全局变量或者本地存储中。在页面的onShow函数中,可以通过Promise的then方法来获取用户信息。
// app.js
App({
onLaunch: function () {
return new Promise((resolve, reject) => {
// 获取用户信息
wx.getUserInfo({
success: res => {
// 将用户信息存储到全局变量中
this.globalData.userInfo = res.userInfo;
resolve();
},
fail: err => {
reject(err);
}
});
});
},
globalData: {
userInfo: null
}
})
// index.js
Page({
onShow: function () {
getApp().onLaunch().then(() => {
// 在onLaunch生命周期函数中获取到用户信息后,可以在onShow函数中使用
const userInfo = getApp().globalData.userInfo;
console.log(userInfo);
});
}
});