项目背景
公司有一个运营同事使用的素材库，是h5开发的企微插件，原本素材主要是公司域名的文章，点击文章可以进入详情页查看文章内容，并且可以转发客户、群发客户、发朋友圈等。现在希望可以支持非公司域名的文章，主要以微信公众号的文章为主，兼顾一些其他文章，还需要统计分享出去的链接访问量，根据分享OA人员进行统计
原本设计方案
详情页使用iframe展示文章，底部是功能按钮，相当简单
开搞
百度之后发现，原来这是微信防盗链导致的
但是，虽说微信的防盗链很牛逼，但是也是有解决方案的，那就是cors-anywhere，但是目前该项目是停运的了，需要手动下载代码，起一下服务即可
https://github.com/Rob–W/cors-anywhere
接下来就可以通过代理和一系列字符串操作加载微信公众号文章了
主要就几个点
- 设置X-Requested-With为XMLHttpRequest，否则会请求报错
- 将图片的data-src属性转成src属性
- 将css文件中的href="//res.wx.qq.com xxx"改成带href="https://res.wx.qq.com xxx"前缀的，不然会请求相对路径
- 微信拦截所有图片访问受限，会出现图片加载不了问题：添加一下代码解决
- 解决背景图片不展示问题
- 主体内容不可见：获取rich_media_content元素，将元素的visibility设置为可见
具体代码如下：
到这里以为就很简单了，剩下的就是埋点统计访问量的问题了，写一个中间页，转发分享时候把中间页地址带上要跳转的url、分享用户信息等分享出去，在中间页埋点，埋点成功后通过重定向到文章地址就解决问题了
然后就写下了这样几行代码，其中神策的pageview事件在setTitle完成，url的公共参数在神策js已经处理，这里省略
本以为这样已经没问题了，其实在浏览器上确实没有问题了
然后，坑来了
当我使用微信打开中间页时候，可以成功跳转微信公众号文章，但是当我返回上一页的时候，居然是展示了中间页，微信浏览器重定向居然不起作用？？重定向之后的中间页的页面栈还在，所以导致重定向到微信文章后，有两个页面，这样就会出现死循环，看了文章返回中间页，然后触发useEffect，又跳转微信公众号文章
解决方案
既然已经知道是微信浏览器不支持重定向，那就想加个状态判断，如果是已经跳转过微信文章，就关闭微信浏览器退出即可，这时候首先想到的是加个state存一下状态即可，但是后来发现，在微信文章返回中间页，中间页是重新加载的，所以不能用state保存状态了，只能用sessionStorage进行状态存储，跳转之前设置sessionStorage，后续判断sessionStorage有值的话，直接关闭微信浏览器即可，其中使用window.WeixinJSBridge进行浏览器的关闭
注意：本来关闭微信浏览器是想用wx.closeWindow api的，但是发现该api只能是手动触发，否则不起作用，所以转成使用window.WeixinJSBridge.call(“closeWindow”)
还有高手
到这里，本以为已经完美解决问题了（测试机是安卓手机），上到ios测试的时候，又出现问题了，在ios的微信浏览器中，在微信文章返回中间页时候，是不会触发页面的重新加载、也不会触发useEffect的（企微对微信聊天框也会这样），导致没有触发判断sessionStorage的时机，最终，发现在返回中间页的时候，会触发window.onpageshow，只要判断是ios并且是微信的情况下，在window.onpageshow判断sessionStorage即可
最终代码如下：