关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,可是在IOS设备上一直报错签名失效问题
问题描述:在Vue开发过程当中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常。在安卓上一切正常。 可是!!!在IOS上反复报签名错误。vue
如下是真机测试截图,划掉黑线的是我我的IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话很少说上图!!!!浏览器
个人代码:缓存
需求描述:须要从首页进入活动详情页,而后在详情页分享详情页面内容。因此须要带参数传参,一般vue传参经过params,query,字符串拼接这三种方式进行跳转传参
问题分析:由于苹果分享会是调取签名失败是由于:苹果在微信中浏览器机制和安卓不一样,有IOS缓存问题,和IOS对单页面的优化问题,通俗点说安卓进行页面跳转分享时会刷新当前的url,而苹果不会,苹果是经过历史记录进来的,不会刷新url因此会致使签名失败(这里解释的可能不够详细,能够去百度)。微信
由于需求只须要分享当前页面的时候有自定义内容,其余页面分享出去是公众号都无所谓,主要是活动,因此就用了以下解决办法!!!!微信开发
由于vue的history在IOS的微信分享时不会刷新,可是咱们又要作自定义分享。我在网上也看了不少,好比什么beforerouteEnter的路由判断,或者写在Vue.prototype.Wxshare()的原型链中等,看起来都太麻烦,不够简单粗暴,可是这些方法能够好像能够作到判断每个分享页面的自定义内容。而我只须要当前分享特定的单一页面,那么咱们在A页面跳转B页面(须要分享的页面)就不用vue的history的push来跳转传参,咱们用!咱们用!咱们用!window.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模式我也不肯定是否真的能够,有兴趣的能够尝试,尝试后欢迎留言!!)url
如下是真机测试成功!spa