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

原创

小帅聊鸿蒙

发布于 2024-10-07 20:46:34

1.6K0

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

限制与约束

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

Web定义介绍

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

declare interface WebOptions {
  src: string | Resource;
  controller: WebviewController;
}

使用 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)
  }

}

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;
  // 省略部分方法
}

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 组件的属性方法比较多，笔者仅仅介绍常用的，有关更多属性的用法，读者请自行查阅文档。

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;
}

onPageBegin：网页开始加载时触发该回调，且只在 主frame 触发，iframe或者frameset的内容加载时不会触发此回调。
onPageEnd：网页加载完成时触发该回调，且只在 主frame 触发。
onProgressChange：网页加载进度变化时触发该回调，newProgress 的取值范围为0 ~ 100。
onTitleReceive：网页 document 标题更改时触发该回调。
onAlert：H5 页面内调用 alert() 时触发该回调。
onConsole：H5 页面内调用 console() 方法时的回调。
onFileSelectorShow：H5 页面 input 标签的 type 为 flie 时，点击按钮触发该回调。

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();
  // 省略部分方法
}

onInactive：设置 Web 组件进入未激活状态。
onActive：设置 Web 组件进入激活状态。
clearHistory：清除所有前进后退记录。
runJavaScript：异步执行 JS 脚本，并通过回调方式返回脚本执行的结果。该方法需要在 loadUrl() 完成后，比如 onPageEnd() 中调用。
loadData / loadUrl：加载指定的网页内容。
accessBackward / accessForward：页面是否可以前进或后退，即当前页面是否有前进或者后退的历史记录。
forward / backward：按照历史栈，前进或者后台一个页面。

Web完整样例

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

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%")
    }
    .width('100%')
    .height("100%")
    .padding(10)
  }
}