微信小程序(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'
										});
									}
								});
							}
						});
					}
				});
			}
		});
	}
好的,我会尽力回答你的问题。首先,获取用户位置需要在小程序中使用微信提供的API,具体步骤如下: 1. 引入API ``` // 在页面的JS文件中引入API const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); ``` 2. 初始化API ``` // 在页面的JS文件中初始化API const qqmapsdk = new QQMapWX({ key: '你的腾讯地图开发者密钥' }); ``` 3. 获取用户位置 ``` // 在页面的JS文件中获取用户位置 wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude; const longitude = res.longitude; qqmapsdk.reverseGeocoder({ location: { latitude, longitude }, success(res) { console.log(res); } }); }, fail(res) { console.log(res); } }); ``` 接下来是异常流处理的完整示例: ``` // 在页面的JS文件中引入API const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); // 在页面的JS文件中初始化API const qqmapsdk = new QQMapWX({ key: '你的腾讯地图开发者密钥' }); // 在页面的JS文件中获取用户位置 wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude; const longitude = res.longitude; qqmapsdk.reverseGeocoder({ location: { latitude, longitude }, success(res) { console.log(res); }, fail(res) { console.log(res); wx.showToast({ title: '获取位置失败', icon: 'none' }); } }); }, fail(res) { console.log(res); wx.showModal({ title: '提示', content: '获取位置失败,请检查是否开启定位权限', showCancel: false, confirmText: '知道了' }); } }); ``` 在这个示例中,我们通过`wx.getLocation`方法获取用户位置,并且使用`qqmapsdk.reverseGeocoder`方法将经纬度转换为详细地址信息。如果获取位置或转换地址信息失败,我们会使用`wx.showToast`或`wx.showModal`方法提醒用户。这就是异常流处理的完整示例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值