HarmonyOS ArkUI实战开发-网页加载（Web）_harmony onerrorreceive

移动应用开发中，网页使用的场景非常多，比如在APP内安排一个优惠活动啥的，就可以直接加载一个H5页面高效并且及时，也省去了使用原生开发要升级版本的麻烦，ArkUI开发框架提供了 Web 组件来加载一个网页，本节笔者简单介绍一下 Web 组件的用法。

限制与约束

• 加载网络资源时，需要添加 ohos.permission.INTERNET 权限。

Web定义介绍

interface WebInterface {
  (value: WebOptions): WebAttribute;
}

declare interface WebOptions {
  src: string | Resource;
  controller: WebviewController;
}
1
2
3
4
5
6
7
8

使用 Web 组件时，需要传递一个 WebOptions 类型的参数， WebOptions 类型说明如下：

• src：待加载的网页资源地址。
• controller：页面控制器，主要控制 Web 组件各种行为，一个 WebController 对象只能控制一个 Web 组件，且必须在 Web 组件和 WebController 绑定后，才能调用 WebController 上的方法。

简单样例如下所示：

import webview from '@ohos.web.webview';

@Entry @Component struct WebTest {

  // Web控制器
  private webController: WebviewController = new webview.WebviewController();

  build() {
    Column({ space: 10 }) {

      Text("www.arkui.club")
        .fontSize(25)
        .backgroundColor(Color.Pink)

      Web({
        src: "https://www.arkui.club", // 默认加载 www.arkui.club 网址
        controller: this.webController
      })
        .width("100%")
        .height("100%")
    }
    .width('100%')
    .height("100%")
    .padding(10)
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Web属性介绍

declare class WebAttribute extends CommonMethod<WebAttribute> {
  javaScriptAccess(javaScriptAccess: boolean): WebAttribute;
  fileAccess(fileAccess: boolean): WebAttribute;
  onlineImageAccess(onlineImageAccess: boolean): WebAttribute;
  domStorageAccess(domStorageAccess: boolean): WebAttribute;
  imageAccess(imageAccess: boolean): WebAttribute;
  mixedMode(mixedMode: MixedMode): WebAttribute;
  javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>, controller: WebController }): WebAttribute;
  databaseAccess(databaseAccess: boolean): WebAttribute;
  userAgent(userAgent: string): WebAttribute;
  // 省略部分方法
}
1
2
3
4
5
6
7
8
9
10
11
12

• javaScriptAccess：设置是否允许执行 JS 脚本，默认为 true ，表示允许执行。
• fileAccess：设置是否开启通过 $rawfile(filepath/filename) 访问应用中 rawfile 路径的文件， 默认为 false，表示不启用。
• fileFromUrlAccess：设置是否允许通过网页中的 JS 脚本访问 $rawfile(filepath/filename) 的内容，默认为 false ，表示未启用。
• imageAccess：设置是否允许自动加载图片资源，默认为 true ，表示允许。
• onlineImageAccess：设置是否允许从网络加载图片资源（通过 HTTP 和 HTTPS 访问的资源），默认为 true ，表示允许访问。
• domStorageAccess：设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认为 false ，表示未开启。
• mixedMode：设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认为 MixedMode.None ，表示不允许加载 HTTP 和 HTTPS 混合内容。
• databaseAccess：设置是否开启数据库存储 API 权限，默认为 false ，表示不开启。
• userAgent：设置用户代理。
• javaScriptProxy：注入 JavaScript 对象到 window 对象中，并在 window 对象中调用该对象的方法。所有参数不支持更新。