H5开发方案：带支付功能的微信文章分享与位置反馈系统

一、项目概述

本H5项目是一个集成了支付功能的微信文章分享平台，用户可以在H5内购买文章并分享给微信好友，好友阅读后可以反馈其地理位置信息。该产品对标"hysh.xingguizuobiao.cn/h5/"的功能，但增加了支付模块和更丰富的位置反馈功能。

1.1 核心功能

• 微信授权登录
• 文章浏览与购买支付
• 微信好友分享功能
• 好友阅读后的地理位置反馈
• 数据统计与分析

1.2 技术栈

• 前端：Vue.js + Vant UI
• 后端：Node.js + Express
• 数据库：MongoDB
• 支付接口：微信支付API
• 地图服务：腾讯地图API

二、详细功能设计

2.1 用户系统模块

2.1.1 微信授权登录

// 微信授权登录实现
function wechatAuth() {// 检查是否在微信环境if (isWeixinBrowser()) {// 获取微信授权codeconst appId = 'YOUR_APPID';const redirectUri = encodeURIComponent('YOUR_REDIRECT_URI');const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;window.location.href = authUrl;} else {alert('请在微信中打开');}
}// 后端处理授权回调
app.get('/wechat/callback', async (req, res) => {const { code } = req.query;try {// 使用code获取access_token和openidconst tokenUrl = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${appSecret}&code=${code}&grant_type=authorization_code`;const tokenResponse = await axios.get(tokenUrl);// 获取用户信息const userInfoUrl = `https://api.weixin.qq.com/sns/userinfo?access_token=${tokenResponse.data.access_token}&openid=${tokenResponse.data.openid}&lang=zh_CN`;const userInfoResponse = await axios.get(userInfoUrl);// 存储用户信息到数据库const user = await User.findOneAndUpdate({ openid: tokenResponse.data.openid },{nickname: userInfoResponse.data.nickname,avatar: userInfoResponse.data.headimgurl,lastLogin: new Date()},{ upsert: true, new: true });// 生成JWT token返回给前端const token = jwt.sign({ userId: user._id }, 'YOUR_SECRET_KEY', { expiresIn: '7d' });res.redirect(`/h5/?token=${token}`);} catch (error) {console.error('微信授权错误:', error);res.status(500).send('授权失败');}
});

2.1.2 用户信息管理

• 用户基本信息存储（openid、昵称、头像）
• 用户阅读历史记录
• 用户分享记录
• 用户支付记录

2.2 支付功能模块

2.2.1 微信支付集成

// 前端发起支付请求
function requestPayment(articleId) {axios.post('/api/payment/create', { articleId }).then(response => {const paymentData = response.data;WeixinJSBridge.invoke('getBrandWCPayRequest',{appId: paymentData.appId,timeStamp: paymentData.timeStamp,nonceStr: paymentData.nonceStr,package: paymentData.package,signType: paymentData.signType,paySign: paymentData.paySign},function(res) {if (res.err_msg == "get_brand_wcpay_request:ok") {// 支付成功alert('支付成功');// 更新文章访问权限updateArticleAccess(articleId);} else {// 支付失败alert('支付失败: ' + res.err_msg);}});}).catch(error => {console.error('支付请求失败:', error);alert('支付请求失败');});
}// 后端支付处理
app.post('/api/payment/create', async (req, res) => {const { articleId } = req.body;const { userId } = req.user; // 从JWT中获取用户IDtry {// 获取文章价格信息const article = await Article.findById(articleId);if (!article) {return res.status(404).json({ error: '文章不存在' });}// 生成订单const order = new Order({user: userId,article: articleId,amount: article.price,status: 'pending',outTradeNo: generateOrderNo() // 生成唯一订单号});await order.save();// 调用微信支付统一下单接口const unifiedOrderParams = {appid: wxAppId,mch_id: wxMchId,nonce_str: generateNonceStr(),body: `购买文章: ${article.title}`,out_trade_no: order.outTradeNo,total_fee: Math.round(article.price * 100), // 转为分spbill_create_ip: req.ip,notify_url: 'YOUR_DOMAIN/api/payment/notify',trade_type: 'JSAPI',openid: getOpenIdByUserId(userId) // 获取用户的openid};// 生成签名unifiedOrderParams.sign = generateWxPaySign(unifiedOrderParams, wxMchKey);// 调用微信支付APIconst result = await wxPay.unifiedOrder