微信日常踩坑

微信分享常遇问题

1、invalid signature 签名失败

签名一般都是后台生成，检查 appid 是否和后台一致

2.config:ok 分享出去的却不是自己想要的

1.url问题

window.location.href.split('#')[0]，传递url时候去掉#后面的数据

根据实际情况是否对url进行decodeURLCompent）

2.分享link问题

分享出去的链接需要在appid对应的公众号上添加js安全域名

协议//相对写法，不要写死

3.图片链接

图片链接 协议需要写死 http或者https

vue中 可能会遇到 奇怪的问题

ios 分明config:ok  有时候下一页分享却有问题

ios用vue 路由跳转，进入下一页，这时候复制这个链接，发现还是上一页的链接

除了修改跳转方式，还可以通过路由拦截。修改url

router.afterEach((to, from) => {
  const u = navigator.userAgent.toLowerCase()
  // 微信中跳转
  if(u.indexOf("like mac os x") < 0 || u.match(/MicroMessenger/i) != 'micromessenger') return
  // 有个坏处就是可能会有奇怪的bug 所以在这针对要分享的页面单独处理 xxxx替换
  if (to.path.indexOf('xxxx') > -1){
    if (to.path !== global.location.pathname) {
      location.assign(to.fullPath)
    }
  }
})

安卓有时候在vue main.js 分明配置ok 跳转下一页 却不好使 刷新一下就ok
在当前页重新配置吧~

附：

判断是否为微信的方法
function isWeiXin() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      return true;
    } else {
      return false;
    }
  }

微信分享配置

           // 是否为微信
      if (isWeiXin()){
          let url = window.location.href.split('#')[0]
          // 解码 
          url = decodeURIComponent(url)
          axios.get('后台地址', { params: { url: url } }).then((response) => {
            if (response.data) {
              let data = response.data.result
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'xxxxxxxxxxx', // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.noncestr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名，见附录1
                jsApiList: [
                  'checkJsApi',
                  'hideOptionMenu',
                  'onMenuShareTimeline',
                  'onMenuShareAppMessage',
                  'onMenuShareQQ',
                  'onMenuShareWeibo',
                  'onMenuShareQZone'
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              })
            }
          })
          // }
        //微信分享设置
        let descs = '我要我的滋味'
        this.wxshare({ title: '自定title', imgUrl: '', descs: descs });
      }

      wxshare({ title, imgUrl, descs }) {
        wx.ready(function () {
           let url = window.location.href;

          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

          let shareConfig = {
            title: title || '默认title',
            link: ,
            imgUrl: imgUrl || '默认连接',
            desc: descs,
            type: 'link',
            success: function () {
              // 用户确认分享后执行的回调函数
              // alert('分享成功')
              // alert(imgUrl)
              // alert('分享成功')
            },
            cancel: function () {
              // alert('分享取消');
            }

          }
          wx.onMenuShareTimeline(shareConfig);
          wx.onMenuShareAppMessage(shareConfig);
          wx.onMenuShareQQ(shareConfig);
          wx.onMenuShareWeibo(shareConfig);
          wx.onMenuShareQZone(shareConfig);
        });
      },