• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

背景

在平时使用第三方微信小程序时,经常会有需要获取微信手机号码的情况,如下图所示:

那这种是怎样实现的呢?下面记录下获取微信手机号码的方法。

备注:需要有一个微信小程序号,并且这个号是经过企业认证的。(获取手机号码的功能不对个人小程序号生效)

 

那下面我们就一起开始,获取手机号码的编程之旅了。

1、打开微信开发者工具新建工程

在app.json文件中新增    "pages/getphonenumber/getphonenumber", 如下图所示:

2、准备密文解析工具类

通过微信小程序提供的接口获取手机号码,返回的数据是加密的,所以需要对返回的加密数据进行解密。

2.1 添加密文解析工具类需要用到的库

第一步、在微信开发者工具中,点击 "终端" ——> “新建终端” 如下图所示:

​  

第二步、执行  npm init 指令

//执行npm init后需要你输入一些信息,直接一直点击 “回车”键就好

如下图所示:

第三步、依次执行  npm install crypto-js --save 、 npm install js-base64 --save

如下图所示:

第四步、在微信开发工具的菜单栏 选择 “工具” ——> “构建npm” 构建完成即可

2.2 解析类实现

在工程的utils文件夹下新建 WXBizDataCrypt.js文件,代码实现如下所示:

var CryptoJS = require("crypto-js");
var Base64 = require("js-base64");

//解析加密数据
function decode(sesionKey,iv,data) {
  var key = CryptoJS.enc.Base64.parse(sesionKey);
  var iv = CryptoJS.enc.Base64.parse(iv);
  var decrypt = CryptoJS.AES.decrypt(data, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return Base64.decode(CryptoJS.enc.Base64.stringify(decrypt));
}

module.exports = {
 decode
}

3、getphonenumber的实现

3.1 、getphonenumber.js的实现

注意: appId、secret需要替换为自身小程序的

// pages/getphonenumber/getphonenumber.js
const WXBizDataCrypt = require(\'../../utils/WXBizDataCrypt\');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    phoneNum:\'\',
    sessionKey:\'\',
    openId:\'\',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSessionKey();
  },

  getPhoneNumber: function(e){
    if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
      wx.showToast({
        title: \'拒绝授权,无法获取用户手机号码!\',
      }) 
      return;
    }
    //解密数据获取手机号码
    this.decryptData(this.data.sessionKey,e.detail.iv,e.detail.encryptedData);
  },

  //获取SessionKey
  getSessionKey: function(){
    wx.login({
      success:res =>{
        console.log(\'code:\'+res.code);
        var data = {
          \'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("jscode2session result: ",res);
            this.setData({
              sessionKey:res.data.session_key,
              openId: res.data.openId
            })
          },
          fail:function(res){
            console.log("获取jscodeSession fail: ",res);
          }
        })
      }
    })
  },

  //解密数据
  decryptData: function(key,iv,encryptedData){
    var processData = WXBizDataCrypt.decode(key,iv,encryptedData);
    console.log("解密数据: ",processData);
    var jsonObj = JSON.parse(processData);
    this.setData({
      phoneNum: jsonObj[\'phoneNumber\']
    })
  },
})

3.2、getphonenumber.wxml 实现

<!--pages/getphonenumber/getphonenumber.wxml-->
<button type="primary"  bindgetphonenumber="getPhoneNumber" open-type=\'getPhoneNumber\'>获取手机号码</button>
<text>获取到的手机号码:{{phoneNum}}</text>

好了,实现内容就这么多。

备注:一般情况下 获取jscode2session 是放到服务器端去实现的,这里我把获取sessionKey全都放在小程序端去实现了。

参考小程序官网链接:

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html

 

4、运行效果图

默认运行                                                               

​   

 

点击“获取手机号码”  

 ​       

 

点击 “允许”按钮

 

好了,今天的文章就到这里,如果内容对你有所帮助,不要忘记点个赞哟~​


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序获取个人信息发布时间:2022-07-18
下一篇:
小程序登录、获取用户信息、openid和unionid详解发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap