小程序填坑：2025最新getPhoneNumber功能详解

本篇博客主要详解微信小程序的getPhoneNumber组件的功能，填补网上那些到处是漏洞的博客，同时解释微信小程序官方文档本身的漏洞。
惯例先上总纲：

主要内容
1.前端页面组件书写
2.JS内组件用法
3.接口文件内容
4.效果图

先上成功后的结果图

以下是具体步骤

第一步：组件引用

现在小程序的getPhoneNumber功能必须绑定在button事件上了。所以要按照button的正确写法来写：

<button class=''   open-type="getPhoneNumber"> bindgetphonenumber="getPhoneNumber">开始</button>

这个是官方给的组件开放功能写法，无需修改，直接引用即可。

第二步：JS内getPhoneNumbe组件函数

该事件中最重要的就是在wx.login登录后发起接口请求，这里需要配置参数来给接口，和第三步的demo.php的参数是一一对应的，所以需要认真对待。

appid: “你的小程序APPID”,
secret: “你的小程序appsecret”,
code: res.code,
encryptedData: telObj,
iv: ivObj

这些是必不可少的参数，就想你上网需要的身份证上提供的信息一样。appid相当于姓名， secret相当于性别，code相当于身份证号码，encryptedData相当于家庭住址，iv相当于给你办证的公安局。这些齐备才能算一个合法的请求。

//通过绑定手机号登录
    getPhoneNumber: function (e) {
      var ivObj = e.detail.iv
      var telObj = e.detail.encryptedData
      var codeObj = "";
      var that = this;
      //------执行Login
      wx.login({
        success: res => {
          console.log('code转换', res.code); //用code传给服务器调换session_key

          wx.request({
            url: 'https://你的接口文件路径', //接口地址
            data: {
              appid: "你的小程序APPID",
              secret: "你的小程序appsecret",
              code: res.code,
              encryptedData: telObj,
              iv: ivObj
            },
            header: {
              'content-type': 'application/json' // 默认值
            },
            success: function (res) {
              phoneObj = res.data.phoneNumber;
              console.log("手机号=", phoneObj)
              wx.setStorage({   //存储数据并准备发送给下一页使用
                key: "phoneObj",
                data: res.data.phoneNumber,
              })
            }
          })

          //-----------------是否授权，授权通过进入主页面，授权拒绝则停留在登陆界面
          if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用户点击拒绝
            wx.navigateTo({
              url: '../index/index',
            })
          } else { //授权通过执行跳转
            
            wx.navigateTo({
              url: '../test/test',
            })
          }
        }
      });

      //---------登录有效期检查
      wx.checkSession({
        success: function () {
          //session_key 未过期，并且在本生命周期一直有效
        },
        fail: function () {
          // session_key 已经失效，需要重新执行登录流程
          wx.login() //重新登录
        }
      });
    },

注意要在data中配置变量,这里的变量可根据个人不同需求来命名。这些变量用来存储手机号信息发送给不同页面做不同需求的使用，因人而异。

var app = getApp();
var phoneObj = "";
page({
    data: {