微信小程序新版本与旧版本授权用户手机号的教程

科技 09-16 来源：从来都帅

开发微信小程序会有些场景是需要授权用户手机号的，微信小程序授权用户手机号是通过getPhoneNumber接口授权的，因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发。另外，新版本接口不再需要提前调用wx.login进行登录。从基础库 2.21.2 （微信版本8.0.16）开始，对获取手机号的接口进行了安全升级，也就是说基础库 2.21.2 以前的版本是旧版本，新版本和旧版本的区别是多了code参数，以后旧版本接口可能会摒弃，建议大家使用新版本的手机号授权。

小程序授权手机号获取的参数

首先先讲一下旧版本如何授权用户手机号，旧版本授权手机号点击授权时，会出现第一次授权不成功的现象，什么原因呢？code过期了，有人会问我获取的code是点击授权手机号时一起获取的，怎么会过期呢？这个就是这么神奇，可能是微信的bug问题吧，反正一直没决解，但也不是没有解决的方法，解决方法就是在onLoad页面加载时就wx.login获取code值；

微信小程序手机号操作流程

旧版本授权手机号的代码示例

微信小程序wxml页面

微信小程序js页面

/**
   * 页面的初始数据
   */
  data: {
    code: '',
  },
/**
   * 获取手机号
   */
   getUserMobileInfo: function (e) {
    var that = this,
        code = that.data.code,
        encryptedData = e.detail.encryptedData,
        iv = e.detail.iv;
        wx.checkSession({
            success() {
                //session_key 未过期，并且在本生命周期一直有效
            },
            fail() {
                wx.login({
                    success: res => {
                        that.setData({
                          code: res.code
                        })
                    }
                })
            },
            complete() {
                if (e.detail.errMsg == "getPhoneNumber:ok") {
                    userService.getTelephoneNumber(code, encodeURIComponent(encryptedData), encodeURIComponent(iv)).then(function (data) {
                        wx.hideLoading();
                        var mobileValue = data.data
                        that.setData({
                            mobileValue: mobileValue,
                        })
                    }, function (data) {
                        wx.hideLoading();
                        wx.showToast({
                          title: data.message,
                          icon: 'none'
                        });
                    });
                } else {
                    wx.showModal({
                        title: '提示',
                        content: '需获取手机号才可提交信息',
                    })
                }
            }
        })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.login({
        success: res => {
            this.setData({
                code: res.code
            })
        }
    })
  },

用户同意授权，我们可以根据wx.login时获取到的code来通过后台以及微信处理拿到session_key，最后通过app_id，session_key,iv,encryptedData（用户同意授权errMsg返回‘getPhoneNumber:ok'）

传给后台的参数：code参数传到后台需要换取session_key；encryptedData包括敏感数据在内的完整用户信息的加密数据，iv加密算法的初始向量，这两个参数后台需要解密的，解密的方法可以去微信官方开发文档查看，有很详细说明，这里就不讲述了。

后台处理后返回的参数

phoneNumber：用户绑定的手机号（国外手机号会有区号）；

purePhoneNumber ：没有区号的手机号；

countryCode：区号

新版本授权手机号的代码示例

微信小程序wxml页面

微信小程序js页面

  /**
   * 获取手机号
   */
   getUserMobileInfo: function (e) {
    var that = this,
        code = e.detail.code;
        if (e.detail.errMsg == "getPhoneNumber:ok") {
            userService.getTelephoneNumber(code).then(function (data) {
                wx.hideLoading();
                var mobileValue = data.data
                that.setData({
                    mobileValue: mobileValue,
                })
            }, function (data) {
                wx.hideLoading();
                wx.showToast({
                  title: data.message,
                  icon: 'none'
                });
            });
        } else {
            wx.showModal({
                title: '提示',
                content: '需获取手机号才可提交信息',
            })
        }
  }

php后端的逻辑处理

    /**
     * 获取access_token
     * @return array
     */
    private function getSession() {
        $params = [
            'appid'      => '你的小程序appid',
            'secret'     => '你的小程序appsecret',
            'grant_type' => 'client_credential'
        ];
        $result = $this->httpGet("https://api.weixin.qq.com/cgi-bin/token", $params);
        return json_decode($result, true);
    }
   /**
     * code获取用户手机信息
     */
    public function getTelephoneNumber() {
        if (IS_POST) {
            $raw_json = file_get_contents("php://input");
            $post_data = json_decode($raw_json, true);
            $code = $post_data['code'];
            $session_res = $this->getSession($code);
            if ($session_res['errcode']) {
                $this->apiReturn('0', $session_res['errmsg']);
            }
            $param_data = [
                'code' => $code,
            ];
            $res_data = $this->httpJsonPost("https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=".$session_res['access_token'], $param_data);
            $info = json_decode($res_data, true);
            if($info['errcode'] != 0){
                $this->apiReturn($info['errcode'], $info['errmsg']);
            }
            $this->apiReturn('1', '', $info['phone_info']['phoneNumber']);
        }
    }
    /**
     * json 请求
     * @param string $url
     * @param array $data
     */
   protected function httpJsonPost($url, $data = NULL)
    {

        $curl = curl_init();

        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        if(!$data){
            return 'data is null';
        }
        if(is_array($data))
        {
            $data = json_encode($data);
        }
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        curl_setopt($curl, CURLOPT_HEADER, 0);
        curl_setopt($curl, CURLOPT_HTTPHEADER,array(
                'Content-Type: application/json; charset=utf-8',
                'Content-Length:' . strlen($data),
                'Cache-Control: no-cache',
                'Pragma: no-cache'
        ));
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $res = curl_exec($curl);
        $errorno = curl_errno($curl);
        if ($errorno) {
            return $errorno;
        }
        curl_close($curl);
        return $res;

    }
   /**
     * GET 请求
     * @param string $url
     * @param array $param
     */
    protected function httpGet($url, $param) {
        $url = $url . '?' . http_build_query($param);
        $curl = curl_init();
        if (stripos($url, 'https://') !== FALSE) {
            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
            curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
            curl_setopt($curl, CURLOPT_SSLVERSION, 1);
        }
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $content = curl_exec($curl);
        $status = curl_getinfo($curl);
        curl_close($curl);
        if (intval($status['http_code']) == 200) {
            return $content;
        } else {
            return false;
        }
    }

接口成功返回的整体数据结构，如下图：

接口成功返回的整体数据结构

写后台逻辑时我遇到两个错误反馈

第一种反馈：{"errcode":47001,"errmsg":"data format error hint: [AgoBsDOre-c6ouia] rid: 626b7164-1d9c3b08-076fdbdb"}，这个错误是因为没有用请求头 Content-Type为application/json，所以我改成了json数据post请求，这个报错解决了。

第二种反馈：{"errcode":41001,"errmsg":"access_token missing rid: 626b7285-31e3f8d7-3556ca83"}，这个错误是因为access_token参数，我没写在url上，是和code一起写在数组中传值的，这样是不对，应该写到url上的，这个报错解决了。

旧版本的后台逻辑没有写出来，是因为微信以后要摒弃旧版本的写法，这里就没必要写了，如果有不会的，可以网上搜索一下，建议大家还是用新版本获取用户手机号的写法！小程序js文件中request请求，我用的是封装后的写法传参的，你可以微信小程序原生的wx.request传参写法。以上就是微信小程序新版本与旧版本授权用户手机号的教程了，仅供参考！！！