VUE微信分享invalid signature

问题描述

环境:VUE

微信中直接通过URL访问H5网页，然后分享，能够正常显示分享链接的图片，标题，描述。效果是这样的

image

通过分享后的链接打开URL再次访问，分享效果是这样的:

image

目前都正常，再次分享，效果是这样的：

image

奇怪的是这种问题在PC端和模拟器上没有任何问题。

重复分享页面（第二次分享）显示失败

WXNB

问题排查

通过调试发现，问题是出在

wx.config({}) invalid signature 签名错误
为什么会签名错误呢？
第一次签名成功，分享后的页面签名失败。

//通过调试后发现，通过微信分享后的页面微信会在URL上添加参数:&from=xxxxx
//反复分享，会反复出现&from=xxxxx&from=xxxxx的情况，
比如:
www.x.com
通过分享链接进入变成了http://www.x.com/#list?from=xxxx
坑就在这里了
第二次分享时候的链接变成了这样http://www.x.com/#list?from=xxxx&from=xxxx
URL参数中出现了两个from
不知道微信后台在处理签名的逻辑是怎么样的，反正这种情况就不允许

解决办法：
处理掉重复的URL参数名

暴力解决

因为我的分享都到首页
我的参数中都没有名叫from的参数
问题的根本在于处理掉重复的URL参数名
解决办法请勿模仿

 // vue index.html
  <script>
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
         var pair = vars[i].split("=");
         if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    }
    if(getQueryVariable('from')){
       window.location.href = window.location.href.split('?')[0]
    }
  </script>