react解决ios微信分享的问题

最近在用react做微信h5的项目开发，在配置微信分享的时候，遇到一个问题，在安卓的手机上可以很正常的分享，但是在ios上却不能正常分享。于是花了两个小时解决问题以及研究出现这样的问题的根本所在。。。

问题描述

在安卓上可以正常分享，在ios上不能正常分享，但是如果在配置微信分享的当前页面刷新一下（微信右上角点开），则在ios上就可以正常分享。并且在之后通过路由进入这个页面同样也可以正常分享了！！ios不能分享的时候，微信分享的debug弹框显示的是微信签名错误

解决方法一：

一阵无语之后，感慨居然还有这种操作。但其实操作到这，我已经是可以很巧妙的把问题解决的，就是在首次进入分享功能的页面时，让页面自动刷新一次。那怎么保证只刷新一次，而不会导致每次进来就刷新呢？答案很简答，在缓存里设置标识，我选择的是sessionStorage，因为每次关闭微信h5，sessionStorage就会自动的被清除，这就很好的保证了我每次打开项目进入分享页面都会刷新一次

javascript
const _not_first_invite = sessionStorage.getItem('not_first_invite');
if ( !_not_first_invite ) {
    sessionStorage.setItem('not_first_invite', '1');
    window.location.reload();
}
复制代码

当然这种操作是比较取巧的，但是并没有深入到这个问题的根本

解决方法二：

在洞悉第二种方法之前，我的同事跟我说他之前用PHP做的时候并不会出现ios不能分享的问题，那我首先想到的是传统前端页面跳转的特点，那就是每次跳转都会刷新。然后我又想了想我当前的项目，是用react做的单页面应用，单页面应用的跳转是靠路由驱动的，如react-router、vue-router等。分析到这里，心里其实还是很茫然，于是乎我用一台ios和一台Android来做测试。因为获取微信签名是需要前端提供当前页面的url，这时候我提出一个猜想，微信分享的签名url必须是进入项目后刷新的第一个页面的url！！因为我试验了一下，ios微信右上角点击获取链接，这个链接并不是我分享页面的链接，而是我第一次进入项目第一个页面的链接。而我用window.location.href获取并用来签名的是当前分享页面的链接，不行！！而刷新之后就正常了，右上角获取当前链接果然也是分享页面的链接，当然我获取的也是这个链接，所以就没问题了。那么很明显了，iOS需要使用进入项目第一个页面的URL获取签名！！于是想办法保存进入项目的第一个页面的URL并去获取签名，果然，iOS可以正常分享了。但是看了看Android却不能分享了，而原来却没有问题，那么是不是安卓每次路由切换都重新配置签名呢？不管怎么样还是区分一下手机类型

javascript
const current_url = iosMobile() ? sessionStorage.getItem('first_enter_url') : window.location.href;
复制代码

这样两个端就没有问题了！！