记录一下通过微信网页分享时，需要自定义标题、描述和图片的功能。参考 JSSDJ使用步骤。

步骤解读

步骤一：JS接口安全域名，指的是后端API接口域名。

步骤二：使用ES MODULE加载微信 JS SDK文件。

pnpm i weixin-js-sdk

步骤三：注入权限验证配置

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

jsApiList指的是微信JS提供的接口，如“分享给朋友”接口updateAppMessageShareData。

timestamp、nonceStr、signature三个签名信息，让后端参考使用签名算法将其返回给前端即可。

后端需要做的是：

获取access_token
通过access_token获取jsapi_ticket，并为jsapi_ticket做缓存处理
返回签名信息：签名、生产签名的时间戳和随机串

步骤四：

获取签名信息是异步的，并且如果页面加载时就调用微信JS提供的接口， 需将微信JS提供的接口放在wx.ready()中调用。

步骤五：

通过wx对象的通用参数来验证微信JS提供的接口是否调用成功，如success参数

wx.updateAppMessageShareData({
  title: '分享标题',
  desc: '分享描述',
  imgUrl: '分享图片链接',
  link: '分享页面链接',
  success: () => { alert('updateAppMessageShareData接口调用成功') }
});

封装和使用

// hooks/useWXShare.tsx
import wx from 'weixin-js-sdk';
import request from '@/api';
import urlMap from '@/api/url-map';

const { weChat } = urlMap;
const appId = 'xxxxxxxxxxxxx';

interface ShareData {
  title: string;
  desc?: string;
  link: string;
  imgUrl: string;
  success?: any;
}
// 微信网页分享
// 注意，通过 ready 接口处理成功验证
const useWXShare = () => {
  // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
  const updateAppMessageShareData = (props: ShareData) => {
    wx.updateAppMessageShareData(props);
  };

  // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
  const updateTimelineShareData = (props: ShareData) => {
    wx.updateTimelineShareData(props);
  };

  const getSign = () => {
    request
      .post(weChat.sign, {
      url: location.href,
    })
      .then((res) => {
      const { timestamp, nonceStr, signature } = res.data;
      // 签名需要后端返回
      wx.config({
        // debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
        appId, // 必填，公众号的唯一标识
        timestamp, // 必填，生成签名的时间戳
        nonceStr, // 必填，生成签名的随机串
        signature, // 必填，签名
        jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData'], // 必填，需要使用的 JS 接口列表
      });
    });
  };

  return {
    wx,
    updateAppMessageShareData,
    updateTimelineShareData,
    getSign,
  };
};
export default useWXShare;

import { useWXShare } from '@/hooks';

export default () => {
  const { wx, getSign, updateAppMessageShareData, updateTimelineShareData } = useWXShare();
  
  useEffect(() => {
    getSign();
    
    onLoading();
    request
      .get(home.articlesDetail, { uri })
      .then((res) => {
        const { title, description } = res.data;
        offLoading();

        wx.ready(() => {
          updateAppMessageShareData({
            title,
            desc: description,
            imgUrl: 'https:xx.jpeg',
            link: detailLink,
          });
          updateTimelineShareData({
            title,
            imgUrl: 'https:xx.jpeg',
            link: detailLink,
          });
        });
      })
      .finally(() => offLoading());
  }, []);
  
  return (
    <>微信网页分享<>
  )
}

微信网页分享「自定义标题、描述和图片」

步骤解读

封装和使用