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

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()) {
   
   
            
    // 获取微信授权code
    const 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和openid
    const 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中获取用户ID
  
  try {
   
   
            
    // 获取文章价格信息
    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);
    
    // 调用微信支付API
    const result = await wxPay.unifiedOrder(unifiedOrderParams