前言:一般我们会在用户首次进入时(任何页面)执行一次操作获取用户数据,所以onLaunch是我们很好的选择
onLaunch和页面的onLoad是异步操作,就会存在用户数据还没有获取到,页面的onLoad就执行完了,导致onLoad拿不到用户数据
所以这里我采用的方法是定义回调函数
在page页面判断一下当前app.globalData.employ是否有值,如果没有,说明是第一次调用,则定义一个(回调函数)
app.employCallback = employ =>{ ...}
App页面在请求success后判断时候有Page页面定义的回调方法,如果有就执行该方法。
//app.js
App({
globalData: {
employ: '',
userInfo: null,
},
onLaunch: function () {
let userInfo = wx.getStorageSync('userInfo') || null,
that = this;
// 更新userInfo
wx.request({
url: '你的地址',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json',
},
method: 'POST',
data: {},
success: function (res) {
if (res.data.status == 0) {
let obj = res.data.data;
that.globalData.userInfo = obj;
wx.setStorageSync('userInfo', userInfo)
} else {
wx.setStorageSync('userInfo', null);
};
that.globalData.employ = true;
/* 由于这里是网络请求,可能会在 Page.onLoad 之后才返回 在onLoad中定义下app.employCallback 后才执行下述that.employCallback(true),此时用户数据肯定得到了,回调内再则可获取到用户数据
* 所以此处加入 callback 以防止这种情况 */
if (that.employCallback) {
that.employCallback(true);
}
},
});
},
})
在首页里
//sequence.js
const app = getApp()
Page({
data: {
userInfo:null,
},
onLoad: function () {
let that = this;
if (app.globalData.employ && app.globalData.employ != '') {
console.log("first")
let userInfo = app.globalData.userInfo;
that.setData({
userInfo: userInfo ? userInfo : null
});
} else {
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.employCallback = employ => {
if (employ != '') {
that.setData({
userInfo: app.globalData.userInfo
});
}
}
}
}
})
这样就可以实现我们想要的顺序:
[App] onLaunch => [Page] onLoad => [App] onLaunch sucess callback
方法二:设置自定义钩子
//app.js
//globalData提出来声明
let globalData = {
// 是否已拿到token
token: '',
// 用户信息
userInfo: {
userId: '',
head: ''
}
}
//注册自定义钩子
import CustomHook from 'spa-custom-hooks';
CustomHook.install({
'Login':{
name:'Login',
watchKey: 'token',
onUpdate(token){
//有token则触发此钩子
return !!token;
}
},
'User':{
name:'User',
watchKey: 'userInfo',
onUpdate(user){
//获取到userinfo里的userId则触发此钩子
return !!user.userId;
}
}
}, globalData)
// 正常走初始化逻辑
App({
globalData,
onLaunch() {
//发起异步登录拿token
login((token)=>{
this.globalData.token = token
//使用token拿用户信息
getUser((user)=>{
this.globalData.user = user
})
})
}
})
//关键点来了
//Page.js,业务页面使用
Page({
onLoadLogin() {
//拿到token啦,可以使用token发起请求了
const token = getApp().globalData.token
},
onLoadUser() {
//拿到用户信息啦
const userInfo = getApp().globalData.userInfo
}
})