H5微信分享朋友分享给朋友圈 vue 踩坑实战，附注意事项及解决方案

原创

已于 2022-03-16 10:04:40 修改 · 2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2020-03-16 11:03:10 首次发布

最近有一个微信分享的功能，恰逢疫情期间远程办公，然后家里的笔记本比较拉闸本地环境不完善，然后远程办公只能推代码到测试环境调试，博主也是比较难受，日渐憔悴，一周没对接好的问题，好在到了公司一下午就调试好了，废话不多说了

分享成功失败的对比微信截图如下
在这里插入图片描述
在这之前
主要代码

 getShareInfo (tit, fxUrl) {//如果分享的内容会根据情况变化，那么这里可以传入分享标题及url
      let urlPath = location.href.split("#")[0] || "";
      var data = {//请求参数
        url: encodeURIComponent(urlPath),  // keyi
      }
      getWxJSSDKConfig(data)//这里我写了一个公用的接口请求js，这里正常axios请求就可以，只要拿到数据都可以
        .then(res => {
          res.data.debug = true
          console.log("jsapi_ticket", res.data)
          localStorage.setItem("jsapi_ticket", res.data);
          window.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, //