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

这篇具有很好参考价值的文章主要介绍了微信小程序获取用户手机号码教程（前端+后端）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

系列文章目录

前言

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。
微信小程序获取手机号,微信小程序,前端,小程序

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

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

在微信小程序中，可以通过调用 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}`);
});