uniapp微信小程序登陆流程（前端详细）

Love The Way You Lie 2023-10-09 14:33 85阅读 0赞

登陆逻辑先通过uni.getUserProfile()函数获取用户信息

![ca818d92333340f292de8d934948a0f1.png][]

然后将uni.login()放在uni.getUserProfile()成功回调里面获取code

![92256fbb7076471aa2537140486be589.png][]

最后在uni.login登陆成功的回调里面向后端发送 code encryptedData iv 等信息

后端通过encryptedData iv来得到用户的解密所有信息，然后返回给前端，前端把这个信息存储下来实现登陆

先看几遍官方文档

[小程序登录 | 微信开放文档][Link 1]

前端代码 大致是这样，可以自己改改

login() {
    				let that = this;
    				uni.getUserProfile({
    					desc: '用于完善用户资料',
    					lang: 'zh_CN',
    					success: (res) => {
    						console.log(res)
    						// that.wxlogin(res.userInfo);
    						uni.login({
    							success(codeData) {
    								console.log(codeData)
    								uni.showLoading({
    									title: '登录中'
    								});
    								uni.request({
    									url: myApi.loginUrl,
    									data: {
    										code: codeData.code,
    										encryptedData: res.encryptedData,
    										iv: res.iv,
    									},
    									method: 'GET',
    									success(login) {
    										uni.hideLoading();
    										console.log(login)
    										uni.showToast({
    											title: '登陆成功去看打印',
    											icon: 'none'
    										})
    									}
    								})
    							}
    						})
    					}
    				});
    			},

坑只能通过点击事件来调取，不能直接调取

![57b957f3842e428abdb604804e322912.png][]

无效调取

![d2ce4fa6dce34c60b2f525fcd8f14b1e.png][]

[ca818d92333340f292de8d934948a0f1.png]: https://img-blog.csdnimg.cn/ca818d92333340f292de8d934948a0f1.png
[92256fbb7076471aa2537140486be589.png]: https://img-blog.csdnimg.cn/92256fbb7076471aa2537140486be589.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
[57b957f3842e428abdb604804e322912.png]: https://img-blog.csdnimg.cn/57b957f3842e428abdb604804e322912.png
[d2ce4fa6dce34c60b2f525fcd8f14b1e.png]: https://img-blog.csdnimg.cn/d2ce4fa6dce34c60b2f525fcd8f14b1e.png