页面加载后仍未获取到openId和userInfo问题解决
记得上次接小程序的项目已经是去年10月份了，隔了大半年，再次捡起来，这感觉，跟当初刚刚写的时候差不多。
先放个官方链接：https://developers.weixin.qq.com/miniprogram/dev/
参考文章
微信小程序实现watch属性监听数据变化 https://blog.csdn.net/xuyangxinlei/article/details/81408200
1.页面加载后仍未获取到openId
原因：app.js里的onLaunch（异步）方法调用得到数据的速度比页面Page中的onLoad慢，导致在加载index.wxml时openid总是为空
解决办法：采用Promise
app.js
App({
onLaunch: function () {
let that = this;
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
if (wx.getStorageSync('openid')){
this.getOpenid()
}
// 获取用户信息
wx.getSetting({
......
})
},
// getOpenid
getOpenid: function () {
var that = this;
return new Promise(function (resolve, reject) {
wx.login({
success: function (res) {
//code 获取用户信息的凭证
if (res.code) {
//请求获取用户openid
wx.request({
url: "", //请求接口
data: {
"code": res.code
},
method: 'GET',
header: {
'Content-type': 'application/json'
},
success: function (res) {
wx.setStorageSync('openid', res.data.data.openid);//存储openid
var res = {
status: 200,
data: res.data.openid
}
resolve(res);
}
});
} else {
console.log('失败' + res)
}
}
})
});
},
})
index.wxml的onLoad方法
//获取openid
app.getOpenid().then(function (res) {
if (res.status == 200) {
that.setData({
openId: wx.getStorageSync('openid')
})
} else {
console.log(res.data);
}
});
2.userInfo获取慢
原因：跟上一个问题差不多
解决办法：监听userInfo值的变化，获取到后再调用需要userInfo作为参数的请求
watch.js文件获取地址:https://github.com/xyxl1997/watch
index.js
import watch from '../../utils/watch.js'
Page({
onLoad: function (options) {
//监听设置
watch.setWatcher(this, that.getPageUserInfo());
},
watch:{
userInfo:function(newV){
//注意，此处不要做赋值操作，否则会一直赋值下去，原因可以看上面的参考链接
console.log(newV)
//当userInfo有值时请求接口
this.getPageUserInfo(newV)
}
}
})
3.认证后跳到tabbar页面
情形：
login.wxml小程序认证页，获取用户授权
index.wxml(tabbar)小程序首页
登陆小程序时，已授权用户默认到index页面，否则重定向到login页面，判断在app.js文件onLaunch中
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
//要获取信息的用户的 openId 数组，如果要获取当前用户信息，则将数组中的一个元素设为 'selfOpenId'
openIdList: ['selfOpenId',that.globalData.openId],
lang: 'zh_CN',
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
},
fail:res => {
console.log('fail---',res)
}
})
}else{
// 没有授权，重定向到 loading 启动页
wx.navigateTo({
url: '/pages/accredit/accredit',
})
}
},
问题：当在认证页面中点击授权后，跳转到index页面时，无法进入到onLoad中（之前问题已经说过，openid，userInfo都要在onLoad中才能得到），而onShow中放入watch.setWatcher(this, that.getPageUserInfo())没有效果，而且，即使能获取到，也需要手动刷新一下，否则值都为空
解决办法：不用wx.switchTab，使用wx.reLaunch(关闭应用内所有页面，打开指定页面)，因为wx.reLaunch可以携带参数
login.js
const app = getApp()
Page({
data:{
option:'',
},
onLoad:function(){
// 在没有 open-type=getUserInfo 版本的兼容处理
if (!this.data.canIUse) {
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
}
})
}
},
/**
* 获取用户信息接口后的处理逻辑
*/
getUserInfo: function (e) {
// console.log(e)
// 将获取的用户信息赋值给全局 userInfo 变量，再跳回之前页
if (e.detail.userInfo) {
app.globalData.userInfo = e.detail.userInfo
wx.reLaunch({
url: '../index/index?id=1&accredit=1',
success: function (e) {
let page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
})
}else{
console.log('没授权')
this.onLoad();
}
},
})
index.js
onLoad: function (options) {
console.log('拿到login传过来的参数--',options);
if (options.accredit){
//如果有accredit这个参数，就重新调用一遍onLoad方法，实现页面自刷新，拿到userInfo
this.onLoad(options.id)
}
},
以上问题获取还有更好的办法的解决，勿喷，感谢。
