当前位置: 首页 > 科技观察

Vue开发微信H5微信分享签名失败解决方法

时间:2023-03-12 09:15:25 科技观察

关于Vue中路由使用history模式,Android上开发微信H5页面分享时签名有效成功,但在IOS设备上签名失败问题一直报错问题描述:在Vue开发过程中,路由使用History模式,使用微信分享时,在微信开发者工具上一切正常。在Android上一切正常。但!!!IOS上反复报签名错误。以下为真机测试截图。划掉的黑线是我个人的IOS设备,已作为服务账号共享。那么下面分享的自定义内容对于安卓来说是正常的。先不说上图了!!!!我的代码:需求说明:需要从首页进入活动详情页,然后在详情页分享活动详情页的内容。所以需要用参数传递参数。通常vue通过params、query、字符串拼接三种方式传递参数进行跳转和传递参数问题分析:因为苹果的分享会调用签名失败原因:苹果在微信中的浏览器机制与安卓不同,存在IOS缓存问题,以及IOS单页优化问题。通俗的说,安卓在跳转分享页面的时候会刷新当前的url,而苹果不会。Apple是通过历史记录进来的,不会刷新URL会导致签名失败(这里解释的可能不够详细,可以自行百度)。因为需求只需要在分享当前页面的时候有自定义内容,其他页面分享就没有关系公众号,主要是为了活动,所以采用了下面的解决方案!!!!因为vue的历史分享在IOS的微信上是不会刷新的,但是我们要重新做自定义分享。在网上也看了很多,比如beforerouteEnter的路由判断,或者vue的原型链里面写的。共享页面的自定义内容。而我目前只需要分享一个特定的单个页面,所以我们从A页面跳转到B页面(需要分享的页面)跳转传参不用vue的历史推送,我们用!我们用!我们用!窗户。location.href="...."跳过传参,重要的事情说三遍!!!!使用:window.location.href="...."!!!window.location.href="..."!!!window.location.href="..."!!!下面是代码!!!注释掉的部分是我一开始使用params传参,所以会出现我上面提到IOS上的SPA页面不会刷新url,但是原生的window.location.href可以解决这个问题!!!这样我们就可以在子页面的create生命周期中拦截url中的字符串,把需要的参数拦截下来赋值给data就可以使用了。下面是截获的子页面收到的数据串(这里的截获字符串是直接复制找的,赶时间的可以自己写,一次性截获3个字符串)!!!这样我们的分享IOS需求就实现了,上面的微信分享配置的代码就不用改了!!但是这种方式只适合分享特定的页面,如果用户需要为每个页面分享不同的页面自定义内容,可以去网上找找其他的路由守卫来判断,或者使用Hash模式开发(我是不确定Hash模式是否真的可以,有兴趣的可以试试,试过后请留言!!)下面是真机测试成功!