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;
复制代码

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