一、web组件的必要参数

Web组件是提供具有网页显示能力的组件。Web组件依赖两个参数，分别是src资源地址、controller控制器。其中， src资源地址既支持本地资源，也支持网络资源。controller控制器是由@ohos.web.webview提供的web控制能力。

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

二、通过src加载本地或网络资源

2.1通过$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 })
    }
  }
}

2.2 通过resource协议加载本地资源文件

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

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

2.3加载在线网页

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

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

注意：需要访问网络资源时，需要在module.json5文件中添加网络权限：ohos.permission.INTERNET。

"module": {
    "requestPermissions": [
         {"name": "ohos.permission.INTERNET"}
     ]
 }

三、Webview的基本使用

@ohos.web.webview是系统提供的基础能力，提供了许多web控制的能力。例如，WebMessagePort、 WebviewController等。

名称	说明
WebMessagePort	通过WebMessagePort可以进行消息的发送以及接收。
WebviewController	通过WebviewController可以控制Web组件各种行为。
WebCookieManager	通过WebCookie可以控制Web组件中的cookie的各种行为
…	…

WebviewController

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

WebviewController下包含runJavaScript、 registerJavaScriptProxy、 createWebMessagePorts等接口。

接口名称	说明
runJavaScript	异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。
registerJavaScriptProxy	注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。
createWebMessagePorts	创建Web消息端口

HarmonyOS中WebView和web组件的使用