引言

一、准备工作

1.1 注册微信开放平台

  • 访问微信开放平台，注册账号。
  • 创建一个新的移动应用，填写应用信息，包括应用名称、描述、包名和签名等。
  • 缴纳300元/年的费用，完成应用创建。

1.2 配置JS接口安全域名

  • 登录微信公众平台，进入“公众号设置” -> “功能设置”。
  • 在“JS接口安全域名”中填写你的应用域名。

二、引入微信JS-SDK

2.1 引入JS文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

如果你使用的是HTTPS协议，请确保引入HTTPS版本的JS文件：

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2.2 配置微信JS-SDK

2.2.1 获取access_token

在服务端，使用以下代码获取access_token：

const axios = require('axios');

const getAppAccessToken = async () => {
  const appId = '你的AppID';
  const appSecret = '你的AppSecret';
  const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`;

  try {
    const response = await axios.get(url);
    return response.data.access_token;
  } catch (error) {
    console.error('获取access_token失败', error);
  }
};
2.2.2 获取jsapi_ticket

使用获取到的access_token，进一步获取jsapi_ticket：

const getJsapiTicket = async (accessToken) => {
  const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${accessToken}&type=jsapi`;

  try {
    const response = await axios.get(url);
    return response.data.ticket;
  } catch (error) {
    console.error('获取jsapi_ticket失败', error);
  }
};
2.2.3 配置微信JS-SDK

在React组件中，使用获取到的jsapi_ticket进行配置：

import React, { useEffect } from 'react';
import axios from 'axios';

const WeChatShare = () => {
  useEffect(() => {
    const initWeChatSDK = async () => {
      const accessToken = await getAppAccessToken();
      const jsapiTicket = await getJsapiTicket(accessToken);

      const url = window.location.href.split('#')[0];
      const timestamp = parseInt(new Date().getTime() / 1000);
      const nonceStr = Math.random().toString(36).substr(2, 15);

      const string = `jsapi_ticket=${jsapiTicket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`;
      const signature = sha1(string);

      wx.config({
        debug: true, // 开启调试模式
        appId: '你的AppID',
        timestamp: timestamp,
        nonceStr: nonceStr,
        signature: signature,
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 需要使用的JS接口列表
      });

      wx.ready(() => {
        wx.onMenuShareTimeline({
          title: '分享到朋友圈的标题',
          link: url,
          imgUrl: '分享图片的URL',
          success: function () {
            console.log('分享到朋友圈成功');
          },
          cancel: function () {
            console.log('取消分享');
          }
        });

        wx.onMenuShareAppMessage({
          title: '分享给朋友的标题',
          desc: '分享描述',
          link: url,
          imgUrl: '分享图片的URL',
          type: 'link', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function () {
            console.log('分享给朋友成功');
          },
          cancel: function () {
            console.log('取消分享');
          }
        });
      });

      wx.error((res) => {
        console.error('微信配置失败', res);
      });
    };

    initWeChatSDK();
  }, []);

  return (
    <div>
      <h1>微信分享示例</h1>
      <p>点击右上角分享按钮进行分享</p>
    </div>
  );
};

export default WeChatShare;

三、注意事项

  1. 域名配置：确保你的应用域名已经配置在微信公众平台的JS接口安全域名中。
  2. HTTPS协议：如果使用HTTPS协议，务必引入HTTPS版本的微信JS文件。
  3. 权限验证：确保服务端正确获取和缓存access_token和jsapi_ticket，并且在前端正确配置微信JS-SDK。
  4. 调试模式：在开发过程中，可以开启调试模式（debug: true），以便查看详细的调试信息。

四、总结