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

最新推荐文章于 2024-09-30 15:42:36 发布

煸橙干儿~~

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量843

点赞数 8

分类专栏： HarmonyOS 文章标签：前端 harmonyos

本文链接：https://blog.csdn.net/sinat_34896766/article/details/141682654

版权

HarmonyOS 专栏收录该内容

104 篇文章 3 订阅

订阅专栏

一、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>