记一次 微信公众号 h5页面故障

一、问题背景

2020年4月份,公司公众号的H5页面都不能正常渲染页面,一直在加载loading状态。经F12查看,是因为公司引用的talkingdata第三方打点服务发生故障,JS一直处于pending状态, 由于是script同步引入的该JS,导致页面渲染失败。

二、紧急处理办法

屏蔽掉所有的talkingdata服务

三、后续解决方案

1、首先尝试将talkingdata服务由同步引入改为异步引入,以下两种方式均为异步方式,具体如下:

第一种 asnyc方式`

<script src="https://jic.talkingdata.com/app/h5/v1?appid=..."></script>`

第二种 动态加script方式

function loadScript(url, callback){
  var script = document.createElement ("script")
  script.type = "text/javascript";
  script.async = true;
  if (script['readyState']){ //IE
      script['onreadystatechange'] = function(){
          if (script['readyState'] == "loaded" || script['readyState'] == "complete"){
              script['onreadystatechange'] = null;
              callback();
          }
      };
  } else { //Others
      script.onload = function(){
          callback();
      };
  }
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript('https://jic.talkingdata.com/app/h5/v1?appid=...', 
 function(){
   console.log('加载完成')
});

2、通过模拟该服务的pending状态,测试发现,若该JS一直pending,导致微信的JS SDK无法正常使用,例如微信支付、扫一扫等接口,并且通过console.log发现,wx.ready回调一直没有触发。
查阅资料发现,微信公众号JS SDK,wx.config注入为异步操作,并且通过为页面load完成后,才会注入成功,触发wx.ready回调。由于一直有JS在加载,页面onload事件一直未触发,导致wx.config无法注入成功,接口无法使用。

3、最终解决办法
为了不影响JS SDK功能的使用,在注入成功后,wx.ready回到函数中再动态加载talkingdata JS服务。这样既能异步加载,又能正常使用微信接口~

wx.ready(() => 
   loadScript('https://jic.talkingdata.com/app/h5/v1?appid=...', function(){console.log('加载完成')}
 })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值