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

关于Vue中路由使用的历史模式，在开发微信H5页面共享时，Android上的签名是有效且成功的，但IOS设备上总是报告签名无效的问题

问题描述：开发过程中，当路由处于历史模式，使用微信共享时，微信开发者工具上一切正常。安卓上一切正常。但是！在IOS上反复报告签名错误。

下面是实机测试的截图，黑线划掉，始终是我个人IOS设备共享的服务号，然后下面分享的定制内容是安卓共享正常，上面就不多说了！

我的代码是：

需求描述：需要从首页进入活动详情页，然后在详情页分享详情页的内容。因此，有必要用参数传递参数。通常，vue通过参数跳转、查询和字符串拼接来传递参数

问题分析：苹果分享会无法取回签名是因为苹果在微信上的浏览器机制与安卓不同，单页存在IOS缓存问题和IOS优化问题。通俗来说，安卓在分享页面跳转时会刷新当前url，苹果不会，苹果是通过历史记录进来的，不会刷新url，会导致签名失败(这里的解释可能不够详细，可以去百度)。

因为需求只需要分享定制内容的当前页面，其他页面作为微信官方账号分享也没关系，主要是活动，所以采用以下解决方案！

因为在IOS中微信上分享的时候vue的历史不会刷新，但是我们要做自定义分享。我在网上也看了很多，比如BeforeRouter的路由判断，或者用Vue.prototype.Wxshare()写的原型链，看起来太麻烦了，也不简单粗暴，但是这些方法似乎可以判断每个共享页面的定制内容。而我目前只需要分享一个特定的单个页面，所以当我们从页面A跳转到页面B(需要分享的页面)时，不需要推vue的历史跳转传递参数，我们用！我们用它！我们用它！Window.location.href=' . 'rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow '来跳转并传递引用。重要的事情说三遍！

Use: window.location.href=' . '！window.location.href=' .window.location.href=' .这是密码！

注释部分一开始是params传递的，所以会出现我上面提到的SPA页面不会刷新IOS上url的问题，但是原来的window.location.href可以解决这个问题！这样，在子页面中，我们在创建生命周期中截取url中的字符串，截取所需的参数，并将其分配给数据，这些数据也可以使用。以下是接收数据的子页面截取的字符串(这里截取的字符串是直接复制找到的，比较匆忙，可以自己写，一次截取三个字符串)！

这样就实现了我们的IOS共享需求，我上面的微信共享配置代码就不用改了！但是，这种方法只适用于共享特定的页面。如果用户需要分享每个页面不同的定制内容，可以去网上用其他路由卫士来判断，或者用Hash模式来开发(我不确定Hash模式是否真的可以，如果有兴趣可以试试。请尝试后留言！)

以下是实机测试成功！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。