基于vue3 H5页面分享好友及朋友圈，显示自定义的标题、内容、图片

处理前效果

处理后效果

一、微信公众号绑定域名、后端接口获取签名（这些就不细说）
详细微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2

二、前端

1、安装 jssdk npm install weixin-js-sdk --save

2、（我是新建一个.ts,方便全局引用）

import wx from "weixin-js-sdk";
import {
    
     getWeXinJSSDKInfo } from "@/api/share";
/*
 * 微信分享
 * 获取微信加签信息
 * @param{urls}:获取签名url
 * @param{shareData}:分享配置参数
 */
export const wexinShare = async (urls: any, shareData: any) => {
    
    
  //获取签名接口
  const {
    
     code, data } = await getWeXinJSSDKInfo({
    
     url: urls });
  if (code == 200) {
    
    
    //微信加签
    wx.config({
    
    
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
      appId: data.appId, // 必填，公众号的唯一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名，见附录1
      jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.checkJsApi({
    
    
      jsApiList: [
        "chooseImage",
        "updateAppMessageShareData",
        "updateTimelineShareData",
      ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function (res: any) {
    
    
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        console.log(res, "checkJsApi");
      },
    });
    wx.ready(function () {
    
    
      // //分享到朋友圈”及“分享到QQ空间”
      wx.updateTimelineShareData({
    
    
        title: shareData.title, // 分享标题
        link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: shareData.imgUrl, // 分享图标
        success: function (res: any) {
    
    
          // 设置成功
          console.log("分享朋友圈成功返回的信息为:", res);
        },
      });

      //“分享给朋友”及“分享到QQ”
      wx.updateAppMessageShareData({
    
    
        title: shareData.title, // 分享标题
        desc: shareData.desc, // 分享描述
        link: data.url, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: shareData.imgUrl, // 分享图标
        success: function (res: any) {
    
    
          console.log("分享朋友成功返回的信息为:", res);
        },
      });
    });
    wx.error(function (res: any) {
    
    
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      console.log("验证失败返回的信息:", res);
    });
  } else {
    
    
    console.log("获取sdk参数失败！");
  }
};

3、页面引入使用

//微信分享
async function initData() {
    
    
  var urls = window.location.href.split("#")[0];
  let shareData = {
    
    
    title: info.value.title, // 分享标题
    desc: info.value.intro,
    imgUrl: info.value.image, // 分享图标
  };
  //引用
  wexinShare(urls, shareData);
}
onMounted(() => {
    
    
    initData();
});

微信公众号那里要配分享链接对应的域名，要不也是没有效果的。

完成啦…

注意的是一定要确保后端返回的签名是对的，要不没效果，我刚刚开始就因为后端返回的签名不对，前端就一直没有效果。

要注意接口那边返回的链接和你传过去的是不是一样的，有些会编译过后才返回的，会导致没效果