微信分享--报错invalid signature签名错误

在做微信分享时遇到签名错误的问题，在网上查找资料发现是因为获取签名时的url和跳转的url不一致

 

下面是查看资料：

建议按如下顺序检查：

1.确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

2.确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。

3.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。

4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

5.确保一定缓存access_token和jsapi_ticket。

6.确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

究竟什么导致呢，后来发现是history在微信中的问题，就是当从列表进入详情页的时候，往后台传入URL，跟你直接从详情页进入传的URL不一致。比如：A=>B，分享B

这时候你需要记录初始页的url，解决办法在你的main.js里，添加

router.beforeEach((to, from, next) => {
  if (!window.initUrl) {
    window.initUrl = location.href.split('#')[0]
  }
  next()
})

然后在你的详情页里B获取

url: '....?url=' + encodeURIComponent(that.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl)

在这里要判断是android还是ios，因为再android里显示是正常的，所以就用

location.href.split('#')[0]

直接获取当前的url即可。

// 判断ios还是android
  Vue.prototype.isIosOrAndroid = function () {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    let isStr = ''
    if (isAndroid) {
      isStr = 'android'
    }
    if (isiOS) {
      isStr = 'ios'
    }
    return isStr
  }

评论补充：

最后跳转开的url与校验时候的url是否一致