小程序如何获取用户手机号码？下面本篇文章给大家介绍一下微信小程序开发中获取用户手机号码的方法，希望对大家有所帮助！
1、背景
在平时使用第三方微信小程序时，经常会有需要获取微信手机号码的情况，如下图所示：
那这种是怎样实现的呢？下面记录下获取微信手机号码的方法。
**备注：**需要有一个微信小程序号，并且这个号是经过企业认证的。（获取手机号码的功能不对个人小程序号生效）
那下面我们就一起开始，获取手机号码的编程之旅了。
2、代码实现
2.1 新建工程
在app.json文件中新增 "pages/getphonenumber/getphonenumber", 如下图所示：
2.2 准备密文解析工具类
通过微信小程序提供的接口获取手机号码，返回的数据是加密的，所以需要对返回的加密数据进行解密。
1) 新建终端
在微信开发者工具中，点击 "终端" -》 “新建终端” 如下图所示：
2) 执行 npm init 指令
//执行npm init后需要你输入一些信息，直接一直点击 “回车”键就好
如下图所示：
3) 依次执行 npm install crypto-js --save 、 npm install js-base64 --save
如下图所示:
4）构建npm
在微信开发工具的菜单栏 选择 “工具” -》 “构建npm” 构建完成即可。
2.3 解析类实现
在工程的utils文件夹下新建 WXBizDataCrypt.js文件，代码实现如下所示：
varCryptoJS=require("crypto-js");varBase64=require("js-base64");//解析加密数据functiondecode(sesionKey,iv,data){varkey=CryptoJS.enc.Base64.parse(sesionKey);variv=CryptoJS.enc.Base64.parse(iv);vardecrypt=CryptoJS.AES.decrypt(data,key,{iv:iv,mode:CryptoJS.mode.CBC,padding:CryptoJS.pad.Pkcs7});returnBase64.decode(CryptoJS.enc.Base64.stringify(decrypt));}module.exports={decode}
2.4 获取手机号码代码实现
2.4.1 getphonenumber.js的实现
注意： appId、secret需要替换为自己小程序的
//pages/getphonenumber/getphonenumber.jsconstWXBizDataCrypt=require('../../utils/WXBizDataCrypt');Page({/***页面的初始数据*/data:{phoneNum:'',sessionKey:'',openId:'',},/***生命周期函数--监听页面加载*/onLoad:function(options){this.getSessionKey();},getPhoneNumber:function(e){if(e.detail.errMsg=="getPhoneNumber:failuserdeny"){wx.showToast({title:'拒绝授权，无法获取用户手机号码！',})return;}//解密数据获取手机号码this.decryptData(this.data.sessionKey,e.detail.iv,e.detail.encryptedData);},//获取SessionKeygetSessionKey:function(){wx.login({success:res=>{console.log('code:'+res.code);vardata={'appid':'***********',//注意appId、secret需要替换为自身小程序的'secret':'**************************','js_code':res.code,'grant_type':'authorization_code'};wx.request({url:'https://api.weixin.qq.com/sns/jscode2session',data:data,method:'GET',success:res=>{console.log("jscode2sessionresult:",res);this.setData({sessionKey:res.data.session_key,openId:res.data.openId})},fail:function(res){console.log("获取jscodeSessionfail:",res);}})}})},//解密数据decryptData:function(key,iv,encryptedData){varprocessData=WXBizDataCrypt.decode(key,iv,encryptedData);console.log("解密数据：",processData);varjsonObj=JSON.parse(processData);this.setData({phoneNum:jsonObj['phoneNumber']})},})
2.4.2 getphonenumber.wxml 实现
<!--pages/getphonenumber/getphonenumber.wxml--><buttontype="primary"bindgetphonenumber="getPhoneNumber"open-type='getPhoneNumber'>获取手机号码</button><text>获取到的手机号码:{{phoneNum}}</text>
到这里，编码过程已经完成了。 备注：一般情况下 获取jscode2session 是放到服务器端去实现的，这里我把获取sessionKey全都放在小程序端去实现了。 参考小程序官网链接：
3、运行效果图
点击获取手机号码:
本文转载于：掘金社区，如有侵犯，请联系删除
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：http://www.chanpinyuan.cn/42150.html；