相信很多朋友在開發(fā)小程序的時(shí)候都會(huì)遇到小程序啟動(dòng)后臂拓，index頁(yè)面加載成功之后才獲取到openid厚脉，導(dǎo)致一些index頁(yè)面的post請(qǐng)求無(wú)法正常通訊，我這幾天也在想這個(gè)問題胶惰，并使用了一些解決方案：
第一種方案：引導(dǎo)頁(yè) + promise （方案來(lái)源于網(wǎng)絡(luò)）
1器仗、app.js中通過(guò)promise封裝一個(gè)異步獲取openid的方法。
2、新建load引導(dǎo)頁(yè)精钮，并在app.json中設(shè)置該頁(yè)面指定威鹿。
3、load.js 的onload鉤子中轨香，設(shè)置promise成功時(shí)忽你，頁(yè)面重定向到index。
4臂容、這樣便實(shí)現(xiàn)了先獲取openid 再攜帶openid跳轉(zhuǎn)科雳。
這篇文章在CSDN上被無(wú)限轉(zhuǎn)載，用過(guò)的朋友都說(shuō)解決方案很不錯(cuò)脓杉，但我發(fā)現(xiàn)了弊端糟秘。
如果沒有自己做tabbar組件而使用官方tabbar組件的話，load頁(yè)就不能指定球散，否則頁(yè)面會(huì)無(wú)法加載尿赚。
對(duì)于剛接觸小程序開發(fā)的朋友來(lái)說(shuō)，如果沒有vue之類的基礎(chǔ)蕉堰，寫一個(gè)component未免稍微復(fù)雜了一些凌净。
于是在經(jīng)過(guò)幾次嘗試之后，我找到了第二種自認(rèn)為比較不錯(cuò)的結(jié)局方案屋讶。
第二種方案：promise + if判斷
1冰寻、app.js中的promise不變。
2皿渗、因?yàn)閕ndex頁(yè)面加載后斩芭，會(huì)向服務(wù)器發(fā)送請(qǐng)求來(lái)獲取數(shù)據(jù)，所以我們把這些請(qǐng)求全都放到一個(gè)自定義函數(shù)中乐疆，比如fn()
3秒旋、index.js的onload中，做一個(gè)判斷诀拭，如果localstorage中有openid迁筛，則執(zhí)行this.fn() ，如果沒有耕挨，就執(zhí)行promise后细卧，再執(zhí)行fn()
相關(guān)代碼：
app.js
getToken() {
return new Promise((resolve, reject) => {
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
if (res.code) {
//發(fā)送res.code 到后臺(tái)
wx.request({
url: this.globalApi.checkUser,
method: 'POST',
data: {
code: res.code
},
success(res) {
//成功返回?cái)?shù)據(jù)后，將token值存儲(chǔ)到localStorage中
wx.setStorage({
key: 'yerlLocalToken',
data: res.data.token
});
wx.setStorage({
key: 'yerlUserOpenid',
data: res.data.openid,
})
var resArg = res.data.token;
resolve(resArg)
},
fail() {
reject();
}
})
}
}
})
})
}
index.js
onLoad() {
var that = this;
if (!wx.getStorageSync('yerlLocalToken') || wx.getStorageSync('yerlUserOpenid')){
app.getToken().then((resArg) => {
that.indexPage();
})
}else{
that.indexPage();
}
//獲取banner圖片
},indexPage(){
var that = this;
wx.request({
url: app.globalApi.getIndexBanners,
method: 'POST',
data: {
token: wx.getStorageSync('yerlLocalToken'),
openid: wx.getStorageSync('yerlUserOpenid')
},
success(res) {
//任何情況下筒占，只要返回的數(shù)據(jù)不包含content字段贪庙，則顯示默認(rèn)占位圖片
if (!res.data.content || res.data.status == 'error') {
that.setData({
bnrUrls: ['https://lg-rqwhkn0q-1255357964.cos.ap-shanghai.myqcloud.com/indexBannerError.jpg']
})
} else {
//將返回的圖片列表賦值給bnrUrls
that.setData({
bnrUrls: res.data.content
})
};
//如果返回值中包含token，就重設(shè)token
if (res.data.token) {
wx.setStorage({
key: 'yerlLocalToken',
data: res.data.token
});
}
}
});
}
到目前尚未發(fā)現(xiàn)問題翰苫，后續(xù)如果出現(xiàn)bug會(huì)再解決并更新文章止邮。
