# 7.2:网页加载(Web)

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

# 7.2.1:限制与约束

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

# 7.2.2:Web定义介绍

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

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

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

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

简单样例如下所示:

@Entry @Component struct WebTest {

  // Web控制器
  private webController: WebController = new WebController();

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

      Button("Web测试")
        .onClick(() => {
        	// 点击Button,执行html的test()方法
          this.webController.runJavaScript({
            script: "test()"
          })
        })

      Web({
        src: "/pages/test.html",
        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
28
29

test.html 网页内容如下所示:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript">
      function test() {
        alert("button click");
      }
    </script>
  </head>

  <body>
    <button onclick="test()" type="button">Button Click</button>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

以上样例,页面运行后 Web 组件加载 test.html 页面,点击 html 页面上或者本地的按钮时弹出一个对话框。

# 7.2.3: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 对象中调用该对象的方法。所有参数不支持更新。

📢: Web 组件的属性方法比较多,笔者仅仅介绍常用的,有关更多属性的用法,读者请自行查阅文档。

# 7.2.4:Web事件介绍

declare class WebAttribute extends CommonMethod<WebAttribute> {
  onPageBegin(callback: (event?: { url: string }) => void): WebAttribute;
  onPageEnd(callback: (event?: { url: string }) => void): WebAttribute;
  onProgressChange(callback: (event?: { newProgress: number }) => void): WebAttribute;
  onTitleReceive(callback: (event?: { title: string }) => void): WebAttribute;
  onAlert(callback: (event?: { url: string, message: string, result: JsResult }) => boolean): WebAttribute;
  onConsole(callback: (event?: { message: ConsoleMessage }) => boolean): WebAttribute;
  onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void): WebAttribute;
  onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void): WebAttribute;
}
1
2
3
4
5
6
7
8
9
10
  • onPageBegin:网页开始加载时触发该回调,且只在 主frame 触发,iframe或者frameset的内容加载时不会触发此回调。
  • onPageEnd:网页加载完成时触发该回调,且只在 主frame 触发。
  • onProgressChange:网页加载进度变化时触发该回调,newProgress 的取值范围为[0 ~ 100]。
  • onTitleReceive:网页 document 标题更改时触发该回调。
  • onAlert:H5 页面内调用 alert() 时触发该回调。
  • onConsole:H5 页面内调用 console() 方法时的回调。
  • onFileSelectorShow:H5 页面 input 标签的 typeflie 时,点击按钮触发该回调。

# 7.2.5:WebController定义介绍

WebController 用来控制Web组件的各种行为,一个 WebController 对象只能控制一个 Web 组件,且必须在 Web 组件和 WebController 绑定后,才能调用 WebController 上的方法。

declare class WebController {
  constructor();
  onInactive(): void;
  onActive(): void;
  clearHistory(): void;
  runJavaScript(options: { script: string, callback?: (result: string) => void });
  loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string });
  loadUrl(options: { url: string | Resource, headers?: Array<Header> });
  accessBackward(): boolean;
  accessForward(): boolean;
  accessStep(step: number): boolean;
  backward();
  forward();
  // 省略部分方法
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • onInactive:设置 Web 组件进入未激活状态。
  • onActive:设置 Web 组件进入激活状态。
  • clearHistory:清除所有前进后退记录。
  • runJavaScript:异步执行 JS 脚本,并通过回调方式返回脚本执行的结果。该方法需要在 loadUrl() 完成后,比如 onPageEnd() 中调用。
  • loadData / loadUrl:加载指定的网页内容。
  • accessBackward / accessForward:页面是否可以前进或后退,即当前页面是否有前进或者后退的历史记录。
  • forward / backward:按照历史栈,前进或者后台一个页面。

# 7.2.6:Web完整样例

@Entry @Component struct WebTest {

  private webController: WebController = new WebController();

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

      Row({space: 10}) {
        Button("刷新")
          .onClick(() => {
            this.webController.refresh();
          })

        Button("加载")
          .onClick(() => {
            this.webController.loadUrl({
              url: "/pages/login.html"
            })
          })

        Button("执行JS")
          .onClick(() => {
            this.webController.runJavaScript({
              script: "test()"
            })
          })
      }

      Row({space: 10}) {
        Button("前进")
          .onClick(() => {
            this.webController.forward();
          })

        Button("后退")
          .onClick(() => {
            this.webController.backward();
          })

        Button("清除记录")
          .onClick(() => {
            this.webController.clearHistory();
          })
      }

      Web({
        src: "/pages/test.html",
        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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

样例运行结果如下图所示:

7_2_6_1

# 7.2.7:小结

本节笔者简单介绍了 Web 组件的使用,由于 Web 组件提供的方法非常多,笔者没办法把这些方法都一一列举出来,读者可执行查阅官方文档熟悉各方法的用法。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2