HarmonyOS开发-ArkWeb开发指导

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

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

华为开发者学堂