前端vue3，h5项目在微信实现微信分享设置头像和描述（兼容ios和安卓）

最终效果

参考文档

概述 | 微信开放文档

步骤

步骤一：绑定域名

• 可登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
• 或者前往微信开发者平台 - 公众号或服务号 - 基本信息 - 开发信息 进行修改

  备注：登录后可在“开发者中心”查看对应的接口权限。

  步骤二：引入JS文件

  在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

  如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

  备注：支持使用 AMD/CMD 标准模块加载方法加载

  步骤三：通过config接口注入权限验证配置

  所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

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

  这里的签名是让后端生成的，后端的算法可以看上面那个参考文档

• 有几个注意的要点：

• 1.为了动态匹配每一个页面（如果你的项目每个页面都需要分享），最好是前端动态传网页链接（路由）给后端，然后后端再通过这个生成签名。代码：

•  getTicketSign({
        url:window.location.href //动态传当前路由
      }).then(res => {}）

   2.设置分享链接时，由于ios的微信处理有缓存（兼容ios），所以如果要写死一个分享地址，要在地址后面加上时间戳（安卓同样用法），代码：

  const timestamp = new Date().getTime()/1000;//时间戳 
  // 配置分享给朋友
            wx.value.onMenuShareAppMessage({
              title: "", // 分享标题
              desc: "", // 分享描述
              link: `https://你的链接?timestamp=${timestamp}`, // 分享链接
              imgUrl, // 分享图标
              success: () => {
                console.log("分享给朋友成功");
              },
              cancel: () => {
                console.log("分享给朋友取消");
              }
            });
          });

  3.jweixin-1.6.0.js文件虽然在上面的步骤中有cdn的版本，但我认为本地引入比较好，这里提供一下本地文件jweixin-1.6.0.js：

  ((e,n)=>{"function"==typeof define&&(define.amd||define.cmd)?define(function(){return n(e)}):n(e,!0)})(this,function(r,e){var a,c,n,i,t,o,s,d,l,u,p,f,m,g,h,S,y,I,v,_,w,T;if(!r.jWeixin)return a={config:"preVerifyJSAPI",onMenuShareTimeline:"menu:share:timeline",onMenuShareAppMessage:"menu:share:appmessage",onMenuShareQQ:"menu:share:qq",onMenuShareWeibo:"menu:share:weiboApp",onMenuShareQZone:"menu:share:QZone",previewImage:"imagePreview",getLocation:"geoLocation",openProductSpecificView:"openProductViewWithPid",addCard:"batchAddCard",openCard:"batchViewCard",chooseWXPay:"getBrandWCPayRequest",openEnterpriseRedPacket:"getRecevieBizHongBaoRequest",startSearchBeacons:"startMonitoringBeacons",stopSearchBeacons:"stopMonitoringBeacons",onSearchBeacons:"onBeaconsInRange",consumeAndShareCard:"consumedShareCard",openAddress:"editAddress"},c=(()=>{var e,n={};for(e in a)n[a[e]]=e;return n})(),i=(n=r.document).title,t=navigator.userAgent.toLowerCase(),f=navigator.platform.toLowerCase(),o=!(!f.match("mac")&&!f.match("win")),s=-1!=t.indexOf("wxdebugger"),d=-1!=t.indexOf("micromessenger"),l=-1!=t.indexOf("android"),u=-1!=t.indexOf("iphone")||-1!=t.indexOf("ipad"),p=(f=t.match(/micromessenger\/(\d+\.\d+\.\d+)/)||t.match(/micromessenger\/(\d+\.\d+)/))?f[1]:"",m={initStartTime:L(),initEndTime:0,preVerifyStartTime:0,preVerifyEndTime:0},g={version:1,appId:"",initTime:0,preVerifyTime:0,networkType:"",isPreVerifyOk:1,systemType:u?1:l?2:-1,clientVersion:p,url:encodeURIComponent(location.href)},h={},S={_completes:[]},y={state:0,data:{}},O(function(){m.initEndTime=L()}),I=!1,v=[],_={config:function(e){C("config",h=e);var o=!1!==h.check;O(function(){if(o)k(a.config,{verifyJsApiList:A(h.jsApiList),verifyOpenTagList:A(h.openTagList)},(S._complete=function(e){m.preVerifyEndTime=L(),y.state=1,y.data=e},S.success=function(e){g.isPreVerifyOk=0},S.fail=function(e){S._fail?S._fail(e):y.state=-1},(t=S._completes).push(function(){B()}),S.complete=function(e){for(var n=0,i=t.length;n {
      console.log("微信 JS-SDK 加载成功");
      wx.value = window.wx; // 将微信 SDK 对象存储到 ref 中
      initWechatShare();
    };
    script.onerror = () => {
      console.error("微信 JS-SDK 加载失败，请检查网络或链接是否正确");
    };
  };
  // 初始化微信分享配置
  const initWechatShare = () => {
    if (!wx.value) {
      console.error("微信 JS-SDK 未加载");
      return;
    }
    try {
      getTicketSign({
        url:window.location.href
      }).then(res => {
        if (res.code === '200') {
          show.value = true
          ticketSign.value = res.data;
          wx.value.config({
            debug: false, // 开启调试模式
            appId: ticketSign.value.appId, // 必填，公众号的唯一标识
            timestamp: ticketSign.value.timestamp, // 必填，生成签名的时间戳
            nonceStr: ticketSign.value.nonceStr, // 必填，生成签名的随机串
            signature: ticketSign.value.signature, // 必填，签名
            jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表
          });
          wx.value.ready(() => {
            console.log("微信 JS-SDK 初始化成功");
            // 配置分享到朋友圈
            wx.value.onMenuShareTimeline({
              title: "分享标题", // 分享标题
              link: `你的链接?timestamp=${timestamp}`, // 分享链接
              imgUrl, // 分享图标
              success: () => {
                console.log("分享到朋友圈成功");
              },
              cancel: () => {
                console.log("分享到朋友圈取消");
              }
            });
            // 配置分享给朋友
            wx.value.onMenuShareAppMessage({
              title: "分享标题", // 分享标题
              desc: "分享描述", // 分享描述
              link: `你的链接?timestamp=${timestamp}`, // 分享链接
              imgUrl, // 分享图标
              success: () => {
                console.log("分享给朋友成功");
              },
              cancel: () => {
                console.log("分享给朋友取消");
              }
            });
          });
      wx.value.error((err) => {
        console.error("微信 JS-SDK 初始化失败", err);
      });
    }
      })
    } catch (error) {
    show.value = true
  } finally {
    show.value = true
  }
  };