HarmonyOS---基于Web组件构建网络应用
一、Web组件介绍
Web组件是提供具有网页显示能力的组件。Web组件依赖两个参数，分别是src资源地址、controller控制器。 其中， src资源地址既支持本地资源，也支持网络资源。controller控制器是由@ohos.web.webview提供的web控制能力。
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| src | ResourceStr | 是 | 网页资源地址。如果访问本地资源文件，使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件，使用file://沙箱文件路径。 |
| controller | WebviewController | 是 | 控制器。可以控制Web组件的各种行为，如网页前进、后退等 |
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、通过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 })}}
}3、加载在线网页
当访问在线网页时，需要在module.json5文件中添加网络权限：ohos.permission.INTERNET。
"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET"}]}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 })}}
}二、Webview的基本使用
@ohos.web.webview是系统提供的基础能力，提供了许多web控制的能力。例如，WebMessagePort、 WebviewController等。
| 名称 | 说明 |
|---|---|
| WebMessagePort | 通过WebMessagePort可以进行消息的发送以及接收。 |
| WebviewController | 通过WebviewController可以控制Web组件各种行为。 |
| WebCookieManager | 通过WebCookie可以控制Web组件中的cookie的各种行为 |
| … | … |
1、WebviewController
通过WebviewController可以控制Web组件各种行为。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法（静态方法除外）。
WebviewController接口介绍：
| 接口名称 | 说明 |
|---|---|
| runJavaScript | 异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。 |
| registerJavaScriptProxy | 注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。 |
| createWebMessagePorts | 创建Web消息端口 |
三、ArkTS调用H5
runJavaScript(script: string): Promise<string>
异步执行JavaScript脚本，并通过Promise方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct WebComponent {controller: webview.WebviewController = new webview.WebviewController();build() {Column() {Web({ src: $rawfile('index.html'), controller: this.controller }).javaScriptAccess(true).onPageEnd(e => {try {this.controller.runJavaScript('test()').then((result) => {console.log('result: ' + result);}).catch((error: BusinessError) => {console.error("error: " + error);})if (e) {console.info('url: ', e.url);}} catch (error) {let e: BusinessError = error as BusinessError;console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);}})}}
}加载html文件：
<!-- index.html -->
<!DOCTYPE html>
<html><meta charset="utf-8"><body>Hello world!</body><script type="text/javascript">function test() {console.log('Ark WebComponent')return "This value is from index.html"}</script>
</html>