微信小程序(1) —— 获取用户信息

小程序一个比较重要的能力就是获取用户信息,是使用 wx.getUserInfo 接口。我们发现几乎所有的小程序都会调用这个接口。

实现思路:

  1. 通过wx.login获取code,把code传给后台,后台再去访问微信接口获取到用户的openID和sessionKey,但是后台不能直接把openID或者sessionKey发给前台(不安全),而是需要用一个单独的字段与openID和sessionKey做关联后传给前台,作为前台登录成功的标识,就相当于cookie在本地浏览器存储的session一样,前台接收到返回的标识存储在本地,也可以自己设置存储的变量名(假如是userId)
  2. 前端通过button按钮触发 getPhoneNumber事件,用户允许授权后(e.detail.errMsg == ‘getPhoneNumber:ok’)获取encryptedData,iv
  3. 把【encryptedData】 、【iv】 、【userId】 通过request请求传给后台,后台接收到解密获取用户手机号,返回给前台,前台再存储在本地,以便做其他逻辑判断或者后期使用

我这里的代码是uni-app项目的代码,代码跟微信小程序代码一样,只不过前缀不同,我的是uni.小伙伴在写微信小程序的需要复制我的代码测试时候记得把前缀换成wx.

<button class='bottom' type='primary' open-type="getUserInfo" @getuserinfo="wxGetUserInfo">授权登录</button>

点击授权,弹出选择框。点击允许成功获取用户信息之后会跳转到项目首页。

在这里插入图片描述

//获取用户信息
wxGetUserInfo() {
	uni.login({
		success: res => {
			var code = res.code;
			console.log(code);
			uni.getUserInfo({
				success: res => {
					console.log(res);
						uni.request({
							url: 'https://exam.qhynice.top/index.php/Api/Login/getsessionkey',
							method: 'POST',
							data: {
								code: code
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							success: ress => {
								console.log(ress.data);
								// 通过微信自带code,向后台获取openID、session_key
								uni.setStorageSync('openid', ress.data.openid);
								uni.setStorageSync('session_key', ress.data.session_key);
								//通过上个获取的openID,再进行获取用户id和用户的其他信息
								uni.request({
									url: 'https://exam.qhynice.top/index.php/Api/Login/authlogin',
									method: 'POST',
									data: {
										openid: uni.getStorageSync('openid'),
										NickName: res.userInfo.nickName,
										HeadUrl: res.userInfo.avatarUrl,
										gender: res.userInfo.gender
									},
									header: {
										'content-type': 'application/x-www-form-urlencoded'
									},
									success: res => {
										// 获取用户ID
										var id = res.data.arr.ID;
										uni.setStorageSync('id', id);
										uni.switchTab({
											url: '../index/index'
										});
									}
								});
							}
						});
					}
				});
			}
		});
	}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值