微信小程序getPhoneNumber方法获取用户手机号

注意事项

1. 获取微信用户绑定的手机号，需先调用wx.login接口。

2. 因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发。

3. 注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。

第一步：先去下载后端获取手机号的官方代码

微信官方文档链接点这里

直接下载后端代码点这里

解压后有多种语言版本的：C++、Node、PHP、Python版本的

第二步：整理下载好的代码，让demo能够跑起来再说

我这里使用的PHP版本的，整理之后后端代码如下（其中使用的默认也是官方提供的）
我这里是为了阅读方便一些，将分模块整理的代码都放到了一起，需要的可以自行按照下载的demo进行整理

public function demo() {
      $appid = isset( $_REQUEST[ 'appid' ] ) ? $_REQUEST[ 'appid' ] :'wx4f4bc4dec97d474b';
      $sessionKey = isset( $_REQUEST[ 'sessionKey' ] ) ? $_REQUEST[ 'sessionKey' ] :'tiihtNczf5v6AKRyjwEUhQ==';
      $encryptedData = isset( $_REQUEST[ 'encryptedData' ] ) ? $_REQUEST[ 'encryptedData' ] : "CiyLU1Aw2KjvrjMdj8YKliAjtP4gsMZM
      QmRzooG2xrDcvSnxIMXFufNstNGTyaGS
      9uT5geRa0W4oTOb1WT7fJlAC+oNPdbB+
      3hVbJSRgv+4lGOETKUQz6OYStslQ142d
      NCuabNPGBzlooOmB231qMM85d2/fV6Ch
      evvXvQP8Hkue1poOFtnEtpyxVLW1zAo6
      /1Xx1COxFvrc2d7UL/lmHInNlxuacJXw
      u0fjpXfz/YqYzBIBzD6WUfTIF9GRHpOn
      /Hz7saL8xz+W//FRAUid1OksQaQx4CMs
      8LOddcQhULW4ucetDf96JcR3g0gfRK4P
      C7E/r7Z6xNrXd2UIeorGj5Ef7b1pJAYB
      6Y5anaHqZ9J6nKEBvB4DnNLIVWSgARns
      /8wR2SiRS7MNACwTyrGvt9ts8p12PKFd
      lqYTopNHR1Vf7XjfhQlVsAJdNiKdYmYV
      oKlaRv85IfVunYzO0IKXsyl7JCUjCpoG
      20f0a04COwfneQAGGwd5oa+T8yO5hzuy
      Db/XcxxmK01EpqOyuxINew==";
      $iv = isset( $_REQUEST[ 'iv' ] ) ? $_REQUEST[ 'iv' ] :'r7BXXKkLb8qrSNn05n0qiA==';
      $errCode = $this->decryptData($encryptedData, $iv, $data, $appid, $sessionKey);
      if ($errCode == 0) {
        print $data;
      } else {
          print($errCode . "\n");
      }
    }

    public function decryptData( $encryptedData, $iv, &$data, $appid, $sessionKey) {
      if (strlen(stripslashes($sessionKey)) != 24) {
        return -41001;
      }
      $aesKey=base64_decode($sessionKey);
      if (strlen($iv) != 24) {
        return -41002;
      }
      $aesIV=base64_decode($iv);
      $aesCipher=base64_decode($encryptedData);
      $result=openssl_decrypt( $aesCipher, "AES-128-CBC", $aesKey, 1, $aesIV);
      $dataObj=json_decode( $result );
      if( $dataObj  == NULL )
      {
        return -41003;
      }
      if( $dataObj->watermark->appid != $appid )
      {
        return -41003;
      }
      $data = $result;
      return 0;
    }

对接口进行调用，如果获得了如下json字符串即为成功

进行json解码之后将是如下数据

{
    "openId":"oGZUI0egBJY1zhBYw2KhdUfwVJJE",
    "nickName":"Band",
    "gender":1,
    "language":"zh_CN",
    "city":"Guangzhou",
    "province":"Guangdong",
    "country":"CN",
    "avatarUrl":"http://wx.qlogo.cn/mmopen/vi_32/aSKcBBPpibyKNicHNTMM0qJVh8Kjgiak2AHWr8MHM4WgMEm7GFhsf8OYrySdbvAMvTsw3mo8ibKicsnfN5pRjl1p8HQ/0",
    "unionId":"ocMvos6NjeKLIBqg5Mr9QjxrP1FA",
    "watermark":{
        "timestamp":1477314187,
        "appid":"wx4f4bc4dec97d474b"
    }
}

但是你会发现这里没有手机号，这个我也没深究原因，但是我用实际的数据是能够拿到手机号的

开始进行前端页面的编写

首先是组件必须要使用button而且open-type属性是getPhoneNumber，并且使用@getphonenumber事件

<template>  
    <view class="content">  
        <button @click="login">Loginbutton>  
        
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">getPhoneNumberbutton>  
    view>  
template>  

当点击getPhoneNubmer按钮的时候将会弹出一个授权信息的弹窗

当点击允许之后会执行如下代码
这里分为几个关键步骤

1. 先通过触发methods中的方法getPhoneCall
2. 然后调用login方法（这个必须要）
3. 在成功会调中获取到js_code
4. 通过调用微信的一个接口获取到session_key
5. 调用自己的后端接口获取手机号

getPhoneCall(e) {
	// 改变this指向
	let _this = this;
	uni.getUserInfo({
		async complete() {
			await uni.login({
				success: async (res) => {
					let jsCode = res.code;
					// 获取sessionKey
					let sessionKeyRes = await _this.$http.api({
						url: 'jscode2session',
						params: {
							// 小程序appid
							appid: '你的appid',
							// 小程序密钥
							secret: '你的小程序密钥',
							// 登录后获得的一个code
							js_code: jsCode
						},
						host: 'https://api.weixin.qq.com/sns/'
					});
					// 获取手机号
					let telRes = await _this.$http.api({
						url: 'demoLan',
						params: {
							appid: '你的appid',
							sessionKey: sessionKeyRes.data.session_key,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
						},
						host: '你的接口host地址'
					});
					// 在这里能够获取到包括手机号在内的相关信息
					console.log(telRes.data);
				},
			});
		}
	})
}

特别说明：_this.$http.api方法是封装的一个request请求方法，请自行更改即可
进行调用之后页面数据如下，在预览接口返回值出能够拿到相应的电话号码

数据json解码之后如下所示

这里有一个小问题，就是接口没处理好，将html文档也返回过来了，这个我就不在这里说了，自行处理即可