微信小程序登录获取手机号教程(超详细)

1. 背景介绍：

在我们开发微信小程序时，登录时，需要获取用户手机号作为唯一标识，下面我介绍一下获取手机号的教程。

本篇文章介绍后端获取方法：

前端工作

后端工作

前端

1. 新建Page页面，在xxx.wxml中加入下方代码

<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF">navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号button>
    <view>{{phone}}view>
view>
scroll-view>

css：

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

说明：

上方按钮组件，用于获取用户的手机号码信息。在按钮上设置了open-type属性为"getPhoneNumber"，表示点击按钮时会获取用户的手机号码。同时，使用bindgetphonenumber属性绑定了一个名为getPhoneNumber的事件，当用户点击按钮并成功获取到手机号码时，会触发这个事件

2. 我们在xxx.js编写以下代码

Page({
  data: {
    phone:0
  },
  getPhoneNumber: function (e) {
    var that = this
    // 一定是getPhoneNumber里面的code
    const code = e.detail.code
    wx.login({
      success: res => {
        if (res.code) {
          wx.getUserInfo({
            success: res1 => {
              wx.request({
                url: 'https://你的后端接口/getPhoneNumber',
                method: 'POST',
                data: {
                  code: code,
                  encryptedData: res1.encryptedData,
                  iv: res1.iv
                },
                success: res => {
                  that.setData({
                    phone: res.data.phoneNumber
                  })
                }
              })
            }
          })
        } else {
          console.log('获取失败！' + res.errMsg)
        }
      }
    })
  }
})

说明

代码中首先定义了一个data属性，其中phone初始值为0。

然后定义了一个getPhoneNumber函数，该函数会在用户点击授权获取手机号按钮时触发。

函数中首先获取到用户点击授权按钮后返回的code，然后调用wx.login接口获取用户的登录凭证。

接着调用wx.getUserInfo接口获取用户的基本信息，其中包括加密后的手机号数据encryptedData和偏移向量iv。

最后通过wx.request发起一个POST请求，将code、encryptedData和iv作为参数传递给后端接口，后端进行解密操作，并返回用户的手机号。

成功获取手机号后，将手机号设置到data属性中的phone字段中，用于在页面中显示用户的手机号码。

后端

后端我们拿c#去实现,其他语言实现方式都一样，可供参考。

private readonly string AppId = "xxx";
private readonly string AppSecret = "xxxxxxxxxxxxxx";

/// 

/// 返回微信用户手机号
/// 
/// 
/// 
[HttpPost("getPhoneNumber")]
[AllowAnonymous]
public async Task<IActionResult> GetPhoneNumber([FromBody] JObject data)
{
    try
    {
        string code = data["code"].ToString();
        var phoneNumber = getuserphonenumber(code).Result;

        return Ok(new { phoneNumber });
    }
    catch (Exception ex)
    {
        // Handle error
        return StatusCode(500, ex.Message);
    }
}
/// 

/// 获取手机号
/// 
/// 
/// 
private async Task<string> getuserphonenumber(string code)
{
    string token =  GetToken1().Result;
    string url = $"https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token="+ token;
    JObject a = new JObject();
    a.Add("code", code);
    using (HttpClient client = new HttpClient())
    {
        var response = await client.PostAsync(url, new StringContent(a.ToString()));
        var content = await response.Content.ReadAsStringAsync();

        // 解析JSON字符串
        JObject jsonObject = JObject.Parse(content);

        // 获取phoneNumber字段的值
        string phoneNumber = jsonObject.SelectToken("phone_info.phoneNumber").ToString();

        return phoneNumber;
    }
}
/// 

/// 调用api获取access_token
/// 
/// 
private async Task<string> GetToken1()
{
    string url = $"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={AppId}&secret={AppSecret}";

    using (HttpClient client = new HttpClient())
    {
        var response = await client.GetAsync(url);
        var content = await response.Content.ReadAsStringAsync();

        dynamic result = JObject.Parse(content);
        string sessionKey = result.access_token;

        return sessionKey;
    }
}

说明

我们后端方法GetPhoneNumber里面的code用于调用下方获取手机号接口：

https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token= 点我查看怎么获取access_token

请求参包括code和access_token调用此接口

官方地址: 点我查看接口文档

获取access_token接口如下：

说明

需要小程序的两个参数：AppId和AppSecret，后端代码中可以看到

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={AppId}&secret={AppSecret}

官方文档: 点我查看接口文档

运行效果演示：