【uniapp基础篇】实现微信登录

---

一、今日实战目标

• 实现APP端微信登录
• 实现小程序端授权微信登录

---

二、实战步骤

1. 实现APP端微信登录

代码如下（示例）：

// 定义多类型登录的function
other_login(loginRes, infoRes, type) {
		let _this = this;
		let url;
		let infos = {};
				// _this.loginRes=JSON.stringify(loginRes).toString();
				// _this.infoRes=JSON.stringify(infoRes).toString();
		switch (type) {
			case 'wx':
				url = '/token/sys/login-wechat';
				infos = {
					openid: loginRes.authResult.openid,
					nickname: infoRes.userInfo.nickName,
					sex: infoRes.userInfo.gender,
					headimgurl: infoRes.userInfo.avatarUrl,
					refreshToken: loginRes.authResult.refresh_token
				}
				break;
				default:
		}
		console.log(infos)
				
		// 这里的infos就是用户相关的信息，下一步就应该是用这些数据向后端发去请求，再返回相应的数据
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//APP端授权微信登录

login_weixin() {
				if (!this.agree) {
					uni.showToast({
						title: "请先阅读并同意相关协议",
						icon: "none"
					})
					return
				}
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {

						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
							// 调用上方定义的的other_login方法
								_this.other_login(loginRes, infoRes, 'wx');
							}
						});
					}
				});
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3. 微信小程序端授权微信登录

uniapp编译到微信小程序端，用户授权登录的操作比较简单，见下方代码：

// 微信小程序登录
			wxGetUserInfo() {
				var that = this
				// 我个人用node.js写的后端，一定要先拿到登录的凭证，一起传给后台
				wx.login({
					success: function(r) {
						console.log(r.code) //登录凭证
					}
				})
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写用途
					success: (res) => {
						console.log(res)
						var arr = res
						// 下一步就是用拿到的用户数据向后端发起请求，返回你想要的数据
						that.push(arr)
					}
				})
			},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

总结

uniapp适配多端登录的文档内容有点多，本文章只讲具体实现的代码，想了解更多关于登录的可以移步官方文档-关于登录，进行阅读了解

讲讲个人在使用后，觉得应该注意的几个点：

1. 普通浏览器上如果想实现微信登录，并非开放API，需要向微信申请相应的权限，比如微信扫码登录功能，可能需要注册认证微信开放平台账号.
2. 微信内嵌浏览器运行H5版时，可通过js sdk实现微信登录，需要引入一个单独的js,点击访问文件链接
3. 如果要对接除了微信以外的平台，建议移步官方详细文件，本文章暂不讲解。