全国服务热线:4008-888-888

技术知识

微信小程序实战_微信分享invalid signature签名过错

微信分享invalid signature签名错误踩过的坑       这篇文章主要介绍了微信分享invalid signature签名错误踩过的坑,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

前一段时间做了一个微信分享的东西,而且前端框架用的是VUE,被这个东西快折磨疯了,一个列表页,一个详情页,分享详情页的时候,会报错invalid signature签名错误。

当时就不淡定了,然后开始了排坑之路,根据官网的各种校验错误问题,没有发现有什么区别

建议按如下顺序检查:

1.确认签名算法正确,可用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 一致。

ess_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
 }

总结

到此这篇关于微信分享invalid signature签名错误踩过的坑的文章就介绍到这了,更多相关微信分享invalid signature签名错误内容请搜索凡科以前的文章或继续浏览下面的



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服