鸿蒙OS Web 组件

在你的HarmonyOS应用中展示网页内容或与网页交互，Web组件是不可或缺的工具。它提供了一种简便而强大的方法，将网页嵌入HarmonyOS应用，并支持页面加载、交互和调试等功能。

Web组件能做什么？

1. 页面加载：轻松加载来自网络、本地或HTML格式文本数据的页面。
2. 页面交互：实现丰富的交互方式，例如设置深色模式、在新窗口打开页面、管理位置权限和Cookie，以及与前端页面JavaScript代码交互等。
3. 页面调试：使用Devtools工具方便地调试前端页面。

如何使用Web组件加载页面

页面加载是Web组件的基本功能，根据数据来源，主要分为三种场景：

• 加载网络页面: 直接加载来自互联网的网页。
• 加载本地页面: 加载存储在应用本地资源目录中的网页文件。
• 加载HTML格式的富文本数据: 将HTML格式的字符串解析并显示为网页内容。

注意：加载网络资源时，需在应用配置文件中声明ohos.permission.INTERNET网络访问权限。

// config.json 文件
{
  "reqPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    }
  ]
}

交互示例：设置深色模式

Web组件提供三种深色模式配置：

• WebDarkMode.Off：关闭深色模式。
• WebDarkMode.On：开启深色模式，遵循前端页面设置。
• WebDarkMode.Auto：自动开启深色模式，根据系统设置调整。

以下代码示例展示了如何设置页面深色模式为自动：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.Auto;
  build() {
    Column() {
      Web({ src: 'https://www.luoshuo.net', controller: this.controller })
        .darkMode(this.mode)
    }
  }
}

如何使用Devtools工具调试前端页面

Web组件支持使用Chrome浏览器的DevTools工具进行前端页面调试。

开启Web调试

在应用代码中调用web_webview.WebviewController.setWebDebuggingAccess(true);开启调试模式。

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {  
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  aboutToAppear() {
    // 开启Web调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);  
  }  
  build() {
    Column() {
      Web({ src: 'https://www.example.com', controller: this.controller })
    }
  }
}

连接设备和端口映射

将设备连接至电脑，并配置端口映射，将设备9222端口映射至电脑9222端口。

# 添加映射
hdc fport tcp:9222 tcp:9222
# 查看映射
hdc fport ls

打开DevTools

在电脑端Chrome浏览器输入chrome://inspect/#devices，识别设备后点击inspect链接，打开DevTools进行调试。

总结

Web组件为HarmonyOS应用开发者提供了集成和展示网页内容的便捷方式，并配备了丰富的交互和调试功能。