四川红网

  1. 首页 > 生活经验 > >

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

生活百科生活知道

开发微信小程序会有些场景是需要授权用户手机号的，微信小程序授权用户手机号是通过getPhoneNumber接口授权的，因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发 。另外，新版本接口不再需要提前调用wx.login进行登录 。从基础库 2.21.2 （微信版本8.0.16）开始，对获取手机号的接口进行了安全升级，也就是说基础库 2.21.2 以前的版本是旧版本，新版本和旧版本的区别是多了code参数，以后旧版本接口可能会摒弃 ， 建议大家使用新版本的手机号授权 。
小程序授权手机号获取的参数
首先先讲一下旧版本如何授权用户手机号，旧版本授权手机号点击授权时 ， 会出现第一次授权不成功的现象，什么原因呢？code过期了 ， 有人会问我获取的code是点击授权手机号时一起获取的，怎么会过期呢？这个就是这么神奇，可能是微信的bug问题吧，反正一直没决解微信小程序的alert ， 但也不是没有解决的方法，解决方法就是在onLoad页面加载时就wx.login获取code值；
微信小程序手机号操作流程
旧版本授权手机号的代码示例
微信小程序wxml页面

微信小程序js页面
/*** 页面的初始数据*/data: {code: '',},/*** 获取手机号*/getUserMobileInfo: function (e) {var that = this,code = that.data.code,encryptedData = https://www.30zx.com/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 = https://www.30zx.com/data.datathat.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加密算法的初始向量，这两个参数后台需要解密的微信小程序的alert，解密的方法可以去微信官方开发文档查看 ， 有很详细说明，这里就不讲述了 。
后台处理后返回的参数
后台处理后返回的参数
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 = https://www.30zx.com/data.datathat.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 = https://www.30zx.com/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 = https://www.30zx.com/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;}}
接口成功返回的整体数据结构，如下图：
接口成功返回的整体数据结构
本文到此结束，希望对大家有所帮助！

猜你喜欢

上一篇：几个特殊的小网站，用了都说好！

下一篇：养君子兰怎样配土？