h5单页应用在微信中签名失败的解决办法

2019-02-20 by 杜宏伟

微信自定义分享是前端常用功能,多页应用是没有问题的,但是单面应用会有问题。常见的错误提示“ signature error"

要想自定义微信分享需要两步,一是定义 wx.config,二是在分享事件发生时执行 x.onMenuShareAppMessage(shareData), wx.onMenuShareTimeline(shareData),问题出现在wx.config 阶段

在ios微信中打开h5单面应用,无论前端路由如何变化,微信始终会认为是进入应用时的url,也就是认为路由没变化。虽然 window.location.href 是可以拿到正确的url的,但是微信会以内部记录的url为准,这会导致签名失败。比如,从首页进入单面应用 https://a.com/index.html,然后跳到list 页面 ,这时url应该是 https://a.com/list.html但微信并没有感知到,它还是认为url为https://a.com/index.html,所以这时你拿当前页面的url从签名,肯定会失败。

解决办法

不光是ios,在android里也有坑,所以可以优先考虑对要分享的页面直接刷新,或是采用多页方式。不过多页体验会差一些。如果要用单页,就需要hack

可以判断系统,如果是ios,记录进入应用时的url,用这个url进行签名,只签名一次就可以了,因为后面的路由变化微信感知不到。

其实还有最简单的解决办法,就是不用 history方式,而直接用hash方式来路由,虽然难看,但可以解决所有问题。而且对于android 6.2以下,这也是唯一解决办法,因为android 6.2以下微信不支持pushState。

参考

我叫杜宏伟,前端开发。

一直想写博客,在2018的年的最后几天,终于上线了。

对于前端开发,一个特点就是太零散,很容易会了后面忘了前面,所以归纳总结很重要。再有就是分享,做前端好多年,以前都是看你们写的文章, 现在我也开始写一些,希望可以帮到入行的小伙伴。微信号 duhongwei5775

欢迎转载,只需注明作者,出处即可

版权说明:署名 4.0 国际(CC BY 4.0)