项目需求:
拿到用户的头像和用户昵称用于显示,登录code换token用于绑定及后续获取个人相关信息。
进入点击某个按钮时如果没登录会直接弹出获取用户信息授权的弹窗,顺便wx.login获取code换token登录。
心路历程
记录下我的心路历程,说点废话
写这个授权一开始借用的我们公司一个大神后端写的这个授权页面,用的getUserInfo,都封装好了 在开发者工具 测试一切正常,在手机上用户昵称会显示“微信用户”,看文档才发现大神用的getUserInfo不行,接口更新了。后看uniapp文档改为用open-data直接获取用户名和头像,token用uni.login直接获取,测试发现还是同样问题, 后发现小程序回收了open-data组件,哈哈哈哈哈哈,为什么uniapp文档不同步啊,好吧因为没写过,自己摸索确实废了不少时间。
解决方案:
这个解决了我目前的需求,但我不知道这是不是最好的解决方案,文档看好几遍了,也不知道还有没有什么文档的注意点我没看到,就这样吧
/*
注意:小程序已经回收open-data组件
1.先调起授权弹窗,才能去wx.login获取code
2.getUserProfile()最新版获取用户信息的接口,此接口不需要在button上加open-type=“getUserInfo的属性,
此接口会调起弹窗,此接口返回code
最新:此接口作废,因为用来最新的getUserProfile()所以不需要再解密,其次本次版本不需要授权获取信息
*/
export const getUserProfile = (callback) => {
return new Promise((resolve, reject) => {
const app = this
wx.getUserProfile({
lang: 'zh_CN',
desc: '获取用户相关信息',
success(res) {
console.log('用户同意了授权')
uni.showLoading({
title: '加载中'
});
wx.login({
success: ress => {
let code = ress.code
let data = {
code: code,
}
//用code调接口获取token
login(data).then(resss => {
//拿到openid之后,再存储userInfo,防止login接口报错,用户那边体验不好
uni.setStorageSync('token', resss.data.data.accessToken)
uni.setStorageSync('userInfo', res.userInfo)
uni.hideLoading();
resolve(true)
}).catch(err => {
console.log(err)
uni.hideLoading();
reject(err)
})
}
})
},
fail() {
uni.clearStorageSync('userInfo')
uni.clearStorageSync('openId')
uni.hideLoading();
console.log('用户拒绝了授权')
}
})
})
}
修改于2022/4/15,