uniapp 微信公众号 获取手机号并存储

uni-app 是一个跨平台框架，可以通过编写一套代码来构建不同平台的应用，包括微信公众号。实现获取用户手机号并存储，可以按照以下步骤进行：

1. 前端页面：展示获取手机号按钮并调用微信授权接口
2. 后端服务器：接收并存储用户手机号

一、前端部分

首先，我们需要在前端页面上创建一个按钮，点击按钮后触发微信的获取手机号接口。

<template>
  <view class="container">
    <button @tap="getPhoneNumber" open-type="getPhoneNumber">获取手机号</button>
  </view>
</template>

<script>
export default {
  methods: {
    getPhoneNumber(e) {
      if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
        // 用户允许授权，获取手机号信息
        const { encryptedData, iv } = e.mp.detail;
        // 调用后端接口，发送 encryptedData 和 iv
        this.getPhoneNumberFromServer(encryptedData, iv);
      } else {
        // 用户拒绝授权
        uni.showToast({
          title: '用户拒绝授权',
          icon: 'none'
        });
      }
    },
    getPhoneNumberFromServer(encryptedData, iv) {
      uni.request({
        url: 'https://your-backend-server.com/api/getPhoneNumber', // 替换成你的后端服务器地址
        method: 'POST',
        data: {
          encryptedData,
          iv,
          session_key: uni.getStorageSync('session_key') // 确保已获取并存储用户 session_key
        },
        success: (res) => {
          if (res.data.success) {
            uni.showToast({
              title: '手机号获取成功',
              icon: 'success'
            });
            // 可以在这里处理手机号
          } else {
            uni.showToast({
              title: '手机号获取失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button {
  padding: 10px 20px;
  background-color: #1AAD19;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

在上面的代码中，我们创建了一个按钮，当用户点击按钮并同意授权后，会触发 getPhoneNumber 方法。这个方法会获取微信返回的 encryptedData 和 iv，然后调用后端接口，将这些数据发送到服务器。

二、后端部分

后端部分需要接收前端发送的 encryptedData 和 iv，然后使用微信提供的解密算法解密出用户的手机号，并将其存储在数据库中。以下是一个基于 Node.js 和 Express 的示例代码：

const express = require('express');
const bodyParser = require('body-parser');
const crypto = require('crypto');

const app = express();
app.use(bodyParser.json());

app.post('/api/getPhoneNumber', (req, res) => {
  const { encryptedData, iv, session_key } = req.body;
  
  // 微信小程序提供的解密算法
  function decryptData(encryptedData, iv, sessionKey) {
    const decodedKey = Buffer.from(sessionKey, 'base64');
    const decodedIV = Buffer.from(iv, 'base64');
    const decodedData = Buffer.from(encryptedData, 'base64');
    
    try {
      const decipher = crypto.createDecipheriv('aes-128-cbc', decodedKey, decodedIV);
      decipher.setAutoPadding(true);
      let decrypted = decipher.update(decodedData, 'binary', 'utf8');
      decrypted += decipher.final('utf8');
      
      return JSON.parse(decrypted);
    } catch (err) {
      console.error('解密失败:', err);
      return null;
    }
  }

  const decryptedData = decryptData(encryptedData, iv, session_key);
  if (decryptedData) {
    // 存储手机号逻辑，这里可以是存储到数据库
    const phoneNumber = decryptedData.phoneNumber;
    // 假设我们有一个函数 savePhoneNumber 存储手机号
    savePhoneNumber(phoneNumber).then(() => {
      res.json({ success: true, phoneNumber });
    }).catch(err => {
      console.error('存储失败:', err);
      res.json({ success: false, message: '存储失败' });
    });
  } else {
    res.json({ success: false, message: '解密失败' });
  }
});

function savePhoneNumber(phoneNumber) {
  // 此处为示例，实际应将手机号存储到数据库中
  return new Promise((resolve, reject) => {
    // 模拟异步存储操作
    setTimeout(() => {
      console.log('手机号存储成功:', phoneNumber);
      resolve();
    }, 1000);
  });
}

app.listen(3000, () => {
  console.log('服务器已启动，端口 3000');
});

在后端代码中，我们首先通过 decryptData 函数解密 encryptedData，然后将解密后的数据（包含手机号）存储到数据库中。savePhoneNumber 函数是一个模拟的存储操作，你需要根据实际情况将其替换为实际的数据库存储逻辑。

三、整体流程说明

1. 用户点击按钮：前端页面展示一个按钮，用户点击后会触发 getPhoneNumber 方法。
2. 微信授权：如果用户同意授权，微信会返回 encryptedData 和 iv，前端将其发送到后端服务器。
3. 后端解密：后端接收到 encryptedData 和 iv 后，使用微信提供的解密算法解密出用户的手机号。
4. 存储手机号：解密成功后，将手机号存储到数据库中，返回成功或失败的消息给前端。

四、注意事项

1. session_key 的获取和存储：在用户登录时，需要获取并存储 session_key。可以通过微信的登录接口获取到 session_key。
2. 数据安全：在实际应用中，务必确保数据传输和存储的安全性，避免用户信息泄露。
3. 错误处理：在解密和存储过程中，需要添加完整的错误处理逻辑，确保系统的健壮性。

通过以上步骤，便可以在 uni-app 中实现微信公众号获取用户手机号并存储的功能。如果你需要对接其他平台，只需根据平台的不同修改相应的代码逻辑即可。