小程序异步获取openid解决方案
相信很多朋友在开发小程序的时候都会遇到小程序启动后,index页面加载成功之后才获取到openid,导致一些index页面的post请求无法正常通讯,我这几天也在想这个问题,并使用了一些解决方案:
第一种方案:引导页 + promise (方案来源于网络)
1、app.js中通过promise封装一个异步获取openid的方法。
2、新建load引导页,并在app.json中设置该页面指定。
3、load.js 的onload钩子中,设置promise成功时,页面重定向到index。
4、这样便实现了先获取openid 再携带openid跳转。
这篇文章在CSDN上被无限转载,用过的朋友都说解决方案很不错,但我发现了弊端。
如果没有自己做tabbar组件而使用官方tabbar组件的话,load页就不能指定,否则页面会无法加载。
对于刚接触小程序开发的朋友来说,如果没有vue之类的基础,写一个component未免稍微复杂了一些。
于是在经过几次尝试之后,我找到了第二种自认为比较不错的结局方案。
第二种方案:promise + if判断
1、app.js中的promise不变。
2、因为index页面加载后,会向服务器发送请求来获取数据,所以我们把这些请求全都放到一个自定义函数中,比如fn()
3、index.js的onload中,做一个判断,如果localstorage中有openid,则执行this.fn() ,如果没有,就执行promise后,再执行fn()
相关代码:
app.js
getToken() { return new Promise((resolve, reject) => { // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId if (res.code) { //发送res.code 到后台 wx.request({ url: this.globalApi.checkUser, method: 'POST', data: { code: res.code }, success(res) { //成功返回数据后,将token值存储到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) { //任何情况下,只要返回的数据不包含content字段,则显示默认占位图片 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,就重设token if (res.data.token) { wx.setStorage({ key: 'yerlLocalToken', data: res.data.token }); } } }); }