当前位置：首页 > news >正文

#跟着若城学鸿蒙# web篇-初探

news 来源：原创 2025/6/22 21:41:13

前言

先看下官方介绍，这里总结了比较重要的几点
Web组件基础：加载与渲染网页全面解析
Web组件是现代应用开发中不可或缺的重要元素，它允许开发者在原生应用中无缝集成Web内容。本文将全面介绍Web组件的基本功能，包括多种内容加载方式、动态更新机制以及页面加载生命周期的完整处理流程。

Web组件核心功能概述
Web组件作为连接原生应用与Web内容的桥梁，主要提供三大核心功能：

1.多源内容加载：支持网络页面、本地文件和HTML富文本数据1
2.动态内容更新：通过编程接口实时更新显示内容
3.生命周期管理：完整监控页面加载过程各阶段状态
在官方文档的介绍中,
ArkWeb基于谷歌Chromium内核开发，使用的Chromium版本为M114。提供了强大的网页渲染能力和丰富的控制接口。

实战

加载网络页面

网络页面加载是最常见的场景，需要配置网络访问权限：

"requestPermissions": [{"name": "ohos.permission.INTERNET"}
]

在页面中


import { webview } from '@kit.ArkWeb';@Entry
@Component
struct WebComponent {controller: webview.WebviewController = new webview.WebviewController();build() {Column() {Web({ src: 'https://developer.huawei.com/consumer/cn/develop/', controller: this.controller })}}
}

这里有两点需要注意：src的值可以是超链接地址，地址不加http或者 https 时会默认加上 https。也可以是 Resource 值，用来加载本地数据。

动态更新URL需要使用loadUrl()方法：

Button('跳转页面').onClick(() => {try {this.controller.loadUrl('https://developer.huawei.com/consumer/cn/develop/');} catch (error) {console.error(`加载失败: ${error.message}`);}})

加载本地页面

本地页面需放置在rawfile目录下，支持两种加载方式：
使用资源引用符：

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

或者
使用沙箱路径：

let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html';
Web({ src: url, controller: this.controller }).fileAccess(true)

当然也可以直接加载 html 字符串

Button('加载HTML').onClick(() => {this.controller.loadData("<html><body>自定义内容</body></html>","text/html","UTF-8");})

也可以直接使用 src 属性

htmlStr: string = "data:text/html,<html><body>直接内容</body></html>";Web({ src: this.htmlStr, controller: this.controller })

生命周期

与其说是生命周期，不如说是加载网页的各种事件回调
这里放张图

除了这些之外，还有其他的事件：

aboutToAppear函数：在创建自定义组件的新实例后，在执行其build函数前执行。一般建议在此设置WebDebug调试模式setWebDebuggingAccess、设置Web内核自定义协议URL的跨域请求与fetch请求的权限customizeSchemes、设置Cookie(configCookie)等。

onControllerAttached事件：当Controller成功绑定到Web组件时触发该回调，且禁止在该事件回调前调用Web组件相关的接口，否则会抛出js-error异常。推荐在此事件中注入JS对象registerJavaScriptProxy、设置自定义用户代理setCustomUserAgent，可以在回调中使用loadUrl，getWebId等操作网页不相关的接口。但因该回调调用时网页还未加载，因此无法在回调中使用有关操作网页的接口，例如zoomIn、zoomOut等。

onLoadIntercept事件：当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。

onOverrideUrlLoading事件：当URL将要加载到当前Web中时，让宿主应用程序有机会获得控制权，回调函数返回true将导致当前Web中止加载URL，而返回false则会导致Web继续照常加载URL。onLoadIntercept接口和onOverrideUrlLoading接口行为不一致，触发时机也不同，所以在应用场景上存在一定区别。主要是在LoadUrl和iframe（HTML标签，表示HTML内联框架元素，用于将另一个页面嵌入到当前页面中）加载时，onLoadIntercept事件会正常回调到，但onOverrideUrlLoading事件在LoadUrl加载时不会触发，在iframe加载HTTP(s)协议或about:blank时也不会触发。详细介绍请见onLoadIntercept和onOverrideUrlLoading的说明。

onInterceptRequest事件：当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。

onPageBegin事件：网页开始加载时触发该回调，且只在主frame（表示一个HTML元素，用于展示HTML页面的HTML元素）触发。如果是iframe或者frameset（用于包含frame的HTML标签）的内容加载时则不会触发此回调。多frame页面有可能同时开始加载，即使主frame已经加载结束，子frame也有可能才开始或者继续加载中。同一页面导航（片段、历史状态等）或者在提交前失败、被取消的导航等也不会触发该回调。

onProgressChange事件：告知开发者当前页面加载的进度。多frame页面或者子frame有可能还在继续加载而主frame可能已经加载结束，所以在onPageEnd事件后依然有可能收到该事件。

onPageEnd事件：网页加载完成时触发该回调，且只在主frame触发。多frame页面有可能同时开始加载，即使主frame已经加载结束，子frame也有可能才开始或者继续加载中。同一页面导航（片段、历史状态等）或者在提交前失败、被取消的导航等也不会触发该回调。推荐在此回调中执行JavaScript脚本loadUrl等。需要注意的是收到该回调并不能保证Web绘制的下一帧将反映此时DOM的状态。

onPageVisible事件：Web回调事件。渲染流程中当HTTP响应的主体开始加载，新页面即将可见时触发该回调。此时文档加载还处于早期，因此链接的资源比如在线CSS、在线图片等可能尚不可用。

onRenderExited事件：应用渲染进程异常退出时触发该回调，可以在此回调中进行系统资源的释放、数据的保存等操作。如果应用希望异常恢复，需要调用loadUrl接口重新加载页面。详细用法参考应用如何避免Web组件渲染子进程异常退出导致的页面卡死问题。

onDisAppear事件：组件卸载消失时触发此回调。该事件为通用事件，指组件从组件树上卸载时触发的事件。

下一章，我们就使用这些事件来完成某些操作

前言

实战

加载网络页面

加载本地页面

生命周期

相关文章：