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

项目背景

公司有一个运营同事使用的素材库,是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://yybeili.xhstdz.com/xwnews/529.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://yybeili.xhstdz.com/mobile/ , 查看更多   
最新文章
6.如何利用SEO赚取美金
众所周知,SEO(Search Engine Optimization)搜索引擎优化,是一种获取流量的方式,利用搜索引擎规则提高网站在相关搜索内的自
欧陆国际:外贸SEO应该怎么做
外贸SEO应该怎么做?外贸行业有两种线上模式:自己搭建网站、借助于B2B平台开网店,自建网站不受平台限制,推广方式也比较自由,
各个网站及搜索引擎收录地址大全
搜索引擎网站收录地址大全 【点此提交您的搜索引擎】360搜索引擎登录入口:http://info.so.360.cn/site_submit.html即刻
国内自动驾驶汽车排名
国产自动驾驶汽车有哪几款?国内自动驾驶汽车排名随着大家对于自动驾驶需求的日益增加,随着自动驾驶技术的进步,慢慢的诞生了越
只会外链分享?那你可能错过了jBox“共享”这座宝库
jBox交大云盘交大人的专属“聚宝盘”自助扩容、高速传输和市面上所有网盘一样,jBox可通过外链实现文件分享,这或许也是SJTUer目
21个Python爬虫项目代码,微信、淘宝、豆瓣、知乎、微博等
今天为大家整理了23个Python爬虫项目。整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心,所有链接指向GitHub
【flagship搜狗手机输入法下载】三星flagship搜狗手机输入法12.1.1免费下载
搜狗输入法,拥有超大中文词库,输入更加精准,智能。搜狗智能旺仔带你用表达,斗图,妙语,输入更加有趣。******特色功能******
免费行情网站app入口:免费行情神器!随时随地掌握市场动态的入口-你值得拥有!
投资市场瞬息万变,但你是否因为信息滞后错失过机会?又或者为了寻找靠谱的行情工具在茫茫软件海洋中迷失?今天要向你推荐一款绝对
2024年10大AI生成PPT工具推荐(12月)
在数字化时代,AI驱动的PPT生成工具正在彻底改变我们制作和展示PPT的方式。这些工具利用人工智能技术简化创建流程,提升视觉吸引
7995wx鲁大师视频:探究鲁大师如何帮助您全面提升计算机性能!
在如今高速发展的科技时代,计算机已成为我们日常生活中不可或缺的重要工具。无论是工作、学习,还是娱乐,电脑的性能直接影响着
相关文章