【鸿蒙HarmonyOS Next实战开发】Web组件H5界面与原生交互-抽奖页面

想必很多人都经历过这样的情况：当我们点击某个应用的页面时，往往会跳转到一个类似于浏览器加载的页面，只有等到加载完成之后，才会呈现出该页面的具体内容。通常情况下，加载和显示网页的任务都是由浏览器来完成的。
而ArkUI为我们提供了Web组件，借助这一组件，我们就可以在自己的应用程序中轻松嵌入一个“浏览器”，从而便捷地展示各种各样的网页内容。

图1 web组件示例图

本文将为您介绍Web组件一些常用API的使用。

Web组件介绍

本文将为您介绍Web组件的一些常用API的使用方法。

Web组件是一种具备网页显示能力的组件。它依赖两个关键参数：src资源地址和controller控制器。其中，src资源地址既支持本地资源，也支持网络资源；controller控制器由@ohos.web.webview提供，用于控制Web组件的各种行为。

表1 Web组件参数介绍

参数名	参数类型	必填	参数描述
src	ResourceStr	是	网页资源地址。如果访问本地资源文件，使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件，使用file://沙箱文件路径。
controller	WebviewController	是	控制器。可以控制Web组件的各种行为，如网页前进、后退等

通过$rawfile加载本地资源

对于src参数，如果需要加载本地网页，可以通过$rawfile加载本地资源文件。

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

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()
  build() {
    Column() {
      // 通过$rawfile加载本地资源文件。
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}