# 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: WebviewController;
}

1
2
3
4
5
6
7
8

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

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

简单样例如下所示：

以上样例，页面运行后 Web 组件会自动加载我们官网：https://www.arkui.club (opens new window)，样例如下：

# 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 标签的 type 为 flie 时，点击按钮触发该回调。

# 7.2.5：WebviewController定义介绍

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完整样例

import { webview } from '@kit.ArkWeb';

let url_data = `
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 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>
`

@Entry @Component struct WebTest {

  private webController: webview.WebviewController = new webview.WebviewController();

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

        Button("加载本地资源")
          .onClick(() => {
            this.webController.loadData(
              url_data,
              "text/html",
              "utf-8"
            )
          })

        Button("执行本地JS代码")
          .onClick(() => {
            this.webController.runJavaScript("test()");
          })
      }

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

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

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

      Web({
        src: "https://www.arkui.club", // 默认加载 www.arkui.club 网址
        controller: this.webController
      })
        .width("100%")
        .height("100%")
        .onAlert((event) => {
          if (event) {
            console.log("event.url:" + event.url);
            console.log("event.message:" + event.message);
            AlertDialog.show({
              title: 'onAlert',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.result.handleCancel();
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  event.result.handleConfirm();
                }
              },
              cancel: () => {
                event.result.handleCancel();
              }
            })
          }
          return true;
        })
    }
    .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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

let callback: AsyncCallback<String> = {
    errorCode: Option<AsyncError>, data: Option<String> => match (errorCode) {
        case Some(e) => AppLog.error("callback error: errcode is ${e.code}")
        case _ =>
            match (data) {
                case Some(value) =>
                    AppLog.info("callback: get data successfully and data is ${value}")
                case _ => AppLog.error("callback: data is null")
            }
    }
}

@Entry @Component class MyView {

    let webController = WebviewController()

    func build() {
      Column(10) {
        Row(10) {
          Button("刷新")
            .onClick({ =>
              this.webController.refresh();
            })

          Button("加载本地资源")
            .onClick({ =>
              this.webController.loadUrl(@rawfile("index.html"))
            })

          Button("执行本地JS代码")
            .onClick({ =>
              this.webController.runJavaScript("test()", callback);
            })
        }

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

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

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

        Web(
          src: "https://www.arkui.club", // 默认加载 www.arkui.club 网址
          controller: this.webController
        )
          .width(100.percent)
          .height(100.percent)
          .onPageBegin({event =>
               PromptAction.showToast(message: "onPageBegin: ${event.url}")
            })
            .onPageEnd({event =>
                PromptAction.showToast(message: "onPageEnd: ${event.url}")
            })
      }
      .width(100.percent)
      .height(100.percent)
      .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
58
59
60
61
62
63
64
65
66
67
68
69
70
71

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

# 7.2.7：小结

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

← 7.1：视频播放（Video） 7.3：手势密码（PatternLock） →

请作者喝杯咖啡

欢迎加入鸿蒙技术交流群：695438501

津公网安备 12011402001367号

津ICP备2020008934号-2

中央网信办互联网违法和不良信息举报中心

天津市互联网违法和不良信息举报中心