推广 热搜: 广告  优化  项目  服务  百度  系统  排名    账号  设备 

h5企微插件之WeixinJSBridge、iframe通过cors-anywhere加载微信文章实践

   日期:2024-12-16     作者:9s4pe    caijiyuan  
核心提示:项目背景 公司有一个运营同事使用的素材库,是h5开发的企微插件,原本素材主要是公司域名的文章,点击文章可

项目背景

公司有一个运营同事使用的素材库,是h5开发的企微插件,原本素材主要是公司域名的文章,点击文章可以进入详情页查看文章内容,并且可以转发客户、群发客户、发朋友圈等。现在希望可以支持非公司域名的文章,主要以微信公众号的文章为主,兼顾一些其他文章,还需要统计分享出去的链接访问量,根据分享OA人员进行统计

h5企微插件之WeixinJSBridge、if<em></em>rame通过cors-anywher<em></em>e加载微信文章实践

原本设计方案

详情页使用iframe展示文章,底部是功能按钮,相当简单

开搞

百度之后发现,原来这是微信防盗链导致的

但是,虽说微信的防盗链很牛逼,但是也是有解决方案的,那就是cors-anywhere,但是目前该项目是停运的了,需要手动下载代码,起一下服务即可

https://github.com/Rob–W/cors-anywhere

接下来就可以通过代理和一系列字符串操作加载微信公众号文章了

主要就几个点

  1. 设置X-Requested-With为XMLHttpRequest,否则会请求报错
  2. 将图片的data-src属性转成src属性
  3. 将css文件中的href="//res.wx.qq.com xxx"改成带href="https://res.wx.qq.com xxx"前缀的,不然会请求相对路径
  4. 微信拦截所有图片访问受限,会出现图片加载不了问题:添加一下代码解决
  5. 解决背景图片不展示问题
  6. 主体内容不可见:获取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即可

最终代码如下

 

总结

本文地址:http://nhjcxspj.xhstdz.com/xwnews/529.html    物流园资讯网 http://nhjcxspj.xhstdz.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

 
 
更多>同类生活信息

文章列表
相关文章
最新动态
推荐图文
生活信息
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号