1. First figure out the relationship between the life cycle of the WeChat applet and the life cycle of the page
The life cycle of a WeChat Mini Program includes the App life cycle and the page life cycle. The App life cycle refers to the entire process from startup to exit of the applet, while the page life cycle refers to the process from creation to destruction of each page in the applet.
In the applet, when the user opens the applet, the onLaunch life cycle function of the App will be triggered, indicating that the applet has been launched. Subsequently, the user can open different pages in the applet, and each page has its own life cycle.
When the user opens a page, the onLoad function of the page is triggered, indicating that the page has been created. Then, the onShow function will be triggered in turn, indicating that the page has been displayed, and the onReady function, indicating that the page is ready. At this point, the page is active and the user can interact. When the user leaves the current page, the onHide function will be triggered in turn, indicating that the page has been hidden and is no longer active. If the user returns to the page again, the onShow function and the onReady function will be triggered in turn to reactivate the page. When the user closes the applet, the app's onHide function and onUnload function will be triggered, indicating that the applet has been hidden or destroyed.
Therefore, it can be seen that the page life cycle of the Mini Program is nested in the App life cycle, and the page life cycle will be affected by the App life cycle.
2. If user information is requested in the onLaunch life cycle function and used in the onShow function of the page, but onShow is executed before onLaunch, user information may not be obtained when the page is used, which can be solved in the following two ways:
1. Use event-driven to define an event in the App. When the user information is obtained, the event is triggered, and then the event is monitored in the onShow function of the page, and the user information is obtained after the event is triggered.
// 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. Use Promise to encapsulate the operation of obtaining user information into a Promise, then call the Promise in the onLaunch lifecycle function, and store the user information in global variables or local storage after the operation is completed. In the onShow function of the page, user information can be obtained through the then method of Promise.
// 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);
});
}
});