HarmonyOS---基于Web组件构建网络应用

本文主要是介绍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>

这篇关于HarmonyOS---基于Web组件构建网络应用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！