HarmonyOS鸿蒙Next中如何解决Web组件加载抖音页面出现白屏的问题

【问题现象】

Web组件加载抖音页面闪一下后出现白屏，然而加载其他H5页面是正常的。

【背景知识】

ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容。常见使用场景包括。

• 应用集成Web页面：应用可以在页面中使用Web组件，嵌入Web页面内容，以降低开发成本，提升开发、运营效率。
• 浏览器网页浏览场景：浏览器类应用可以使用Web组件，打开三方网页，使用无痕模式浏览Web页面，设置广告拦截等。
• 小程序：小程序类宿主应用可以使用Web组件，渲染小程序的页面。

Web组件提供了丰富的组件生命周期回调接口，通过这些回调接口，开发者可以感知Web组件的生命周期状态变化，进行相关的业务处理。常用的回调接口有：

• onAlert：网页触发alert()告警弹窗时触发回调。
• onConfirm：网页调用confirm()告警时触发此回调。
• onErrorReceive：网页加载遇到错误时触发该回调。
• onHttpErrorReceive：网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调。

ArkWeb（方舟Web）提供了WebviewController，通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法（静态方法除外）。常用的控制方法有：

• setWebSchemeHandler(scheme: string, handler: WebSchemeHandler): void为当前Web组件设置WebSchemeHandler，WebSchemeHandler类用于拦截指定scheme的请求。

【定位思路】

Web组件加载抖音页面闪一下后出现白屏，极可能因为请求数据的过程出现了异常。因此，首先使用Web组件提供的网页加载遇到错误时才会触发的onErrorReceive回调，并打印出如下错误信息：

errorCode=ERR_UNKNOWN_URL_SCHEME，未知 scheme

根据上面的报错信息，要求手动填入WebSchemeHandler。

【解决方案】

snssdk1128是抖音的URL Scheme，通过特定格式的snssdk1128链接，可以实现从其他应用或网页直接跳转到抖音的指定页面。对于Web组件，通过使用setWebSchemeHandler方法为当前Web组件设置WebSchemeHandler。

示例代码如下：

import { webview } from '@kit.ArkWeb';

webviewController: webview.WebviewController = new webview.WebviewController();
schemeHandler: webview.WebSchemeHandler = new webview.WebSchemeHandler();

Web({ controller: this.webviewController, src: 'https://www.douyin.com/video/XXXXXXXXXXXXXX' })
  .onControllerAttached(() => {
    this.schemeHandler.onRequestStart((request: webview.WebSchemeHandlerRequest,
      resourceHandler: webview.WebResourceHandler) => {
      return true;
    })
    // 为当前Web组件设置WebSchemeHandler
    this.webviewController.setWebSchemeHandler('snssdk1128', this.schemeHandler);
  })

手动填入WebSchemeHandler后，再次加载抖音页面，可正常展示。