uni 获取微信小程序用户手机号

老样子，先看效果图

 

这是最后调接口成功后返回的数据

首先，大家要清楚获取手机号的大致流程：

1.要登陆，通过wx.login() 获取到返回的code

2.再拿着这个code和appid以及secret(密钥)这三个参数请求微信官方的接口（"https://api.weixin.qq.com/sns/jscode2session?appid=" + appid +
    "&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code"    下边会在api.js文件提到）获取到这个接口返回的sessionkey和openid（这个sessionkey和openid就是最后一步获取手机号时候传给后台的参数之二）

做到这里 就可以获取手机号了 另外要知道的是button按钮需要绑定上 open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"

通过这样的button按钮能够获取到encryptedData和iv 这两个也是获取手机号传给后台的参数 一共传给后台的是四个参数

========================================================================================================================================================

下边具体介绍一下代码实现

templete

<button class='bottom' type='primary' open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			手机号授权
		</button>

js

先将封装好的api引入进来 

大家引入的时候注意自己的路径 给大家看下我的目录结构 

data数据

appid和密钥需要你们自己获取哦 登陆微信公众平平台可以看到

js：

async init() {
				var code = await wxlogin()  //登陆成功后返回的code
				// 获取sessionkey
				var key = await htxcx(this.appid, this.secret, code) //（基于登陆成功后获取的sessionkey）
				this.phoneParams.sessionkey = key.data.session_key;
                this.phoneParams.openid = key.data.openid;
				console.log(code,key,55555)
			},
			async getPhoneNumber(e) {
				console.log(e,"shouji:")
				this.phoneParams.encrypdata = e.detail.encryptedData   //!!!!!!!!!!!!!!提示该appid没有权限是因为微信没有认证
				this.phoneParams.ivdata = e.detail.iv
				var phone = await getPhone(this.phoneParams)  
				console.log(phone,123222)
				
				 if (this.phone) {
				 	this.phoneStatus = true
				 	this.reLaunch()
				 }
			},
			async wxGetUserInfo() {
				var info = await wxUserInfo()
				this.loginStatus = true
				this.reLaunch()
			},
			reLaunch() {
				if (this.loginStatus && this.phoneStatus) {
					uni.setStorageSync("tongfang-phone", this.phone)
					// uni.reLaunch({//信息更新成功后跳转到小程序首页
					// 	url: '/pages/index/index'
					// });
				}
			},

到这里获取手机号页面的代码就结束了

下边是引入的api的相关文件

api.js

export function uniAjax(url, params, method) {
	var method = method || "GET"
	// 处理特殊字符
	return new Promise((resolve, reject) => {
		try {
			uni.request({
				url: url,
				data: params,
				method: method,
				success: (res) => {
					resolve(res)
				},
				fail: (fail) => {
					reject(fail)
				},
				complete: (res) => {
					// console.log("complete:",res)
				},
			})
		} catch (e) {
			reject(e)
		}

	})
}
// 接口获取 sessionkey
export const htxcx = (appid, secret, code) => uniAjax("https://api.weixin.qq.com/sns/jscode2session?appid=" + appid +
	"&secret=" + secret + "&js_code=" + code + "&grant_type=authorization_code")

// 解密手机号
export const getPhone = (obj) => uniAjax("你们后台的接口地址", obj, "POST")

wxlogin.js

import {getPhone as getphone} from './api.js'
/*
微信登录
	返回 code
*/
export const wxlogin = ()=> {
	return new Promise((resolve, reject)=>{
		uni.showLoading({
		  title: '登录中...'
		});
		
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				resolve(loginRes.code);
				uni.hideLoading();
			},
			fail(err) {
				reject(err)
				uni.hideLoading();
			}
		})
		
	})
}

/*
获取微信用户信息 要先调用登录接口
	返回用户信息
*/
export const wxUserInfo = ()=>{
	return new Promise((resolve, reject)=>{
		uni.getUserInfo({
			provider: 'weixin',
			success: function(res) {
				resolve(res);
			},
			fail(err) {
				reject(err)
			}
		});
	})
}

/*
获取微信用户手机号 要先调用登录接口
	参数:obj{
		sessionkey,
		ivdata,
		encrypdata
	}
	返回手机号相关信息
	
*/
export const getPhone = (obj)=>{
	return new Promise((resolve, reject)=>{
		getphone(obj).then(res=>{
			resolve(res.data)
		},err=>{
			reject(err)
		})
	})
}

以上就是全部代码 

注意：如果说你们的appid没有微信认证（如下图） 就会提示该appid没有权限 因为微信官方文档有说 获取手机号这些只针对于非个人使用 

总结：代码没有很复杂 但是需要下功夫研究

2021-5-29补充：在小程序上线的时候 发现线上的一直进不去首页 即使允许授权 也进不去 后来了解发现 小程序为了保护用户个人隐私 是不允许前端将sessionkey、openid存下来的 因为这些重要信息 要存在服务器里 我们需要提供code请求后台接口让后台返回sessionkey 这样才能达到允许授权的效果 当然大家自己本地测试的时候 是可以用的 但是如果上线的话 就需要然后台返回了

所以我在init里做了如下修改

	async init() {
				var code = await wxlogin() //登陆成功后返回的code
				uni.request({
					url: '后台接口地址',
					data: {code:code},
					method: 'post',
					success: (res) => {
						const data = res.data
						this.phoneParams.sessionkey = data.session_key;
						this.phoneParams.openid = data.openid;
					}
				})
			},