鸿蒙Next ArkWeb实战：网页加载与浏览记录管理全解析

于 2025-09-14 10:50:41 发布
阅读量501 收藏 9
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 鸿蒙 文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feathersong/article/details/151678876

在鸿蒙应用开发中，高效管理网页加载与浏览记录是提升用户体验的关键，ArkWeb提供了完整的解决方案。

HarmonyOS Next 的 ArkWeb 组件是一个强大的 Web 视图框架，允许开发者在鸿蒙应用中嵌入 Web 内容，并提供了丰富的 API 来管理网页加载、导航和用户交互。

本文将深入探讨如何使用 ArkWeb 管理网页加载与浏览记录，帮助您打造更流畅的 Web 浏览体验。

一、ArkWeb 简介与基础用法

ArkWeb 是华为鸿蒙系统提供的 Web 应用框架，允许开发者将 Web 页面嵌入到鸿蒙应用中并与之交互。它支持多种使用场景：

  • 应用集成 Web 页面：降低开发成本，提升开发效率

  • 浏览器网页浏览：打开三方网页，使用无痕模式浏览

  • 小程序渲染：作为小程序类宿主应用渲染小程序页面

基本使用方式如下：

javascript

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

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  
  build() {
    Column() {
      Web({ src: "https://www.example.com", controller: this.controller })
    }
  }
}

二、页面加载管理

ArkWeb 提供了多种页面加载方式，满足不同场景需求。

1. 加载网络页面

有两种方式加载网络页面：

使用 src 属性直接加载：

javascript

Web({ src: "https://www.example.com" })

使用 loadUrl 方法动态加载：

javascript

Web({ src: $rawfile("local.html") })
  .onControllerAttached(() => {
    this.controller.loadUrl("https://www.example.com");
  })

2. 加载本地页面

同样有两种方式加载本地页面：

使用 $rawfile 加载：

javascript

Web({ src: $rawfile("local.html") })

使用 loadUrl 加载本地页面：

javascript

Web({ src: $rawfile("local.html") })
  .onControllerAttached(() => {
    this.controller.loadUrl($rawfile("another_local.html"));
  })

3. 加载 HTML 文本数据

可以使用 loadData 方法直接加载 HTML 文本内容：

javascript

Web({ src: $rawfile("local.html") })
  .onControllerAttached(() => {
    this.controller.loadData("<html><body>Hello, World!</body></html>", "text/html", "UTF-8");
  })

需要指定数据类型、编码格式和内容。

4. 加载模式选择

ArkWeb 支持两种加载模式：

  • 同步渲染模式（默认）：Web 渲染与系统组件一起进行

  • 异步渲染模式：Web 组件作为独立节点渲染，性能更高，但受限于最大尺寸

可以通过 renderMode 属性设置加载模式：

javascript

Web({ src: "https://www.example.com", renderMode: RenderMode.ASYNC_RENDER })

5. 加载进度监听

可以使用 onProgressChange 接口监听页面加载进度：

javascript

Web({ src: "https://www.example.com" })
  .onProgressChange((event) => {
    console.log("Loading progress: " + event.newProgress);
  })

三、浏览记录导航管理

在前端页面点击网页中的链接时，Web 组件默认会自动打开并加载目标网址，并自动记录已访问的网页地址。

1. 前进和后退操作

可以使用 forward 和 backward 方法进行页面前进和后退操作：

javascript

Web({ src: "https://www.example.com" })
  .onControllerAttached(() => {
    this.controller.forward(); // 前进
    this.controller.backward(); // 后退
  })

2. 检查历史记录

在执行前进后退操作前，最好先检查是否存在相应的历史记录：

javascript

Web({ src: "https://www.example.com" })
  .onControllerAttached(() => {
    if (this.controller.accessForward()) {
      this.controller.forward(); // 存在前进历史记录，可以前进
    }
    if (this.controller.accessBackward()) {
      this.controller.backward(); // 存在后退历史记录，可以后退
    }
  })

如果存在历史记录，accessBackward() 接口会返回 true。同样，可以使用 accessForward() 接口检查是否存在前进的历史记录。如果不执行检查，当用户浏览到历史记录的末尾时，调用 forward() 和 backward() 接口将不执行任何操作。

3. 完整示例

下面是一个完整的浏览记录导航示例：

javascript

// xxx.ets
import { webview } from '@kit.ArkWeb';

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

  build() {
    Column() {
      Button('后退')
        .onClick(() => {
          if (this.webviewController.accessBackward()) {
            this.webviewController.backward();
          }
        })
        
      Button('前进')
        .onClick(() => {
          if (this.webviewController.accessForward()) {
            this.webviewController.forward();
          }
        })
        
      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController })
    }
  }
}

四、页面跳转管理

ArkWeb 还提供了强大的页面跳转管理能力，可以实现应用内页面跳转和跨应用跳转。

1. 应用内页面跳转

当点击网页中的链接需要跳转到应用内其他页面时，可以通过使用 Web 组件的 onUrlLoadIntercept() 接口来实现。

以下示例展示了如何从 Web 页面跳转到应用内其他页面：

应用首页 index.ets 代码：

javascript

// index.ets
import { webview } from '@kit.ArkWeb';
import { router } from '@kit.ArkUI';

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

  build() {
    Column() {
      Web({ src: $rawfile('route.html'), controller: this.webviewController })
        .onUrlLoadIntercept((event) => {
          if (event) {
            let url: string = event.data.getRequestUrl();
            if (url.indexOf('native://') === 0) {
              // 跳转其他界面
              router.pushUrl({ url: url.substring(9) });
              return true;
            }
          }
          return false;
        })
    }
  }
}

前端页面 route.html 代码：

html

<!-- route.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
      <a href="native://pages/ProfilePage">个人中心</a>
   </div>
</body>
</html>

跳转页面 ProfilePage.ets 代码：

javascript

@Entry
@Component
struct ProfilePage {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
    }
  }
}

2. 跨应用跳转

Web 组件可以实现点击前端页面超链接跳转到其他应用。

以下示例展示了如何从 Web 页面跳转到电话应用的拨号界面：

应用侧代码：

javascript

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { call } from '@kit.TelephonyKit';

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

  build() {
    Column() {
      Web({ src: $rawfile('call.html'), controller: this.webviewController })
        .onUrlLoadIntercept((event) => {
          if (event) {
            let url: string = event.data.getRequestUrl();
            // 判断链接是否为拨号链接
            if (url.indexOf('tel://') === 0) {
              // 跳转拨号界面
              call.makeCall(url.substring(6), (err) => {
                if (!err) {
                  console.info('make call succeeded.');
                } else {
                  console.info('make call fail, err is:' + JSON.stringify(err));
                }
              });
              return true;
            }
          }
          return false;
        })
    }
  }
}

前端页面 call.html 代码：

html

<!-- call.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
    <a href="tel://xxx xxxx xxx">拨打电话</a>
  </div>
</body>
</html>

五、生命周期与性能监控

ArkWeb 提供了丰富的生命周期回调接口，开发者可以通过这些接口感知 Web 组件的生命周期状态变化，并进行相关的业务处理。

1. 主要生命周期回调

  • onControllerAttached：当 Controller 成功绑定到 Web 组件时触发

  • onPageBegin：网页开始加载时触发

  • onProgressChange：告知开发者当前页面加载的进度

  • onPageEnd：网页加载完成时触发

  • onPageVisible：页面即将可见时触发

  • onRenderExited：应用渲染进程异常退出时触发

  • onDisAppear：组件卸载消失时触发

2. 性能监控

ArkWeb 提供了性能监控接口，可以获取网页加载过程中的关键性能指标：

  • onFirstContentfulPaint：网页首次内容绘制的回调函数

  • onFirstMeaningfulPaint：网页首次有效绘制的回调函数

  • onLargestContentfulPaint：网页绘制页面最大内容的回调函数

使用示例：

javascript

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  
  build() {
    Column() {
      Web({ src: "https://www.example.com", controller: this.controller })
        .onFirstContentfulPaint(event => {
          if (event) {
            console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + 
              event.navigationStartTick + ", [firstContentfulPaintMs]:" + 
              event.firstContentfulPaintMs);
          }
        })
        .onFirstMeaningfulPaint(event => {
          if (event) {
            console.log("onFirstMeaningfulPaint:" + "[navigationStartTick]:" + 
              event.navigationStartTick + ", [firstMeaningfulPaintMs]:" + 
              event.firstMeaningfulPaintMs);
          }
        })
        .onLargestContentfulPaint(event => {
          if (event) {
            console.log("LargestContentfulPaint:" + event.largestContentfulPaintMs);
          }
        })
    }
  }
}

3. 统计网页访问时长

可以通过生命周期回调统计每个网页的访问时长：

javascript

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  startTime: number = 0;
  currentUrl: string = '';
  
  build() {
    Column() {
      Web({ src: "https://www.example.com", controller: this.controller })
        .onPageBegin((event) => {
          if (event) {
            this.startTime = new Date().getTime();
            this.currentUrl = event.url;
            console.log('页面开始加载: ' + event.url);
          }
        })
        .onPageEnd((event) => {
          if (event) {
            const endTime = new Date().getTime();
            const duration = endTime - this.startTime;
            console.log(`页面 ${this.currentUrl} 加载完成，耗时 ${duration} 毫秒`);
            
            // 上报访问时长数据
            this.reportPageDuration(this.currentUrl, duration);
          }
        })
    }
  }
  
  // 上报页面访问时长
  reportPageDuration(url: string, duration: number) {
    // 实现数据上报逻辑
  }
}

六、最佳实践与注意事项

  1. 权限配置：页面加载过程中，若涉及网络资源获取，需要配置 ohos.permission.INTERNET 网络访问权限。

  2. 内存管理：对于大量使用 Web 组件的应用，需要注意内存管理，及时释放不再使用的 Web 组件。

  3. 性能优化：对于性能要求较高的场景，可以考虑使用异步渲染模式：RenderMode.ASYNC_RENDER。

  4. 错误处理：合理处理网页加载失败、网络异常等情况，提供友好的用户提示。

  5. 安全考虑：对拦截的 URL 进行严格验证，防止安全漏洞。

总结

ArkWeb 提供了强大而灵活的网页加载与浏览记录管理功能，使开发者能够轻松地在鸿蒙应用中集成 Web 内容，并提供原生般的用户体验。

通过合理利用页面加载方式、浏览记录导航、生命周期回调和性能监控接口，可以打造出高性能、用户体验良好的 Web 浏览功能。

掌握了 ArkWeb 的这些特性，相信你能够更加高效地开发鸿蒙应用，轻松应对各种 Web 内容集成场景。

鸿蒙NEXT版实战开发：ArkWeb设置基本属性和事件（设置UserAgent）
qq_39652397的博客
10-07 1334
Web组件基于ArkWeb的内核......
鸿蒙next开发：ArkWeb进程
qq_39652397的博客
05-28 761
本文详细介绍了鸿蒙ArkWeb的多进程架构及其核心功能。
鸿蒙混合开发实战：Web组件全解析
2501_91726121的博客
06-25 803
本文介绍了鸿蒙应用开发中的混合开发模式，重点解析了ArkTS使用Web组件的实现方法。混合开发结合了原生应用的高性能和Web开发的灵活性，具有跨平台兼容、快速迭代等优势。文章通过图文详细展示了混合开发架构，并提供了完整的ArkTS Web组件教程，包括基本语法、事件处理和API调用。实战案例演示了如何加载网页、获取标题等核心功能，帮助开发者快速上手鸿蒙混合开发。
鸿蒙NEXT版实战开发：加速Web页面的访问
qq_39652397的博客
10-11 1013
当Web页面加载缓慢时，可以使用预连接、预加载和预获取post请求的能力加速Web页面的访问。
鸿蒙next开发：ArkWeb-加速Web页面的访问
qq_39652397的博客
06-03 765
本文详细介绍了鸿蒙HarmonyOS中Web组件性能优化的四种核心技术
鸿蒙next开发：ArkWeb-User-Agent开发指南
qq_39652397的博客
05-29 1226
本文介绍了鸿蒙系统开发中的User-Agent相关知识。
HarmonyOS ArkUI实战开发-网页加载（Web）
1
04-22 1320
使用Web组件时，需要传递一个WebOptions类型的参数，WebOptionssrc：待加载的网页资源地址。controller：页面控制器，主要控制Web组件各种行为，一个对象只能控制一个Web组件，且必须在Web组件和绑定后，才能调用上的方法。// Web控制器build() {Web({src: "https://www.arkui.club", // 默认加载 www.arkui.club 网址})// 省略部分方法。
鸿蒙next开发：ArkWeb-自定义页面请求响应
qq_39652397的博客
06-03 366
本文详细介绍了鸿蒙HarmonyOS Web组件如何通过onInterceptRequest()实现自定义资源请求拦截与响应。
鸿蒙NEXT版实战开发：自定义页面请求响应
qq_39652397的博客
10-10 748
Web组件支持在应用拦截到页面请求后自定义响应请求能力。
HarmonyOS Next开发学习手册——ArkWeb设置基本属性和事件
maniuT的博客
07-21 1091
从API version 11起，Web组件基于ArkWeb的内核，默认UserAgent定义如下：建议通过ArkWeb关键字识别是否是HarmonyOS设备以及web内核是否为ArkWeb，同时可以通过deviceType识别设备类型用于不同设备上的页面显示。
HarmonyOS开发实战指南：鸿蒙应用组件化-Hybrid
DMZDAMS的博客
07-12 1584
Hybrid应用开发是介于Web应用和原生应用两者之间的应用开发技术，兼具“原生应用良好交互体验”的优势和“Web应用跨平台开发”的优势
鸿蒙的编程软件的介绍
FZD的博客
09-11 396
本文介绍了多款HarmonyOS开发工具的最新版本更新。DevEco Studio 5.1.1优化了构建效率，新增AI编程助手DevEco CodeGenie 6.0 Beta版，支持图片转页面和代码续写功能。Command Line Tools 5.1.1集成了开发所需工具链，ohpm-repo 5.1.5优化了三方库私有仓服务。DevEco Testing 5.1.5扩展了应用测试格式支持，HiSmartPerf 15.2.1新增了对Pad/PC设备的投屏性能分析功能，为开发者提供更完善的开发测试支持。
鸿蒙app日志存储
llw21680的专栏
09-12 43
使用hilog --pid xxxx指令可以实现Android中logcat --pid xxxx的相同的功能。在Android中可以使用logcat --pid xxxx 获取特定进程xxxx的打印日志。在鸿蒙中也有类似的功能。
鸿蒙Next Web组件生命周期详解：从加载到销毁的全流程掌控
专注于移动开发的干货分享。提供高效解决方案、避坑指南与前沿技术解析。为开发者创造价值。
09-11 704
ArkUI的Web组件提供了9个关键生命周期回调，覆盖了从组件初始化、网页加载、进度监控到异常处理和资源清理的全过程。这些回调函数让我们能够像开了"上帝视角"一样掌控网页加载的每个细节。为了帮助你快速建立整体认识，下面这张图梳理了Web组件的核心生命周期回调及其典型触发场景：图表代码通过熟练掌握Web组件的9大生命周期回调，我们能够：- 精准控制网页加载过程 🤖 - 优化性能体验 🚀 - 有效处理异常情况 🚑 - 避免内存泄漏和资源浪费 💾终极提示：使用预加载次级资源，用。
HarmonyOS 应用开发深度解析：ArkUI 声明式 UI 与现代化状态管理最佳实践
不懂先生的博客
09-11 451
原则：最小化状态将状态尽可能地下放到需要它的最小组件中。如果一个状态只在单个组件内使用，用@State；如果需要跨多个组件，再考虑@Provide@Consume或应用全局状态管理。不可变数据与性能虽然// 替换整个数组而非使用 push/splice// 替换整个对象而非修改属性结合@Watch监听状态变化@Watch装饰器用于监听状态变量的变化并执行副作用逻辑，如日志、网络请求等。// 可以在这里执行一些逻辑，但不要直接修改它监视的状态本身，以免造成循环更新。
HarmonyOS 应用开发深度解析：新一代声明式 UI 状态管理艺术与实践
不懂先生的博客
09-12 707
HarmonyOS ArkUI 的状态管理系统提供了一整套从组件内到跨组件、从简单数据类型到复杂对象的完整解决方案。从 API 12 开始，这些装饰器的稳定性和性能得到了进一步加强。装饰器作用域方向适用数据类型@State组件内部内部可变Primitive, 简单类@Prop父子组件单向同步Primitive, 简单类@Link父子组件双向同步Primitive, 简单类@Provide@Consume跨任意层级双向同步Primitive, 简单类@Observed父子组件。
HarmonyOS 应用开发深度实践：现代化状态管理的艺术与科学
不懂先生的博客
09-13 662
原则：最小化状态提升将状态定义在能够管理它的最底层组件。如果只有一个组件需要该状态，就使用@State放在组件内部。只有当多个兄弟组件需要共享时，才将其提升到共同的父组件。选择合适的工具@State@Prop@Link@Provide@Consume@Observed不可变数据与性能虽然 ArkUI 能很好地处理可变数据，但在复杂场景下，考虑使用不可变数据模式（例如，总是返回新对象而不是修改旧对象）。这可以使状态变化更清晰，更容易调试，有时还能避免不必要的渲染。结合应用级状态库。
初学鸿蒙笔记-真机调试
最新发布
hemoparrot的专栏
09-13 88
本文介绍了将华为设备升级至纯血鸿蒙系统并进行应用开发的完整流程。具体步骤包括：1)确认设备支持版本并准备真机；2)将系统升级到最新鸿蒙版本；3)开启开发者选项和USB调试；4)使用优质数据线连接电脑；5)在DevEco Studio中配置项目签名；6)选择设备并运行应用。文章还提供了调试过程中的注意事项，并欢迎开发者交流经验。
鸿蒙Next Web渲染与布局详解：深入理解自适应布局与渲染模式
专注于移动开发的干货分享。提供高效解决方案、避坑指南与前沿技术解析。为开发者创造价值。
09-12 424
鸿蒙Next的Web组件提供了强大而灵活的Web内容渲染能力，通过合理的布局模式和渲染模式选择，可以打造出高性能的混合应用。关键是要根据具体场景选择合适的配置：使用FIT_CONTENT布局模式实现内容自适应根据Web组件在页面中的角色选择ASYNC_RENDER或SYNC_RENDER渲染模式注意各种模式的限制和约束使用适当的通信机制实现原生与Web内容的交互希望本文能帮助你更好地理解和应用鸿蒙Next的Web渲染与布局技术，打造出更加优秀和流畅的应用体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

移动端开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值