微信小程序获取用户手机号码教程（前端+后端）

骑猪看日落 2023-10-14 08:46 42阅读 0赞

## 系列文章目录 ##

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、前端实现获取用户手机号码
 *   *  1.前端获取用户登录凭证 code
     *  2.后端解析用户登录凭证获取手机号码
 *  二、注意事项
 *  总结

--------------------

## 前言 ##

在开发微信小程序时，获取用户手机号码是常见的需求之一。本教程将为你详细介绍如何在前端和后端实现获取用户手机号码的功能，以及如何保护用户隐私和安全。

--------------------

## 一、前端实现获取用户手机号码 ##

在微信小程序中，可以通过调用 wx.login() 获取用户的登录凭证 code，然后将 code 发送给后端服务器，由后端通过微信提供的接口获取用户的手机号码。具体步骤如下：

### 1.前端获取用户登录凭证 code ###

在前端页面的逻辑层中，调用 wx.login() 方法获取用户的登录凭证 code，并将其发送给后端服务器。

// 前端页面的逻辑层
    wx.login({
        
      success: (res) => {
        
        if (res.code) {
        
          // 获取到用户登录凭证 code
          const code = res.code;
          // 将 code 发送给后端服务器
          wx.request({
        
            url: 'https://your-backend-server.com/getPhoneNumber',
            data: {
         code: code },
            method: 'POST',
            success: (res) => {
        
              console.log(res.data);
            },
            fail: (err) => {
        
              console.error('请求后端接口失败', err);
            },
          });
        } else {
        
          console.error('获取用户登录凭证失败', res.errMsg);
        }
      },
      fail: (err) => {
        
        console.error('调用 wx.login 失败', err);
      },
    });

### 2.后端解析用户登录凭证获取手机号码 ###

在后端服务器中，通过微信提供的接口解析用户的登录凭证 code，获取用户的手机号码。需要注意的是，后端需要与微信进行交互，因此需要使用相应的微信开放接口。

这里以 Node.js 和 Express 为例，演示后端如何实现解析用户登录凭证并获取手机号码的功能。

// 后端服务器使用 Node.js 和 Express 实现
    
    const express = require('express');
    const axios = require('axios');
    
    const app = express();
    const appId = 'your-app-id'; // 微信小程序的 AppID
    const appSecret = 'your-app-secret'; // 微信小程序的 AppSecret
    
    app.use(express.json());
    
    app.post('/getPhoneNumber', async (req, res) => {
        
      const {
         code } = req.body;
      if (!code) {
        
        return res.status(400).json({
         error: '缺少用户登录凭证 code' });
      }
    
      try {
        
        // 向微信服务器发送请求，获取 session_key 和 openid
        const response = await axios.get('https://api.weixin.qq.com/sns/jscode2session', {
        
          params: {
        
            appid: appId,
            secret: appSecret,
            js_code: code,
            grant_type: 'authorization_code',
          },
        });
    
        const {
         session_key, openid } = response.data;
        // 这里可以根据需要存储 session_key 和 openid 到数据库
    
        // 此处省略解密手机号码的步骤，具体解密方法请参考微信文档
    
        // 返回手机号码等相关信息给前端
        res.json({
         phoneNumber: '用户手机号码' });
      } catch (error) {
        
        console.error('请求微信接口失败', error);
        res.status(500).json({
         error: '服务器内部错误' });
      }
    });
    
    const port = 3000;
    app.listen(port, () => {
        
      console.log(`服务器运行在 http://localhost:${
          port}`);
    });

## 二、注意事项 ##

在使用微信提供的接口前，需要在微信公众平台申请开发者账号并创建小程序，获取 AppID 和 AppSecret。  
在后端处理用户手机号码时，要遵循相关法律法规，保护用户的隐私和安全，不得将用户手机号码泄露或用于非法用途。  
在前端获取用户登录凭证时，要注意处理可能的异常情况，确保代码的稳定性。

## 总结 ##

通过本教程，你了解了在微信小程序中实现获取用户手机号码的方法。在前端，通过 wx.login() 获取用户登录凭证 code，并将其发送给后端服务器。在后端，通过微信提供的接口解析登录凭证获取用户手机号码，并进行相应的处理。同时，我们也提醒你要注意保护用户隐私和安全，遵循相关法律法规。

希望本教程对你有所帮助。如果你有任何问题或疑问，欢迎留言讨论。感谢阅读！