实现微信H5分享功能

最新推荐文章于 2025-03-11 17:15:34 发布

浮游本尊

最新推荐文章于 2025-03-11 17:15:34 发布

阅读量2.1k

点赞数 9

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_45658814/article/details/143330187

版权

在这篇文章中，我们将详细探讨如何在Vue2项目中实现和调试微信H5分享功能。这包括后端的签名生成、前端的JS-SDK配置以及调试步骤。

第一步：配置微信公众号

确保你的微信公众号已经完成以下配置：

步骤1：配置JS接口安全域名

登录微信公众平台。
进入“设置” -> “公众号设置” -> “功能设置”。
在“JS接口安全域名”处添加你的服务器域名。

步骤2：获取AppID和AppSecret

在“开发” -> “基本配置”中获取这两个参数，它们是实现分享功能的关键。

第二步：后端实现签名接口

创建一个简单的Node.js服务器用于生成签名，确保微信分享功能的请求是从授权的源发起的。

安装必要的Node.js包

使用命令 npm install express request crypto 来安装所需的库，以便于创建网络服务和生成签名。

实现签名服务器

const express = require('express');
const request = require('request');
const crypto = require('crypto');

const app = express();
const PORT = 3000;
const appId = 'yourAppId'; // 你的AppID
const appSecret = 'yourAppSecret'; // 你的AppSecret
let jsapiTicket = '';

function getJsapiTicket(callback) {
  const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`;
  request.get(url, (err, res, body) => {
    if (err) return callback(err);
    const data = JSON.parse(body);
    const token = data.access_token;
    const ticketUrl = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`;
    request.get(ticketUrl, (err, res, body) => {
      if (err) return callback(err);
      const ticketData = JSON.parse(body);
      jsapiTicket = ticketData.ticket;
      callback(null, jsapiTicket);
    });
  });
}

function getSignature(jsapi_ticket, url, nonceStr, timestamp) {
  const string = `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`;
  const hash = crypto.createHash('sha1');
  hash.update(string);
  return hash.digest('hex');
}

app.get('/weixin-signature', (req, res) => {
  const url = req.query.url;
  const nonceStr = 'randomString'; // 随机字符串
  const timestamp = Math.floor(Date.now() / 1000); // 时间戳
  getJsapiTicket((err, ticket) => {
    if (err) return res.status(500).send('Error getting JsapiTicket');
    const signature = getSignature(ticket, url, nonceStr, timestamp);
    res.json({ appId, timestamp, nonceStr, signature });
  });
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

启动服务器

执行 node signature.js 来启动你的签名服务器，确保它能够响应前端的请求。

第三步：前端配置微信JS-SDK

引入微信JS-SDK到你的Vue组件

安装微信JS-SDK：npm install weixin-js-sdk。
在你的Vue组件中引入并配置SDK。

配置分享接口

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
import wx from 'weixin-js-sdk';
import axios from 'axios';

export default {
  name: 'WeChatShare',
  mounted() {
    this.setupWeChatShare();
  },
  methods: {
    setupWeChatShare() {
      const url = window.location.href.split('#')[0]; // 当前页面URL
      axios.get(`http://yourserver.com/weixin-signature?url=${encodeURIComponent(url)}`)
        .then(response => {
          const data = response.data;
          wx.config({
            debug: true, // 开启调试模式
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
          });

          wx.ready(() => {
            const shareData = {
              title: '分享标题', // 分享标题
              desc: '分享描述', // 分享描述
              link: url, // 分享链接
              imgUrl: '分享图标的URL', // 分享图标URL
              success: () => {
                alert('分享成功');
              }
            };
            wx.updateAppMessageShareData(shareData); // 分享给朋友
            wx.updateTimelineShareData(shareData); // 分享到朋友圈
          });

          wx.error((error) => {
            console.error('微信配置错误:', error);
          });
        })
        .catch(error => {
          console.error('请求签名失败:', error);
        });
    }
  }
};
</script>