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

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

news 2025/12/15 22:18:48

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组件的页面。

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

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

  1. 应用侧代码

// 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 })}}
}

  1. 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页面内容&#xff0c;为开发者提供页面加载、页面交互、页面调试等能力。 页面加载&#xff1a;Web组件提供基础的前端页面加载的能力&#xff0c;包括&#xff1a;加载网络页面、本地页面、html格式文本数据。 页面交互&#…...

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

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

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

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

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

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

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

HTML DOM 事件

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

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

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

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

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

HAL库开发--串口

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

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

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

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

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

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

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

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

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

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

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

智慧监狱技术解决方案

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

编程日记 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 什么是异步处理&#xff1f;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在类型、用途、通信模式、特性以及使用场景等方面存在显著的区别&#xff0c;以下是详细的阐述&#xff1a; 1. 类型与用途 MQTT&#xff1a;MQTT是一种消息传输协议&#xff0c;主要适用于物…...

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

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

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

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

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

computeIfAbsent是Java 8引入的Map接口中的一个方法&#xff0c;它提供了一种更高效且线程安全的方式来 conditionally compute or retrieve a value for a given key in a map. 当你想要为一个键计算一个值&#xff08;如果该键尚不存在对应的映射关系&#xff09;&#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接口的未来&#xff1a;高效连接与无限可能 随着科技的飞速发展&#xff0c;我们的日常生活和工作中对于高效、便捷的连接方式的需求日益增加。在这样的背景下&#xff0c;Type-C接口显示器凭借其卓越的性能和广泛的兼容性&#xff0c;正逐渐崭露头角&#xff0c…...

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

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

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

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

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

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

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

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/12/14 17:15:31

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/12/15 20:41:35

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/12/9 3:52:17

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/12/15 11:10:54

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/12/15 13:11:03

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/12/14 0:28:04

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01