uni-app 是一个跨平台框架，可以通过编写一套代码来构建不同平台的应用，包括微信公众号。实现获取用户手机号并存储，可以按照以下步骤进行：
- 前端页面：展示获取手机号按钮并调用微信授权接口
- 后端服务器：接收并存储用户手机号
一、前端部分
首先，我们需要在前端页面上创建一个按钮，点击按钮后触发微信的获取手机号接口。
<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 函数是一个模拟的存储操作，你需要根据实际情况将其替换为实际的数据库存储逻辑。
三、整体流程说明
用户点击按钮：前端页面展示一个按钮，用户点击后会触发 getPhoneNumber 方法。
微信授权：如果用户同意授权，微信会返回 encryptedData 和 iv，前端将其发送到后端服务器。
后端解密：后端接收到 encryptedData 和 iv 后，使用微信提供的解密算法解密出用户的手机号。
存储手机号：解密成功后，将手机号存储到数据库中，返回成功或失败的消息给前端。
四、注意事项
session_key 的获取和存储：在用户登录时，需要获取并存储 session_key。可以通过微信的登录接口获取到 session_key。
数据安全：在实际应用中，务必确保数据传输和存储的安全性，避免用户信息泄露。
错误处理：在解密和存储过程中，需要添加完整的错误处理逻辑，确保系统的健壮性。
通过以上步骤，便可以在 uni-app 中实现微信公众号获取用户手机号并存储的功能。如果你需要对接其他平台，只需根据平台的不同修改相应的代码逻辑即可。
