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

记录一下通过微信网页分享时，需要自定义标题、描述和图片的功能。参考 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三个签名信息，让后端参考使用签名算法 将其返回给前端即可。
后端需要做的是：

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

步骤四：
获取签名信息是异步的，并且如果页面加载时就调用微信 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 (
    <>微信网页分享<>
  )
}

微信网页分享朋友圈无法显示图片？