微信小程序(总结三):uniapp开发,如何获取微信用户手机号(最新)

小程序 0

第一章 前言 

目前在开发一款微信小程序时,需要用户进行微信登录,可以获取用户的手机号码来作为用户的唯一标识,于是探索获取用户手机号码的方式(当然,通过wx.login来获取code,进而换取用户的openid也是可以的,在小编另两个总结中)

第二章 获取用户手机号

  • 步骤1:需要将button组件open-type 的值设置为getPhoneNumber,当用户点击并同意之后,通过@getphonenumber事件获取回调信息;
  • 步骤2:将@getphonenumber事件回调中的动态令牌code传到开发者后台(注意这里是前后端合作开发的流程),并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口,消费code来换取用户手机号。每个code有效期为5分钟,且只能消费一次。

获取手机号 | 微信开放文档

  • 注:getPhoneNumber返回的code与wx.login返回的code作用是不一样的,不要混用,不然会报错code无效。
  • 使用方式:

        -- html部分——

</template>	    <view>        <!-- 获取用户手机号 -->        <!-- 注意:getUserPhone方法不要用括号,不然拿不到参数!!!! -->		<button open-type="getPhoneNumber" class="login_button" @getphonenumber="getUserPhone">获取用户手机号</button>	</view></template>

        -- js部分——

getUserPhone(e) {	const _this = this	// 获取到回调信息,需要code(与登录login的code不同)	console.log("回调返回的信息:", e)	uni.request({		url: 'https://api.weixin.qq.com/cgi-bin/stable_token',		method: 'POST',		data: {			appid: '小程序测试号appid',			secret: '小程序测试号密钥',			grant_type: 'client_credential'		},		success(res) {			console.log('获取access_token信息:', res)			// 保存access_token的操作,小编这里样例,就直接放在data中了			_this.accessToken = res.data.access_token			uni.request({				url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${res.data.access_token}`,				method: 'POST',				data: {					code: e.detail.code					// openid: _this.openid (openid非必填,所以不需要先获取用户信息,再获取手机号)				},				success(res) {					console.log('获取的用户手机号userPhone:', res)				}			})		}	})},

        -- 注意1: 这里如果使用小程序的appid和密钥,是会报错没有权限的,问题详情如下

微信小程序(bug): 获取手机号报错:getPhoneNumber:fail no permission-CSDN博客

        -- 注意2:正常开发中我们还需要抠细节,例如:只有获取的回调信息errMsg返回是"getPhoneNumber:ok"表示同意授权才执行逻辑…

取消返回的参数: 

         -- 实现效果:

允许后,回调返回的信息: 

获取的access_token信息 :

获取到的用户手机号:

也许您对下面的内容还感兴趣: