当前位置: 首页 > Web前端 > vue.js

vue history路由模式下ios微信分享首次签名失败,二次刷新后成功

时间:2023-04-01 12:27:49 vue.js

在vue历史路由模式下,ios微信分享第一次签名失败,第二次刷新后成功使用网站时,在ios端会报错为无效签名(invalidsignature)。Android端正常问题分析:我在网上花了很多时间。原因是微信中ios的浏览器机制与android不同,存在IOS缓存问题,与IOS不同。对于单个页面的优化,通俗的说就是android在跳转到页面的时候会刷新当前url,而ios不会,因为ios是通过历史记录进来的,不会刷新url,所以会造成签名失败。比如从A页面(http://xxx.com/A)跳转到B页面(http://xxx.com/B)后,由于ios是操作的浏览器历史记录,所以ios上的微信浏览器side锁定的url仍然是页面A的url,根据官方文档,同一个url只需要调用一次。对于url变化的SPA的webapp,可以在每次url变化时调用。目前安卓微信客户端不支持pushStateH5是一个新特性,所以使用pushState实现web应用页面会导致签名失败。此问题将在Android6.2中修复。所有IOS微信浏览器验证微信jssdk签名时,需要的url还是第一次进入应用。URL,不是当前页面的URL使用的版本:vue@2.6.11weixin-js-sdk@1.6.0解决方案router.beforeEach((to,from,next)=>{varu=navigator.userAgent;varIOS=!!u.match(/\(i[^;]+;(U;)?CPU.+MacOSX/);//ios终端//修复iOS版微信分享HTML5History兼容问题if(IOS&&to.path!==location.pathname){//这里不能用location.replacelocation.assign(to.fullPath)}else{next()}})其他问题微信通过外链访问页面,share出来的还是链接,不会有自定义的卡片形式。可能跟之前官方关于《微信外部链接内容管理规范》更新的公告有关。解决方法:只有打开公众号菜单中的链接才能正常分享名片;您可以将链接加入书签,然后打开分享卡片;把链接改成二维码,扫描二维码进入分享后也是一张卡片。如有问题请联系作者并及时更正