微信小程序开发如何获取用户手机号码

  介绍

这篇文章主要讲解了微信小程序开发如何获取用户手机号码,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

后边要做一个微信小程序,并要能获取用户微信绑定的手机号码。而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如既往的乱,如果没有对小程序开发文档有一个整体的了解,搞懂解密流程还是有点难的。这里把小程序从请求用户授权获取手机号码直至获取到手机号码明文的整个流程串了起来,方便迅速了解,如下:

<强> 1。请求用户授权获取手机号码:

因为需要用户主动触发才能发起获取手机号接口,所以该功能不由API来调用,需用<代码> & lt; button>

wxml:

& lt;按钮wx:如果=皗{!电话}},开式=癵etPhoneNumber"bindgetphonenumber=癵etPhoneNumber"比;获取手机号码& lt;/button>

js:

页面({   getPhoneNumber:函数(e) {   如果(e.detail.errMsg==癵etPhoneNumber:失败用户deny")返回;//用户允许授权   console.log (“lv" e.detail.iv);//包括敏感数据在内的完整用户信息的加密数据,需要解密   console.log (e.detail.encryptedData);//加密算法的初始向量,解密需要用的到   ……   }   })

<强> 2。访问小程序登录接口:

小程序调用wx.login()获取临时登录凭证代码,并传到开发者服务器。

页面({   getPhoneNumber:函数(e) {   console.log (e.detail.errMsg)   console.log (e.detail.iv)//包括敏感数据在内的完整用户信息的加密数据,需要解密   console.log (e.detail.encryptedData)//加密算法的初始向量,解密需要用的到   wx.login ({   成功:res=比;{   如果(res.code) {   console.log (res.code)   }   }   })   }   })

<强> 3。访问腾讯服务器的登录凭证校验接口:

注:官方推荐放到服务器端进行,这里为了方便,就放在前端请求了。

这里要注意传入参数:

appid 小程序唯一标识secret 小程序的应用secretjs_code 登录时获取的codegrant_type 填写为authorization_code //2。访问登录凭证校验接口获取session_key   wx.request ({   url:“https://api.weixin.qq.com/sns/jscode2session"   数据:{   & # 39;appid& # 39;:“xxxxxxxx"   & # 39;秘密# 39;:“xxxxxxxx"   & # 39;js_code& # 39;: res.code,   & # 39;grant_type& # 39;:“authorization_code"   },   方法:& # 39;得到# 39;//选择,,,,,删除、跟踪,连接   标题:{   & # 39;内容类型# 39;:& # 39;application/json # 39;   },//设置请求的头   成功:功能(数据){   console.log (“data" data.data.session_key)   },   失败:函数(err) {   console.log(错);   }   })

<>强4。自己的服务器端进行解密

注:解密接口可以使用腾讯官方的演示进行改造,具体改造会在后面说明。

//3。解密   wx.request ({   url: & # 39; http://xxxxx.com/demo/demo.php& # 39;//腾讯官方演示改造的接口页面   数据:{   & # 39;encrypteddata # 39;: encodeURIComponent (e.detail.encryptedData)//需要进行编码   & # 39;4 # 39;:e.detail.iv,   & # 39;session_key& # 39;: data.data.session_key   },   方法:& # 39;得到# 39;//选择,,,,,删除、跟踪,连接   标题:{   & # 39;内容类型# 39;:& # 39;application/json # 39;   },//设置请求的头   成功:函数(data2) {   console.log (data2.data.phoneNumber)   如果(data2。statusCode==200) {   self.setData ({   电话:data2.data.phoneNumber   })   }   },   失败:函数(err) {   console.log(错);   }   })

js部分整体代码如下:

微信小程序开发如何获取用户手机号码