微信小程序（总结三）：uniapp开发，如何获取微信用户手机号（最新）_uniapp获取微信手机号

第一章 前言 

目前在开发一款微信小程序时，需要用户进行微信登录，可以获取用户的手机号码来作为用户的唯一标识，于是探索获取用户手机号码的方式（当然，通过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信息 ：

获取到的用户手机号：