前端小白快速掌握小程序获取用户手机号技巧

2023-07-20 14:43:22

在微信小程序中获取用户手机号码的全面指南

获取微信小程序中用户手机号码的挑战

在微信小程序中获取用户手机号码一直是一个棘手的问题，因为微信出于对用户隐私的保护，没有提供直接获取手机号码的接口。然而，对于某些功能（例如用户注册、登录和密码找回）的实现至关重要。本文将深入探讨使用纯前端方法获取微信小程序中用户手机号码的详细步骤。

第一步：申请微信小程序凭据

要获取用户手机号码，你需要首先申请一个微信小程序的appid 和appsecret 。appid用于唯一标识你的小程序，而appsecret用于确保小程序数据的安全。这两个参数可以在微信公众平台上申请。

第二步：设置不校验合法域名

接下来，你需要将你的小程序设置为不校验合法域名 。此设置允许你的小程序在任何域名下运行。你可以在微信公众平台上进行此设置。

第三步：获取令牌（Token）

要获取用户的手机号码，你需要获取一个令牌（Token） 。Token用于授权小程序访问微信官方接口。你可以使用appid和appsecret使用以下代码获取Token：

wx.login({
  success: function(res) {
    wx.request({
      url: 'https://api.weixin.qq.com/sns/jscode2session',
      data: {
        appid: '你的appid',
        secret: '你的appsecret',
        js_code: res.code,
        grant_type: 'authorization_code'
      },
      success: function(res) {
        // 存储令牌（Token）用于后续使用
      }
    })
  }
})

第四步：使用令牌（Token）获取用户手机号码

微信提供两个接口，wx.login 和wx.getUserInfo ，可用于获取用户的手机号码。wx.login用于获取临时登录凭证，而wx.getUserInfo用于获取用户的加密信息，包括手机号码。

获取临时登录凭证（wx.login）

wx.login({
  success: function(res) {
    // 使用登录凭证获取令牌（Token）
    // 使用第三步中所示的代码
  }
})

获取加密用户信息（wx.getUserInfo）

wx.getUserInfo({
  success: function(res) {
    // 使用令牌（Token）解密加密信息
    // 使用第五步中所示的代码
  }
})

第五步：使用组件在项目中使用

在项目中使用组件，具体代码如下：

<view class="container">
  <button bindtap="getPhoneNumber">获取手机号码</button>
</view>

Page({
  getPhoneNumber: function (e) {
    wx.login({
      success: function (res) {
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session',
          data: {
            appid: '你的appid',
            secret: '你的appsecret',
            js_code: res.code,
            grant_type: 'authorization_code'
          },
          success: function (res) {
            wx.getUserInfo({
              success: function (res) {
                wx.request({
                  url: '你的服务器地址',
                  data: {
                    encryptedData: res.encryptedData,
                    iv: res.iv,
                    sessionKey: res.sessionKey
                  },
                  success: function (res) {
                    console.log(res.data.phoneNumber)
                  }
                })
              }
            })
          }
        })
      }
    })
  }
})