鸿蒙 Web组件的生命周期(api10、11、12)

概述

开发者可以使用Web组件加载本地或者在线网页。

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

Web组件的状态主要包括:Controller绑定到Web组件、网页加载开始、网页加载进度、网页加载结束、页面即将可见等。

在这里插入图片描述

Web组件网页加载的状态说明

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

(2)onControllerAttached事件:当Controller成功绑定到Web组件时触发该回调,推荐在此事件中注入JS对象registerJavaScriptProxy、设置自定义用户代理setCustomUserAgent,可以在回调中使用loadUrl,getWebId等操作网页不相关的接口。但因该回调调用时网页还未加载,因此无法在回调中使用有关操作网页的接口,例如zoomIn、zoomOut等。

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

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

(5)onInterceptRequest事件:当Web组件加载url之前触发该回调,用于拦截url并返回响应数据。

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

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

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

(9)onPageVisible事件:当HTTP响应的主体开始加载,新页面即将可见时触发该回调,且只在主frame触发。此回调在文档加载的早期触发,因此链接的资源比如在线CSS、在线图片等可能尚不可用。

(10)onRenderExited事件:应用渲染进程异常退出时触发该回调, 可以在此回调中进行系统资源的释放、数据的保存等操作。如果应用希望异常恢复,需要调用loadUrl接口重新加载页面。

(11)onDisAppear事件:组件卸载消失时触发此回调。该事件为通用事件,指组件从组件树上卸载时触发的事件。
应用侧代码:

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';
import promptAction from '@ohos.promptAction';@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()responseWeb: WebResourceResponse = new WebResourceResponse()heads:Header[] = new Array()@State webData: string = "<!DOCTYPE html>\n" +"<html>\n" +"<head>\n" +"<title>intercept test</title>\n" +"</head>\n" +"<body>\n" +"<h1>intercept test</h1>\n" +"</body>\n" +"</html>"aboutToAppear(): void {try {web_webview.WebviewController.setWebDebuggingAccess(true);} catch (error) {let e: business_error.BusinessError = error as business_error.BusinessError;console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);}
}build() {Column() {Web({ src: $rawfile('index.html'), controller: this.controller }).onControllerAttached(() => {// 推荐在此loadUrl、设置自定义用户代理、注入JS对象等console.log('onControllerAttached excute')}).onLoadIntercept((event) => {if (event) {console.log('onLoadIntercept url:' + event.data.getRequestUrl())console.log('url:' + event.data.getRequestUrl())console.log('isMainFrame:' + event.data.isMainFrame())console.log('isRedirect:' + event.data.isRedirect())console.log('isRequestGesture:' + event.data.isRequestGesture())}// 返回true表示阻止此次加载,否则允许此次加载return true}).onOverrideUrlLoading((webResourceRequest: WebResourceRequest) => {if (webResourceRequest && webResourceRequest.getRequestUrl() == "about:blank") {return true;}return false;}).onInterceptRequest((event) => {if (event) {console.log('url:' + event.request.getRequestUrl())}let head1:Header = {headerKey:"Connection",headerValue:"keep-alive"}let head2:Header = {headerKey:"Cache-Control",headerValue:"no-cache"}let length = this.heads.push(head1)length = this.heads.push(head2)this.responseWeb.setResponseHeader(this.heads)this.responseWeb.setResponseData(this.webData)this.responseWeb.setResponseEncoding('utf-8')this.responseWeb.setResponseMimeType('text/html')this.responseWeb.setResponseCode(200)this.responseWeb.setReasonMessage('OK')// 返回响应数据则按照响应数据加载,无响应数据则返回null表示按照原来的方式加载return this.responseWeb}).onPageBegin((event) => {if (event) {console.log('onPageBegin url:' + event.url)}}).onFirstContentfulPaint(event => {if (event) {console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +event.navigationStartTick + ", [firstContentfulPaintMs]:" +event.firstContentfulPaintMs)}}).onProgressChange((event) => {if (event) {console.log('newProgress:' + event.newProgress)}}).onPageEnd((event) => {// 推荐在此事件中执行JavaScript脚本if (event) {console.log('onPageEnd url:' + event.url)}}).onPageVisible((event) => {console.log('onPageVisible url:' + event.url)}).onRenderExited((event) => {if (event) {console.log('onRenderExited reason:' + event.renderExitReason)}}).onDisAppear(() => {promptAction.showToast({message: 'The web is hidden',duration: 2000})})}}
}

前端index.html:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body>
<h1>Hello, ArkWeb</h1>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/31167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣SQL50 平均售价 ifnull SUM 连表查询

Problem: 1251. 平均售价 &#x1f468;‍&#x1f3eb; 参考题解&#xff08;题目数据增强&#xff0c;代码只能过90%的点&#xff09; &#x1f37b; AC code SELECT p.product_id, ROUND(ifnull(SUM(units * price) / SUM(units), 0),2) AS average_price FROM prices a…

初学51单片机之数字秒表

不同数据类型间的相互转换 在C语言中&#xff0c;不同数据类型之间是可以混合运算的。当表达式中的数据类型不一致时&#xff0c;首先转换为同一类型&#xff0c;然后再进行计算。C语言有两种方式实现类型转换。一是自动类型转换&#xff0c;另外一种是强制类型转换。 转换的主…

2024GLEE生活暨教育(上海)博览会,8月20-22日,国家会展中心(上海)

2024GLEE生活暨教育(上海)博览会将于8月20-22日在中国国家会展中心&#xff08;上海&#xff09;举行&#xff0c;博览会总面积近万平方米&#xff0c;设有美好生活和教育产品两大主力展区&#xff0c;全面覆盖婴幼儿、学龄前、小学、初中、高中、大学、中年、老年各个年龄段的…

数据库复习重点

第一章通常涵盖数据库系统的基础概念&#xff0c;这里将概述数据库、数据库系统、数据库管理系统的基本概念&#xff0c;数据库系统的三级模式结构&#xff0c;以及数据模型的三要素。 基本概念 数据&#xff08;Data&#xff09;&#xff1a; 数据是描述事物的符号记录&#…

Nvidia Isaac Sim搭建仿真环境 入门教程 2024(4)

Nvidia Isaac Sim 入门教程 2024 版权信息 Copyright 2023-2024 Herman YeAuromix. All rights reserved.This course and all of its associated content, including but not limited to text, images, videos, and any other materials, are protected by copyright law. …

银行数仓项目实战(六)--基础层(完成存款的明细表---宽表)

文章目录 熟悉业务模型设计梳理映射关系加工宽表测试提交 FDM基础层&#xff1a;根据主题&#xff08;需求&#xff09;&#xff0c;将源数据加工集成&#xff0c;形成业务明细表–宽表 熟悉业务 当我们的工作来到基础层&#xff0c;我们首先要做的是跟甲方沟通&#xff0c;要…

未完工数据和系统数据对比分析

select * FROM ( select a.db_close_systime AS a_db_close_systime, -- 订单关闭时间 u.db_close_systime AS u_db_close_systime, -- 订单关闭时间 COALESCE( u.db_close_systime,a.db_close_systime) AS db_close_systime_coalesced ,-- 取非空值的订单关闭时间 a.i…

Harmony设计模式-单例模式

Harmony设计模式-单例模式 前言 软件设计模式&#xff08;[Design pattern](https://baike.baidu.com/item/Design pattern/10186718?fromModulelemma_inlink)&#xff09;&#xff0c;又称设计模式&#xff0c;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经…

动态网页制作技术

动态网页制作技术是一种利用脚本语言、数据库和服务器端程序来生成动态内容的网页技术。以下是常用的动态网页制作技术&#xff1a; 1.PHP&#xff1a;PHP是一种广泛使用的服务器端脚本语言&#xff0c;可以嵌入到HTML中&#xff0c;用于生成动态网页内容。它可以与各种数据库进…

使用Kafka框架发送和接收消息(Java示例)

Kafka是一个开源的分布式流处理平台&#xff0c;以其在大数据和实时处理领域的广泛应用而闻名。以下是Kafka的关键特性以及它在消息传输方面的优势&#xff1a; 高吞吐量与低延迟&#xff1a;Kafka能够每秒处理数百万条消息&#xff0c;具有极低的延迟&#xff0c;这使得它非常…

前端调试技巧

1、利用console打印日志 2、利用debugger关键字&#xff0c;浏览器f12调用到方法debugger处会断点住&#xff0c;可以利用浏览器调试工具查看变量 a.监视表达式可以添加想要观察的变量 b.调用堆栈可以观察方法调用链 3、xhr断点 请求地址包含v1.0/banner_theme/pagelist&a…

Spacedrive:一个开源的跨平台文件管理器

文章目录 Spacedrive简介1.1 什么是Spacedrive&#xff1f;1.2 Spacedrive的核心功能1.3 Spacedrive的开发状态 Spacedrive的功能与特点2.1 文件存储在哪里&#xff1f;2.2 与传统文件管理器的区别2.3 与云存储服务的区别2.4 跨设备文件管理2.5 文件分类与过滤 Spacedrive的技术…

中科大和字节AI视频生成CamTrol杀疯了!运动可控,效果惊艳!

大家好&#xff0c;我是阿潘&#xff0c;今年堪称视频生成的爆发的一年&#xff0c;sora 2024年2月15日发布&#xff0c;让全世界都震惊了。openai 有一次成为了行业标杆。从生成的效果来看&#xff0c;比起以往抽象的生成结果&#xff0c;有了巨大的提升。 今天和大家分享中科…

DevExpress WPF中文教程:Grid - 如何将更改发布到数据库(设计时)?

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

c++设计模式之一创建型模式

1、创建型模式&#xff08;常见的设计模式&#xff09; Factory 模式&#xff08;工厂模式&#xff0c;被实例化的子类&#xff09; 在面向对象系统设计中经常可以遇到以下的两类问题&#xff1a; 下面是第一类问题和代码示例&#xff1a;我们经常会抽象出一些类的公共接口以…

1547. 切棍子的最小成本

Problem: 1547. 切棍子的最小成本 文章目录 思路解题方法复杂度Code 思路 本题的目标是在给定长度为 n 的棍子上&#xff0c;根据预设的切割点 cuts 进行切割&#xff0c;使得总的切割成本最小。每次切割的成本等于切割后两段棍子的长度之和。由于切割点可以任意选择&#xff0…

Spring Boot框架的原理及应用详解(六)

本系列文章简介&#xff1a; 在当今的软件开发世界中&#xff0c;快速迭代、高效开发以及易于维护成为了开发者们不断追求的目标。Spring Boot作为Spring框架的一个子项目&#xff0c;自其诞生以来就凭借其“约定大于配置”的理念和自动配置的特性&#xff0c;迅速在Java开发社…

密码学及其应用——公钥加密与公钥基础设施(PKI)

1. 引言 在当今的数字世界中&#xff0c;安全通信变得尤为重要。我们每天发送和接收的大量电子邮件和其他类型的在线消息都可能包含敏感信息。为了保护这些信息&#xff0c;我们可以利用公钥加密和公钥基础设施&#xff08;PKI&#xff09;。本文将通过安全邮件交换的示例&…

解决数据丢失问题的MacOS 数据恢复方法

每个人都经历过 Mac 硬盘或 USB 驱动器、数码相机、SD/存储卡等数据丢失的情况。我们中的一些人可能认为已删除或格式化的数据将永远丢失&#xff0c;因此就此作罢。对于 macOS 用户来说&#xff0c;当文件被删除时&#xff0c;垃圾箱已被清空&#xff0c;他们可能不知道如何恢…

pytorch lighting: Trying to resize storage that is not resizable

问题 在用pytorch lighting进行训练时碰到如下错误 即 Trying to resize storage that is not resizable 。 解决方案 在dataloader采样图片以及label时&#xff0c;保证每次采样的图片的分辨率不变。