0%

微信小程序解决onLoad和onLaunch异步问题

问题描述

微信小程序中,app.js 中的 onLaunch 和 page 中的 onLoad 是异步执行的,不确定执行的先后顺序。假设,page 中的所有接口都需要带 openId 参数,一般都是小程序都是在 onLaunch 中获取 openId,之后在 onLoad 调用接口的时候传入 openId,因为 onLoad 和 onLaunch 是异步执行,则会出现在 onLoad 中使用的时候获取不到 openId 的尴尬场面。

解决方法

在 app.js 中定义一个全局方法,使用 Promise 来实现 onLaunch 执行完成之后,再在 onLoad 中执行

方法实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/**
* app.js
*/
App({
onLaunch() {},
// 所有页面统一调用,只需调用一次OpenId和Config
hasLoad() {
return new Promise((resolve, reject) => {
this.checkOpenId()
.then(() => {
resolve();
})
.catch(err => {
reject(err);
});
});
},
// 检查openId
checkOpenId() {
return new Promise((resolve, reject) => {
const openId = wx.getStorageSync("openId");
if (!openId) {
wx.login({
success: res => {
const params = {
appid: Config.appId,
code: res.code
};
// 此处调用接口获取openId
XXXXXXXAction.then(res => {
wx.setStorageSync("openId", res.openId);
this.globalData.openId = res.openId;
resolve();
}).catch(err => {
reject(err);
});
},
fail: err => {
reject(err);
}
});
} else {
this.globalData.openId = openId;
resolve();
}
});
},
globalData: {
openId: ""
}
});
1
2
3
4
5
6
7
8
9
10
11
12
/**
* Page
*/
Page({
data: {},
onLoad(opts) {
const app = getApp();
app.hasLoad().then(res => {
// 准备完成后,进行下一步操作
});
}
});