生活资讯
h5企微插件之WeixinJSBridge、iframe通过cors-anywhere加载微信文章实践
2024-12-16 15:30  浏览:64

项目背景

公司有一个运营同事使用的素材库,是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即可

最终代码如下

 

总结

    以上就是本篇文章【h5企微插件之WeixinJSBridge、iframe通过cors-anywhere加载微信文章实践】的全部内容了,欢迎阅览 ! 文章地址:http://ktsh.xhstdz.com/xwnews/529.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://ktsh.xhstdz.com/mobile/ , 查看更多   
最新文章
成都SEO服务,助您企业网站搜索引擎排名飞跃
成都专业SEO服务,助力企业网站优化,提升搜索引擎排名,实现网站流量增长,助力企业品牌提升。全方位SEO策略,定制化服务,助您
11 个全球最好的 AI 文本转语音工具(2024 年)
人工智能技术在2024年继续在进步,除了大家所熟知的 ChatGPT 相关的大语言模型的出现,带动了一系列 AI应用的兴起,另外在语音人
烧饼修改器免root版本安卓 v20.0.6 官方正版
烧饼修改器是一款非常好用的加速器app,完美的解决了你的所有需求,超多软件功能让你的游戏变的更加的游戏,操作起来非常的简单
如何提升网站关键词的优化排名?
关键词是用户与网站的链接纽带,搜索引擎平台则可以诠释为一种媒介,用户通过搜索引擎搜索关键词到达网站页面则是“
揭秘空间SEO,网站排名提升的独家秘籍
深度解析空间SEO,揭秘提升网站空间排名的秘诀。通过优化空间配置、合理布局、关键词研究、外链建设等策略,实现网站在搜索引擎
Bing网站管理员工具:完整分步教程
您可能已经知道Bing是第二大搜索引擎,对吗?所以你肯定已经设置了必应网站管理员工具。或者也许你还没有,因为你从来没有真正考
百度外链收录工具,助你网站排名飙升
在此次交流中,我将聚焦于对百度外链收录查询工具的实践经验分享。身为网站运营者,皆知外链之重要性——其既关乎网站排名与流量
实测ChatGPT插件真香用法,视频一键变脑图,高数作业轻松拿捏
原创 关注前沿科技 量子位梦晨 丰色 发自 凹非寺量子位 | 公众号 QbitAISam Altman诚不我欺:像用iPhone一样使用ChatGPT,就是现
chatGPT中文免费版app功能
chatGPT中文免费版app,推荐给大家,是一款可以让我们免费在线使用ai智能机器人进行聊天互动以及交友的神奇工具。它通过后台代码
昆明网站制作工作室:打造完美网站的全面指南313
在当今竞争激烈的数字时代,拥有一个精心制作的网站对企业的成功至关重要。对于位于昆明的企业来说,选择一个经验丰富的网站制作
相关文章