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 = newwebview.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 = newwebview.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 })}}}欢迎大家跟我一起学习鸿蒙开发知识，加入我的班级，
华为开发者学堂