HarmonyOS4.0系统性深入开发38Web组件概述

Web组件概述

Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。

• 页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、Html格式文本数据。
• 页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。
• 页面调试：Web组件支持使用Devtools工具调试前端页面。

下面通过常见使用场景举例，来具体介绍Web组件功能特性。

Web组件概述

Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。

• 页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、Html格式文本数据。
• 页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。
• 页面调试：Web组件支持使用Devtools工具调试前端页面。

下面通过常见使用场景举例，来具体介绍Web组件功能特性。

设置深色模式

Web组件支持对前端页面进行深色模式配置。

• 通过

  darkMode()

  接口可以配置不同的深色模式，

  WebDarkMode.Off

  模式表示关闭深色模式。

  WebDarkMode.On

  表示开启深色模式，并且深色模式跟随前端页面。

  WebDarkMode.Auto

  表示开启深色模式，并且深色模式跟随系统。

  在下面的示例中, 通过darkMode()接口将页面深色模式配置为跟随系统。

  // 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: 'www.example.com', controller: this.controller })
          .darkMode(this.mode)
      }
    }
  }
  

• 通过

  forceDarkAccess()

  接口可将前端页面强制配置深色模式，且深色模式不跟随前端页面和系统。配置该模式时候，需要将深色模式配置成WebDarkMode.On。

  在下面的示例中, 通过forceDarkAccess()接口将页面强制配置为深色模式。

  // xxx.etsimport web_webview from '@ohos.web.webview';
  @Entry@Componentstruct WebComponent {  controller: web_webview.WebviewController = new web_webview.WebviewController();  @State mode: WebDarkMode = WebDarkMode.On;  @State access: boolean = true;  build() {    Column() {      Web({ src: 'www.example.com', controller: this.controller })        .darkMode(this.mode)        .forceDarkAccess(this.access)    }  }}
  

上传文件

Web组件支持前端页面选择文件上传功能，应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。

下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在onShowFileSelector()接口中收到文件上传请求，在此接口中开发者将上传的本地文件路径设置给前端页面。

• 应用侧代码。

  // xxx.ets
  import web_webview from '@ohos.web.webview';
  @Entry
  @Component
  struct WebComponent {
       
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    build()