【鸿蒙开发实战】HarmonyOS webview 组件白屏检测

前言

今天下午2:30，HDC2024将正式召开，我们将为大家揭晓鸿蒙生态、HarmonyOS NEXT的最新进展，以及开发者朋友们最期待的、非常强大的开发工具和技术。

随着鸿蒙系统越来越火爆，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

白屏异常问题介绍

Web 页面白屏是在客户端中比较常见的，Android 以及iOS 不同手机不同版本内核 会出现不同的差异问题，对于HarmonyOS Web 也会出现这种异常问题。出现白屏的原因可能由以下原因：

○网络问题 网络异常或者设备网络条件不好，尝试加载网络内容时可能导致白屏
○系统兼容问题 在线上负责多元化的设备中可能会出现系统兼容报错导致web加载异常。
○HTML、JavaScript语法兼容问题 前端语法报错或者前端框架兼容异常导致异常

对于白屏异常问题 ，我们应该合理的监控，及时更正并解决这个异常问题。

白屏检测方案

在Android 以及iOS端` 我们都知道有成熟的白屏检测方案：

○截取当前屏幕的内容，获得Bitmap
○对图片进行分片抽样检测，判断Bitmap 是否为白色图片
○针对白屏做相应的处理

在HarmonyOS 也是一样的原理 可以对图片进行缩小分片，按照小区域划分，判断这些小区域的点位的白屏信息，进行决策。

具体实现

○web 页面截屏

componentSnapshot.get

系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：

截屏事例：

Web({ src: 'https://www.baidu.com/', controller: this.webviewController })  
  .width("100%")  
  .id("id_web")
componentSnapshot.get("id_web", (error: Error, pixmap: image.PixelMap) => {  
  pixmap.getImageInfo().then((info) => {  
    console.info("image info: width=" + info.size.width + ",height=" + info.size.height + ",density=" + info.density);  
  })  
})

○定义白屏采样参数

declare class CheckParam {
  //白屏采样图片
  imageMap: image.PixelMap
  //采样图片压缩倍数
  compressRatio: number;
  //白屏采样阈值，单位：百分比
  threshold: number;
  //白屏采样比例，单位：百分比
  density: number;
  //采样区域大小
  regionSize: number;
  //采样对比颜色
  color: number;
}

○白屏检测具体实现

首先定义白屏检测的异步方法，返回是 Promise

function checkWhiteScreen(param: CheckParam): Promi