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

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

news 文章来源：https://blog.csdn.net/m0_68038853/article/details/139582207 2024/11/7 13:56: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

计算机网络-子网掩码的计算

计算机网络中的子网掩码计算及相关知识 在计算机网络中&#xff0c;子网掩码是一个非常重要的概念。它不仅帮助我们区分网络地址和主机地址&#xff0c;还在网络划分、管理和安全中发挥着重要作用。本文将介绍子网掩码的基本概念、计算方法及其在网络中的应用。 子网掩码的基…...

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

Java：111-SpringMVC的底层原理（中篇）

这里续写上一章博客&#xff08;110章博客&#xff09;&#xff1a; 现在我们来学习一下高级的技术&#xff0c;前面的mvc知识&#xff0c;我们基本可以在67章博客及其后面相关的博客可以学习到&#xff0c;现在开始学习精髓&#xff1a; Spring MVC 高级技术&#xff1a; …...

编程日记 2024/6/16 1:46:17

Vue3新特性指南:探索新增指令、内置组件和改进

Vue.js是一款流行的JavaScript框架,用于构建现代Web应用。Vue3是Vue.js的最新版本,引入了许多新特性和改进。本文将介绍Vue3新增的指令、内置组件以及其他值得关注的改进,并提供使用组合式API的用法示例。 一、新增指令 v-is指令: v-is指令用于动态组件,可以根据表达式的值来…...

编程日记 2024/6/16 1:45:13

Qt项目天气预报(2) - 重写事件函数

鼠标右键实现退出界面 知识点QMenu: QMenu 弹出对话框 --> 相对QMessageBox 更加轻量点 QMenu是Qt库中用于创建弹出式菜单的类&#xff0c;它通常出现在应用程序的顶部菜单栏、按钮的右键菜单或自定义上下文菜单中。以下是关于QMenu的详细介绍&#xff1a; 1. 类的基本特…...

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

uni-app前端,社区团购系统搭建部署

目录 前言&#xff1a; 一、社区团购模式&#xff1a; 二、社区团购系统功能&#xff1a; 三、总结&#xff1a; 前言&#xff1a; 区团购系统是一种利用互联网技术和组织力量&#xff0c;通过线上线下结合的方式&#xff0c;为社区居民提供方便快捷的商品和服务采购平台。…...

编程日记 2024/6/16 1:37:52

基于iBeacon蓝牙定位技术的反向寻车系统

随着城市化进程的加速和汽车保有量的不断增加&#xff0c;大型停车场成为了人们日常生活中不可或缺的一部分。然而&#xff0c;在繁忙的停车场中快速找到自己的车辆&#xff0c;成为了许多车主的难题。为了解决这一问题&#xff0c;维小帮基于iBeacon蓝牙技术打造的反向寻车系统…...

编程日记 2024/6/16 1:36:47

CCAA质量管理【学习笔记】​​ 备考知识点笔记（五）质量设计方法与工具

第五节 质量设计方法与工具 1 任 务 分 解 法 1.1 概念 任务分解法&#xff0c;又称工作分解结构 (Work Breakdown Structure, 简 称 WBS) 。WBS 指以可交付成果为 导向&#xff0c;对项目团队为实现项目目标并完成规定的可交付成果而执行的工作所进行的层次分解。W…...

编程日记 2024/6/16 1:35:45

RIP路由协议汇总（华为）

#交换设备 RIP路由协议汇总 一、原理概述 当网络中路由器的路由条目非常多时&#xff0c;可以通过路由汇总&#xff08;又称路由汇聚或路由聚合&#xff09;来减少路由条目数&#xff0c;加快路由收敛时间和增强网络稳定性。路由汇总的原理是&#xff0c;同一个自然网段内的不…...

编程日记 2024/6/16 1:34:42

服务部署：.NET项目使用Docker构建镜像与部署

前提条件 安装Docker&#xff1a;确保你的Linux系统上已经安装了Docker。如果没有&#xff0c;请参考官方文档进行安装。 步骤一&#xff1a;准备项目文件 将你的.NET项目从Windows系统复制到Linux系统。你可以使用Git、SCP等工具来完成这个操作。如何是使用virtualbox虚拟电…...

编程日记 2024/6/16 1:33:36

力扣1170.比较字符串最小字母出现频次

力扣1170.比较字符串最小字母出现频次 f()是找最小字母的次数 即cnt中第一个出现过的字母 将word中所有字符串都处理存入nums nums排序 再做二分 class Solution {public:int f(string s){int cnt[26] {0};for(char c:s)cnt[c - a] ;for(int i0;i<26;i) cout<<cn…...

编程日记 2024/6/16 1:31:29

色弱做网站/seo指的是搜索引擎营销

Solution 考虑分开统计朝向每一个方向的所有狐狸对答案的贡献. 比如说以向右为例, 我们用箭标表示每一只狐狸的方向, 用\(\)表示当前一步移动之前的每一只狐狸的位置.\[ \begin{aligned} \sum_{d_i \rightarrow} x_iy_i & \left( \sum_{d_i \rightarrow} S \times (x_i …...

编程日记 2024/11/7 11:57:05

门户网站建设好处/网络营销模式包括哪些

上一次我们一起重温了JS中数组相关的内容&#xff0c;这一次我们要来学习ES6新引入的两个数据结构&#xff1a;map和set。map和对象比较像&#xff0c;可以用键来获取值&#xff0c;set则和数组比较像&#xff0c;但是不允许出现重复的值。下面我们就进入详细地学习吧&#xff…...

编程日记 2024/11/7 10:11:50

自己做网站挂广告怎么赚钱/百度seo关键词工具

手工测试缺点&#xff1a;1、重复的手工回归测试&#xff0c;代价昂贵、容易出错。 2、依赖于软件测试人员的能力。 手工测试优点&#xff1a; 1、测试人员具有经验和对错误的猜测能力。 2、测试人员具有审美能力和心理体验。 3、测试人员具有是非判断和逻辑推理能力。 自动化测…...

编程日记 2024/11/7 10:10:49

网站的发布方案有哪些/郑州网站推广报价

首先需要在控制台找到EBS&#xff0c;那个地方可以修改EBS存储的容量&#xff0c;6个小时只能改一次。修改完成后&#xff0c;在ec2上使用lsblk命令可以看到 xdva容量变成刚才设置的容量了&#xff0c;但是 /dev/xvda1的容量还是原来的值&#xff0c;需要手动操作一下。 使用 …...

编程日记 2024/11/7 9:36:52

创建网页用什么软件/深圳网站设计专业乐云seo

在这个例子中&#xff0c;主要会用到python内置的和OS模块的几个函数&#xff1a;os.walk() &#xff1a; 该方法用来遍历指定的文件目录&#xff0c;返回一个三元tuple(dirpath, dirnames, filenames) &#xff0c;其中dirpath为当前目录路径&#xff0c;dirnames为当前路径下…...

编程日记 2024/11/7 7:00:55

北京市住房和城乡建设委网站/他达拉非什么是

发工资咯&#xff1a; Time Limit: 2000/1000ms (Java/Others) Problem Description: 作为广财大的老师&#xff0c;最盼望的日子就是每月的8号了&#xff0c;因为这一天是发工资的日子&#xff0c;养家糊口就靠它了&#xff0c;呵呵 但是对于学校财务处的工作人员来说&#xf…...

编程日记 2024/11/6 22:39:46