uniapp写微信小程序授权登录最新

项目需求:

拿到用户的头像和用户昵称用于显示,登录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,

  • 5
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值