开发微信小程序会有些场景是需要授权用户手机号的,微信小程序授权用户手机号是通过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传参写法。以上就是微信小程序新版本与旧版本授权用户手机号的教程了,仅供参考!!!
- 观焦点:微信怎样改手机号(微信小程序新版本与旧版本授权用户手机号的教程)
- 动态焦点:河化股份:南松公司目前产品主要应用于抗疟疾类、孕激素类、营养剂类等药品
- 中微半导:公司有产品应用于储能
- 天天要闻:PingPong与浙江农商联合银行达成合作
- 美团优选是做什么的?美团优选是正规的吗?
- 天津医保卡如何办理?天津医保认证怎么办理?
- 股票现量是什么意思?总量和现量以及量比的关系是什么?
- 股票现量是什么意思?总量和现量以及量比的关系是什么?
- 生物制药龙头股有哪些?生物医药绩优龙头大盘点
- 银行卡账号查询方法有哪些?银行卡卡号忘了手机上怎么查?
- 当江南遇上岭南|出发超级目的地 我想陪你这样寻“常”味
- 当前快报:海南省营商环境建设厅揭牌成立
- 全球短讯!肇庆建设大湾区“智车新城”
- 合力打造优势产业集群(产经观察·关注数字产业集群③)
- 今日热门!老年人现在打疫苗晚不晚?受基础病影响的能不能打?独居老人是否有必要接种?【科学防疫小贴士】(25)
- 心血管病患者一旦感染新冠病毒,居家应该注意什么,如何避免基础病加重,何时需要去就医……【科学防疫小贴士】(26)
- 【世界快播报】成都市住建局:将新建、续建中小学、幼儿园等基本公服设施430个
- 世界今亮点!快讯丨渝厦高铁常益段试运行,常德至长沙最快1小时可达
- 股市中如何看大盘?看盘技巧有哪些?
- 每日快看:今起不再公布无症状感染者数据 中疾控专家解读
