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

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

news 2026/3/27 4:25:37

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

java打卡学习3：ArrayList扩容机制

ArrayList扩容机制概述ArrayList是基于动态数组实现的集合类，当元素数量超过当前数组容量时，会自动触发扩容机制。其核心目的是平衡内存占用与性能开销。默认初始容量未指定初始容量时，默认创建一个空数组（JDK 1.8）&am…...

编程新知 2026/3/27 1:20:11

医疗文本处理实战：用jieba分词器搞定妇科专业术语分词（附完整词典配置）

医疗文本处理实战：用jieba分词器精准解析妇科专业术语在医疗信息化和自然语言处理领域，专业术语的准确识别一直是技术难点。特别是妇科临床文本中，"妇科凝胶"、"宫颈刮片"等复合型专业词汇的切割问题，直接影…...

编程新知 2026/3/27 0:29:30

别再手动写RTL了！用Vivado FIR Compiler IP核5分钟搞定一个低通滤波器

5分钟极速部署：用Vivado FIR Compiler IP核实现专业级低通滤波器在FPGA信号处理领域，滤波器设计往往需要耗费工程师大量时间在RTL编码和验证上。但今天，我们将颠覆这一传统工作流程——通过Vivado的FIR Compiler IP核，即使没有深…...

编程新知 2026/3/27 0:09:21

三相桥式整流电路有源逆变状态的研究：基于Matlab仿真的直流发电机电动系统电能流转关系分析

三相桥式整流电路有源逆变状态 Matlab仿真可写报告直流发电机电动系统入手，研究电能流转关系，再转入变流器分析交流和直流电之间流转，掌握有源逆变条件。玩过直流电机调速的朋友可能遇到过这样的情况：明明在减速状态，…...

编程新知 2026/3/26 23:22:55

实测2-5分钟：CogVideoX-2b生成速度与画质平衡的真实体验报告

实测2-5分钟：CogVideoX-2b生成速度与画质平衡的真实体验报告 1. 从文字到视频：CogVideoX-2b能做什么？ 想象一下，你只需要输入一段文字描述，就能在几分钟内获得一段6秒的高清视频。这不是科幻电影里的场景&#xff0c…...

编程新知 2026/3/26 23:14:54

CasRel开源大模型部署教程：一键拉取镜像+5分钟完成SPO推理

CasRel开源大模型部署教程：一键拉取镜像5分钟完成SPO推理 1. 什么是CasRel关系抽取模型如果你需要从大段文字中自动找出"谁做了什么"、"谁是什么"这样的信息，CasRel模型就是你的得力助手。这个模型专门用来从文本中提取主体-谓语…...

编程新知 2026/3/26 22:24:19

ArcGIS Desktop许可证被占满？别慌，这3个方法帮你快速释放Advanced许可（附详细步骤）

ArcGIS Desktop高级许可被占用？3种高效解决方案与实战技巧当你正在赶制项目报告或处理关键地理数据时，突然弹出的"All ArcGIS for Desktop Advanced licenses are in use"错误提示足以让任何GIS专业人士心跳加速。这种情况往往发生在团队共享…...

编程新知 2026/3/26 21:25:58

【数据结构与算法】最小生成树Kruskal

1.#include <iostream> #include <algorithm> #include <vector> using namespace std;struct Edge {int u, v, w; // 起点，终点，边权 };vector<Edge> edges; vector<int> parent;// 比较函数：按边权升序排列…...

编程新知 2026/3/26 21:05:50

稚晖君亲自面试！智元机器人(Agibot)大模型技术面经全记录（含Transformer高频考点）

智元机器人(Agibot)大模型技术面试深度解析：Transformer核心考点与实战应答策略当具身智能遇上大模型技术，一场关于未来机器人革命的对话正在顶尖科技公司的面试室里悄然展开。作为行业新锐的智元机器人(Agibot)，其技术面试不仅考察候选人的…...

编程新知 2026/3/26 20:43:48

foobox-cn个性化定制指南：打造专属foobar2000音乐界面

foobox-cn个性化定制指南：打造专属foobar2000音乐界面【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn foobox-cn是一款为foobar2000播放器设计的DUI（自定义用户界面&#xff0…...

编程新知 2026/3/26 20:39:48

1. Web组件概述

2. Web使用

2.1 加载网络页面

2.2 加载本地页面

场景

2.3 加载HTML格式的文本数据

相关文章：