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

【最新鸿蒙应用开发】——ArkWeb1——arkts加载h5页面

news 2025/7/4 5:32:47

1. Web组件概述

Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。

页面加载：Web组件提供基础的前端页面加载的能力，包括：加载网络页面、本地页面、html格式文本数据。
页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。
页面调试：Web组件支持使用Devtools工具调试前端页面。

2. Web使用

页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。页面加载过程中，若涉及网络资源获取，需要配置ohos.permission.INTERNET网络访问权限。

2.1 加载网络页面

可以在Web组件创建时，指定默认加载的网络页面。在默认页面加载完成后，如果需要变更此Web组件显示的网络页面，可以通过调用loadUrl()接口加载指定的网页。

在下面的示例中，在Web组件加载完“www.example.com”页面后，可通过loadUrl接口将此Web组件显示页面变更为“www.example1.com”。

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() {Column() {Button('loadUrl').onClick(() => {try {// 点击按钮时，通过loadUrl，跳转到www.example1.comthis.webviewController.loadUrl('www.example1.com');} catch (error) {let e: business_error.BusinessError = error as business_error.BusinessError;console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);}})// 组件创建时，加载www.example.comWeb({ src: 'www.example.com', controller: this.webviewController})}}
}

2.2 加载本地页面

将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面，并且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。

在下面的示例中展示加载本地页面文件的方法：

将资源文件放置在应用的resources/rawfile目录下。

应用侧代码

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() {Column() {Button('loadUrl').onClick(() => {try {// 点击按钮时，通过loadUrl，跳转到local1.htmlthis.webviewController.loadUrl($rawfile("local1.html"));} catch (error) {let e: business_error.BusinessError = error as business_error.BusinessError;console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);}})// 组件创建时，通过$rawfile加载本地文件local.htmlWeb({ src: $rawfile("local.html"), controller: this.webviewController })}}
}

local.html页面代码。

<!-- local.html -->
<!DOCTYPE html>
<html><body><p>Hello World</p></body>
</html>

场景

ets页面中直接使用Web组件加载html文件也可以，无需使用LoadUrl也可以实现。

xx.ets:

import { webview } from '@kit.ArkWeb'@Entry
@Component
struct PreviewWebPage {webviewController = new webview.WebviewController()@StorageProp('topHeight') topHeight: number = 0build() {Navigation() {Column() {Web({ src: $rawfile('index.html'), controller: this.webviewController })}}.title('隐私政策').titleMode(NavigationTitleMode.Mini).padding({ top: this.topHeight })}
}

entry\src\main\resources\rawfile\index.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>隐私协议</title><style>body {padding: 15px;}</style>
</head>
<body>
<h1>面试宝典用户协议</h1>

<h3>开发者处理的信息</h3>
<p>根据法律规定，开发者仅处理实现app功能所必要的信息。</p>
<ul><li>为了实现语音输入等功能，开发者将在获取你的明示同意后，访问你的麦克风。</li><li>为了保存打卡照片，开发者将在获取你的明示同意后，使用你的相册（仅写入）权限。</li>
</ul>

<h3>第三方插件信息/SDK信息</h3>
<p>为实现特定功能，开发者可能会接入由第三方提供的插件/SDK。第三方插件/SDK的个人信息处理规则，请以其公示的官方说明为准。</p>

<h3>你的权益</h3>
<p>关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。</p>
<p>若你在app中注册了账号，你可以通过以下方式与开发者联系，申请注销你在app中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。</p>
<p>邮箱：zhoushugang@itcast.cn</p>

<h3>开发者对信息的存储</h3>
<p>开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。</p>

<h3>信息的使用规则</h3>
<p>开发者将会在本指引所明示的用途内使用收集的信息</p>
<p>如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以邮件方式告知并征得你的明示同意。</p>

<h3>信息对外提供</h3>
<p>开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。</p>
<p>开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。</p>


<strong>你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。</strong>

更新日期：2025-11-16
生效日期：2023-11-16

<p>本app已对用户的信息处理进行了逐一、如实的说明，并保证如有变更会及时更新指引。</p>
</body>
</html>

2.3 加载HTML格式的文本数据

Web组件可以通过loadData()接口实现加载HTML格式的文本数据。当不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面。

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {Column() {Button('loadData').onClick(() => {try {// 点击按钮时，通过loadData，加载HTML格式的文本数据this.controller.loadData("<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>","text/html","UTF-8");} catch (error) {let e: business_error.BusinessError = error as business_error.BusinessError;console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);}})// 组件创建时，加载www.example.comWeb({ src: 'www.example.com', controller: this.controller })}}
}

【最新鸿蒙应用开发】——ArkWeb1——arkts加载h5页面

1. Web组件概述 Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。页面加载：Web组件提供基础的前端页面加载的能力，包括：加载网络页面、本地页面、html格式文本数据。页面交互&#…...

编程日记 2024/6/16 2:16:12

【设计模式】结构型设计模式之享元模式

文章目录介绍关键概念应用举例象棋游戏共享棋子对象文本编辑器中文字格式设计成享元模式享元模式在 Java 中的应用享元模式在包装类缓存中的应用享元模式在 String 中的应用对比享元模式和单例模式的区别享元模式与缓存的区别总结优点缺点介绍享元模式，”享…...

编程日记 2024/6/16 2:15:10

嵌入式操作系统_5.存储管理

1.存储管理存储管理是嵌入式操作系统的基本功能之一。其管理的对象是主存，也称内存。它的主要功能包括分配和回收主存空间、提高主存利用率、扩充主存、对主存信息实现有效保护。存储器管理的目的就是提供一个有价值的内存抽象，其目标包括：…...

编程日记 2024/6/16 2:14:08

HTML DOM 事件

HTML DOM 事件 HTML DOM（文档对象模型）事件是当网页中的某些操作发生时，浏览器会自动触发或通过脚本代码手动触发的动作。这些事件可以是对用户操作的响应，如点击按钮，也可以是浏览器自身的动作，如页面加载完成。理解和掌握DOM事件对于前端开发至关重要，因为它们是实现…...

编程日记 2024/6/16 2:13:07

有没有硅基生命？AGI在哪里？

摘要随着科技的飞速发展，人工智能（AI）和生命科学的探索逐渐成为人们关注的焦点。其中，关于硅基生命的可能性与AGI（Artificial General Intelligence，即人工通用智能）的实现，更是引…...

编程日记 2024/6/16 2:12:06

HAL库开发--串口

知不足而奋进望远山而前行目录文章目录前言学习目标学习内容开发流程串口功能配置串口功能开启串口中断配置串口参数配置查询配置结果发送功能测试中断接收功能测试 printf配置 DMA收发配置 DMA发送 DMA接收(方式1) DMA接收(方式2) 总结前言…...

编程日记 2024/6/16 2:11:05

Web前端设计毕业论文：深度探索与未来展望

Web前端设计毕业论文：深度探索与未来展望在数字化时代，Web前端设计作为互联网应用的重要组成部分，其重要性和复杂性日益凸显。本论文旨在深度探索Web前端设计的关键要素、发展趋势以及面临的挑战，为未来的研究和实践提供有价值的…...

编程日记 2024/6/16 2:09:03

JAVA 字节运算取低5位获取低位第一位

1、JAVA 取低5位什么是取低5位在计算机中，每个数字都是以二进制形式存储的。一个二进制数字可以由多个位组成，每一位都可以是 0 或者 1。取低5位即表示只取二进制数字的最后5位（从右向左数）。取低5位的方法在 JAVA 中&#…...

编程日记 2024/6/16 2:08:00

全网首发：教你如何直接用4090玩转最新开源的stablediffusion3.0

1.stablediffusion的概述： Stable Diffusion（简称SD）近期的动态确实不多，但最新的发展无疑令人瞩目。StableCascade、Playground V2.5和Stableforge虽然带来了一些更新，但它们在SD3面前似乎略显黯然。就在昨晚&#x…...

编程日记 2024/6/16 2:06:59

智慧监狱技术解决方案

1. **建设背景**：介绍了智慧监狱建设的战略部署，包括司法部提出的“数字法治、智慧司法”信息化体系建设，以及智慧监狱建设的总体目标、重点任务和实施步骤。 2. **建设需求**：分析了当前监狱系统存在的问题，如子系统…...

编程日记 2024/6/16 2:05:58

QT——事件

一、什么是事件在QT中，事件（Event）是指由特定对象发生的动作或状态变化，通常用于响应用户的操作。事件可以是鼠标点击、键盘输入、窗口移动等用户操作，也可以是系统发出的信号，比如定时器超时、网络数据到达等。在QT中，可以通过连接信号与槽（Signals and Slots）的方…...

编程日记 2024/6/16 2:04:57

【SpringBoot】Spring Boot 中高级特性详解

文章目录 1. 异步处理1.1 什么是异步处理？1.2 实现异步处理1.2.1 启用异步支持1.2.2 使用 Async 注解1.2.3 调用异步方法 2. 安全管理2.1 Spring Security 集成2.2 基础安全配置2.2.1 添加依赖2.2.2 默认配置2.2.3 自定义用户认证 3. 监控和调试3.1 Spring Boot Act…...

编程日记 2024/6/16 2:03:56

MQTT TCP HTTP 协议对比

目录 1. 类型与用途 2. 通信模式与特性 3. 优缺点 4. 使用场景 MQTT、TCP和HTTP在类型、用途、通信模式、特性以及使用场景等方面存在显著的区别，以下是详细的阐述： 1. 类型与用途 MQTT：MQTT是一种消息传输协议，主要适用于物…...

编程日记 2024/6/16 2:02:54

C++面向对象程序设计 - 函数库

C语言程序中各种功能基本上都是由函数来实现的，在C语言的发展过程中建立了功能丰富的函数库，C从C语言继承了些函数功能。如果要用函数库中的函数，就必须在程序文件中包含文件中有关的头文件，在不同的头文件中，包含了不…...

编程日记 2024/6/16 2:00:52

computeIfAbsent是Java 8引入的Map接口中的一个方法

computeIfAbsent是Java 8引入的Map接口中的一个方法，它提供了一种更高效且线程安全的方式来 conditionally compute or retrieve a value for a given key in a map. 当你想要为一个键计算一个值（如果该键尚不存在对应的映射关系）&#xff0c…...

编程日记 2024/6/16 1:58:50

HTML实现进度条/加载框模版

HTML加载一、环形加载 1二、环形加载 2三、波形加载四、百分比环形五、进度条一、环形加载 1 <div class"loader"></div>.loader {border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid #3498db;width: 120px;height: 120px;-webki…...

编程日记 2024/6/16 1:57:49

Python 3 列表

Python 3 列表 Python 3 中的列表是一种基本的数据结构，用于存储一系列有序的元素。列表是可变的，这意味着可以修改其内容。在 Python 中，列表是非常灵活和强大的，广泛用于各种编程任务。创建列表创建列表非常简单，只需将元素用逗号分隔，并包围在方括号 [] 内。例如…...

编程日记 2024/6/16 1:56:48

Type-C接口显示器：C口高效连接与无限可能 LDR

Type-C显示器C接口的未来：高效连接与无限可能随着科技的飞速发展，我们的日常生活和工作中对于高效、便捷的连接方式的需求日益增加。在这样的背景下，Type-C接口显示器凭借其卓越的性能和广泛的兼容性，正逐渐崭露头角&#xff0c…...

编程日记 2024/6/16 1:53:44

微服务SpringCloud ES分布式全文搜索引擎简介下载安装及简单操作入门

Elasticsearch ES简介分布式全文搜索引擎我们天天在用ES 搜索的时候要与多个信息进行匹配查找然后返回给用户首先 ES会将数据库中的信息先进行一个拆分这个叫做分词是按照词语关键词拆的然后就能进行搜索的时候匹配对应的id 每一个关键字对应若干id 每一个…...

编程日记 2024/6/16 1:51:43

护眼灯落地的好还是桌面的好？落地护眼灯性价比高的品牌推荐

护眼灯落地的好还是桌面的好？当我们为了更好地保护眼睛而选择护眼灯时，常常会面临一个纠结的问题：到底是护眼灯落地的好还是桌面的好呢？这看似是一个简单的二选一，实则背后蕴含着诸多需要深入探讨的因素。护眼灯的选择…...

编程日记 2024/6/16 1:50:41

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/6/21 5:31:03

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/7/2 13:48:19

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/7/2 14:58:01

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2025/6/21 15:30:57

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar：依赖注入与仓储模式实践在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...

编程新知 2025/6/26 7:07:46

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/6/25 7:35:04

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。目录 …...

编程新知 2025/7/3 6:38:48

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/6/21 8:12:23

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2025/7/1 18:41:22

1. Web组件概述

2. Web使用

2.1 加载网络页面

2.2 加载本地页面

场景

2.3 加载HTML格式的文本数据

相关文章：