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

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

分享成功失败的对比微信截图如下

在这之前
主要代码

 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, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: res.data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            // jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
          let urlPath = this.url.split("#")[0] || "";
          window.wx.ready(() => {
            // alert("准备完毕，加载方法");
            //分享到朋友圈
            window.wx.updateTimelineShareData({
              title: '共克疫情，四喜在线服务',   // 分享时的标题
              link: urlPath,     // 分享时的链接 // keyi
              imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'),   // 分享时的图标
              success: function () {
                console.log("分享成功");
              },
              cancel: function () {
                console.log("取消分享");
              }
            });
            //分享给朋友
            window.wx.updateAppMessageShareData({
              title: '共克疫情，四喜在线服务',
              desc: '千人专业电商运营公司，深耕行业12年，一键免费制定电商解决方案。',
              link: urlPath, // keyi
              imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'),
              type: '',
              dataUrl: '',
              success: function (n) {
                console.log("分享成功", n);
              },
              complete: function (n) {
                console.log(n);
              }
            });
          })
        })
    },

在这之前
1.
2020年3月16日10:27:41 这个时间节点的技术要求，这个功能必须依赖 微信公众号
2.
配置api以及js域名白名单
3.
验签 ，博主这里是前端调接口，后端验签，常规操作是这样，但是前端也可以自己去验签，不过这个比较少见吧，视自己情况，前端验签网上应该有不少教程，这里就不多阐述了。
4. 验签传的url切记let urlPath = location.href.split("#")[0] || "";不管你的项目有没有#，给我加上就完事了 请求参数记得encodeURIComponent一下var data = {//请求参数 url: encodeURIComponent(urlPath), // keyi }
5.updateTimelineShareData很关键，不要给我用什么 onmune的方法，要废弃了， jsdk版本1.4.0给我装1.6.0 ，npm装不上的，index.html 用script标签引用，像博主这样window调用，有问题的私聊我。这里let urlPath = this.url.split("#")[0] || "";加上let urlPath = this.url.split("#")[0] || ""; window.wx.ready(() => { // alert("准备完毕，加载方法"); //分享到朋友圈 window.wx.updateTimelineShareData({ title: '共克疫情，四喜在线服务', // 分享时的标题 link: urlPath, // 分享时的链接 // keyi imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), // 分享时的图标 success: function () { console.log("分享成功"); }, cancel: function () { console.log("取消分享"); } }); //分享给朋友 window.wx.updateAppMessageShareData({ title: '共克疫情，四喜在线服务', desc: '千人专业电商运营公司，深耕行业12年，一键免费制定电商解决方案。', link: urlPath, // keyi imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), type: '', dataUrl: '', success: function (n) { console.log("分享成功", n); }, complete: function (n) { console.log(n); } });
这样玩。
正常流程走下来，如果你操作没问题基本就分享成功了。
然后下面说几个博主踩的坑，仅供借鉴

不成功的又不知道错在哪里的用微信开发者工具给我调试
1.
pc端微信分享成功然后手机不行的，统统给我用jsdk1.6.0的版本
2.
63004几个常见的错误
js和api域名白名单一定要配置
然后 后端的验签有专门网站可以验证，其他步骤没错就去调试下这个
3.
出现url报错的就看下我上面的。#去没去 加密加没加