uniapp微信小程序获取用户手机号uniCloud云开发版

news2025/4/3 1:17:55

开发微信小程序，很多时候需要获取用户的手机号，这样方便平台更好的为用户服务，但是微信小程序不允许开发者直接获取用户的手机号，需要用户手动授权才能获取手机号，且需要配合后端进行解密才能获得完整的手机号，这里的前端采用的是uniapp开发，后端采用的是uniCloud，下面就给大家展示一下实现代码。

一、给button按钮添加open-type属性

<view class="layout">		
	<view class="tel">获取手机号示例</view>
	<button @getphonenumber="getPhoneNumber" open-type="getPhoneNumber" type="primary">获取手机号</button>
</view>

在这里插入图片描述
如上所示，需要给button按钮，设置open-type="getPhoneNumber"属性，并且设置事件@getphonenumber=“getPhoneNumber”

//获取手机号
const getPhoneNumber = (e)=>{	
	console.log(e);
}

在这里插入图片描述

点击“获取手机号”按钮，会有授权弹窗，执行getPhoneNumber 该方法，不会直接获取到真实的手机号，而且获取到加密的数据信息，如下图所示。
在这里插入图片描述
那么如何才能获取用户授权后，真实的手机号码那，需要看一下官方的文档，getPhoneNumber文档地址，文档中可以直接使用https调用获取，但是需要用到appid和secret，如果在前端展示了自己的秘钥这样是不安全的，因为发送网络请求或者查看源码都会泄露秘钥的，最好在服务端执行，只需要将前端获取的code传给后端执行即可，代码如下：

//获取云对象
const cloudObj = uniCloud.importObject("cloud-service");

const getPhoneNumber = async(e)=>{
	let obj = {
		code:e.detail.code,
		encryptedData: e.detail.encryptedData,
		iv: e.detail.iv
	}
	//调用云对象的phone方法
	let res = await cloudObj.phone(obj);
	console.log(res);
}

二、unicloud云端获取code调用查询手机号接口

看一下获取手机号的必填入参，已知code是从客户端通过getPhoneNumber方法获取到的，并且从传参给了云对象，但是access_token没有，需要你自己在后端获取凭证，凭证有效期5分钟，可以存入缓存，如果业务比较单一可以不存储，每次执行一次也可以，这种仅限于业务非常单一的形式，获取凭证的接口地址：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html。
在这里插入图片描述

//unicloud云对象内的phone方法，params是客户端传来的值
async phone(params){
	//调用微信凭证接口，获取access_token，传入appid和secret
	//在这里可以判断是否已经有access_token缓存，如果没有再去调用凭证接口，避免重复调用
	let {data:{access_token}} = await uniCloud.request({
		url:"https://api.weixin.qq.com/cgi-bin/token",
		data:{
			grant_type:"client_credential",
			appid:"wxb3f72f0c8b700000",
			secret:"88826c257f4d0dc7e77f4b14911000000"
		}
	})
	let res = await uniCloud.request({
		url:"https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token="+access_token,
		method:"POST",
		data:{
			code:params.code
		}
	})
	return res;
}