HarmonyOS开发-ArkWeb开发指导

标题ArkWeb简介

ArkWeb（方舟Web）是HarmonyOS应用程序框架中的Web组件，用于在应用程序中显示Web页面内容，为开发者提供以下三大能力：

页面加载：支持加载网络页面、本地页面、HTML格式文本数据。
页面交互：支持深色模式、新窗口打开、位置权限管理、Cookie管理、JavaScript互调等。
页面调试：支持使用DevTools工具调试前端页面，使用crashpad收集崩溃信息。

ArkWeb组件的生命周期

Web组件提供丰富的生命周期回调接口，开发者可据此感知状态变化并进行业务处理。主要回调包括：

回调接口	说明
`onControllerAttached`	Controller绑定到Web组件时触发，推荐在此注入JS对象、设置UserAgent等。
`onLoadIntercept`	加载URL前触发，用于判断是否阻止此次访问。
`onOverrideUrlLoading`	URL将要加载时触发，返回true可中止加载。
`onInterceptRequest`	加载URL前触发，用于拦截URL并返回响应数据。
`onPageBegin`	网页开始加载时触发（仅主frame）。
`onProgressChange`	页面加载进度变化时触发。
`onPageEnd`	网页加载完成时触发（仅主frame）。
`onPageVisible`	页面主体开始加载，即将可见时触发。
`onRenderExited`	渲染进程异常退出时触发，可进行资源释放或重新加载。
`onDisAppear`	组件卸载时触发。

如下图所示：

基本属性和事件

1. 设置UserAgent

默认UserAgent格式如下：

text

Mozilla/5.0 ({deviceType}; {OSName} {OSVersion}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/{ArkWeb VersionCode} {Mobile}

2. Cookie管理

Cookie默认SameSite=Lax，仅在同源导航时发送。
使用WebCookieManager类管理Cookie，存储路径为应用沙箱下的/proc/[pid]/root/data/storage/el2/base/cache/web/Cookies。

3. 缓存与存储管理

Cache模式：
- Default：优先使用未过期缓存。
- None：先查缓存，再走网络。
- Online：仅从网络加载。
- Only：仅从缓存加载。
Dom Storage：
- Session Storage：临时存储，随会话结束释放。
- Local Storage：持久化存储，落盘在应用目录。

4. 新窗口打开页面

使用multiWindowAccess()设置是否允许新窗口打开。
通过onWindowNew()接收新窗口事件，并创建新窗口处理。

下面我们通过代码演示一下效果：

第一种方式，回调代码示例：

Html部分，本地html的文件需要放到Rawfile文件中：

复制代码

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<h1 id="text">这是一个测试信息，默认字体为黑色，调用runJavaScript方法后字体为绿色，调用runJavaScriptCodePassed方法后字体为红色</h1>
<script>
// 调用有参函数时实现。
var param = "param: JavaScript Hello World!";
function htmlTest (param) {
document.getElementById('text').style.color = 'green';
console.log(param);
}
// 调用无参函数时实现。
function htmlTest () {
document.getElementById('text').style.color = 'green';
}
// Click Me！触发前端页面callArkTS()函数执行JavaScript传递的代码。
function callArkTS () {
changeColor();
}
</script>
</body>
</html>

HarmonyOS应用代码：

复制代码

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

@Entry
@Component
struct WebComponent {
  webviewController: webview.WebviewController = new
  webview.WebviewController();

  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Button('runJavaScript')
        .onClick(() => {
          // 前端页面函数无参时，将param删除。
          this.webviewController.runJavaScript('htmlTest (param)');
        })
      Button('runJavaScriptCodePassed')
        .onClick(() => {
          // 传递runJavaScript侧代码方法。
          this.webviewController.runJavaScript(`function
changeColor(){document.getElementById('text').style.color = 'red'}`);
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController })
    }
  }
}

第二种方式，注册监听

鸿蒙侧代码：

复制代码

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

class testClass {
  constructor() {
  }

  test(): string {
    return "ArkUI Web Component";
  }

  toString(): void {
    console.log('Web Component toString');
  }
}

@Entry
@Component
struct Index {
  webviewController: webview.WebviewController = new
  webview.WebviewController();
  @State testObj: testClass = new testClass();

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.webviewController.refresh();
          } catch (error) {
            console.error(` ErrorCode:  ${(error as BusinessError).code},   Message:  ${(error as BusinessError).message}`);
          }
        })

      Button('Register JavaScript To Window')
        .onClick(() => {
          try {
            this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"],
              // 可选参数, asyncMethodList
              [],
              // 可选参数,  permission
              '{"javascriptProxyPermission":{"urlPermissionList ":[{"scheme":"resource","hos  t":"rawfile","port":"","path":""},' +
                '{"scheme":"e","host":"f","port":"g","path":"h"}],"methodList":[{"methodNam  e":"test","urlPermissionList":' +
                '[{"scheme":"https","host":"xxx.com","port":"","path":""},{"scheme":"resource   ","host":"rawfile","port":"","path":""}]},' +
                '{"methodName":"test11","urlPermissionList":[{"scheme":"q","host":"r","port    ":"","path":"t"},' +
                '{"scheme":"u","host":"v","port":"","path":""}]}]}}');
          } catch (error) {
            console.error(` ErrorCode:  ${(error as BusinessError).code},   Message: ${(error as BusinessError).message}`);
          }
        })
       Web({ src: $rawfile('index.html'), controller: this.webviewController })
      }
    }
  }

欢迎大家跟我一起学习鸿蒙开发知识，加入我的班级，

华为开发者学堂