鸿蒙实现Web组件开发
目录:
- 1、简介&使用场景
- 2、加载网络页面
- 3、加载本地页面
- 4、加载HTML格式的文本数据
- 5、设置深色模式
- 6、上传文件
- 7、在新窗口中打开页面
- 8、管理位置权限
1、简介&使用场景
Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全球性计算机网络,使用户能够通过浏览器访问和交互式使用各种信息和资源,如网页、文档、图片、视频、音频等。通过Web,用户可以浏览网页、发送电子邮件、参与在线社交网络、进行在线购物等各种活动。Web的核心技术包括超文本传输协议(HTTP),超文本标记语言(HTML)和统一资源定位器(URL)。
使用场景:
鸿蒙的应用有时需要集成别的项目H5等入口页面,如html等或者是网络地址的形式;这个就需要使用到鸿蒙加载html页面或者网络地址等。
2、加载网络页面
"requestPermissions": [{"name": "ohos.permission.INTERNET" // 使用网络权限}
]
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Button('愚公博客首页').onClick(() => {try {// 点击按钮时,通过loadUrl,跳转到www.example1.comthis.controller.loadUrl('www.example1.com');} catch (error) {console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);}})// 组件创建时,加载www.example.comWeb({ src: 'www.baidu.com', controller: this.controller})}}
}
3、加载本地页面
<!-- local.html -->
<!DOCTYPE html>
<html><body><p>Hello World</p></body>
</html>
// xxx.ets
import web_webview from '@ohos.web.webview';@Entry
@Component
struct WebComponent {webviewController: web_webview.WebviewController = new web_webview.WebviewController();build() {Column() {Button('loadUrl').onClick(() => {try {// 点击按钮时,通过loadUrl,跳转到local1.htmlthis.webviewController.loadUrl($rawfile("index.html"));} catch (error) {console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);}})// 组件创建时,通过$rawfile加载本地文件local.htmlWeb({ src: $rawfile("index.html"), controller: this.webviewController })}}
}
4、加载HTML格式的文本数据
// xxx.ets
import web_webview from '@ohos.web.webview';@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) {console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);}})// 组件创建时,加载www.example.comWeb({ src: 'www.example.com', controller: this.controller })}}
}
5、设置深色模式
通过darkMode()接口可以配置不同的深色模式。
- WebDarkMode.Off模式表示关闭深色模式。
- WebDarkMode.On表示开启深色模式,且深色模式跟随前端页面。
- WebDarkMode.Auto表示开启深色模式,且深色模式跟随系统。
- forceDarkAccess()接口可将前端页面强制配置深色模式,且深色模式不跟随前端页面和系统。配置该模式时候,需要将深色模式配置成WebDarkMode.On。
// xxx.ets
import web_webview from '@ohos.web.webview';@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController();@State mode: WebDarkMode = WebDarkMode.On;@State access: boolean = true;build() {Column() {Web({ src: 'www.example.com', controller: this.controller }).darkMode(this.mode).forceDarkAccess(this.access)}}
}
6、上传文件
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Document</title>
</head><body>
// 点击文件上传按钮
<input type="file" value="file"></br>
</body>
</html>
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {// 加载本地local.html页面Web({ src: $rawfile('index.html'), controller: this.controller }).onShowFileSelector((event) => {// 开发者设置要上传的文件路径let fileList: Array<string> = ['xxx/test.png',]event.result.handleFileList(fileList)return true;})}}
}
7、在新窗口中打开页面
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>WindowEvent</title>
</head>
<body>
<input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
<script type="text/javascript">function OpenNewWindow(){let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");openedWindow.document.write("<p>这是我的新窗口</p>");openedWindow.focus();}
</script>
</body>
</html>
开发者可以使用multiWindowAccess()接口来设置网页是否可以在新窗口中打开。通过调用此接口并传入相应的参数,可以控制网页是否允许使用新窗口。
当网页请求在新窗口中打开时,应用将收到Web组件的新窗口事件,可以通过onWindowNew()接口来处理此事件。在此接口中,开发者可以根据需要创建新的窗口来处理Web组件的窗口请求。
// xxx.ets
import web_webview from '@ohos.web.webview'//在同一page页有两个web组件。在WebComponent新开窗口时,会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {Column() {Web({ src: "", controller: this.webviewController1 }).javaScriptAccess(true).multiWindowAccess(false).onWindowExit(()=> {console.info("NewWebViewComp onWindowExit")if (this.controller) {this.controller.close()}})}}
}@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()dialogController: CustomDialogController | null = nullbuild() {Column() {Web({ src:$rawfile("window.html"), controller: this.controller }).javaScriptAccess(true)//需要使能multiWindowAccess.multiWindowAccess(true).allowWindowOpenMethod(true).onWindowNew((event) => {if (this.dialogController) {this.dialogController.close()}let popController:web_webview.WebviewController = new web_webview.WebviewController()this.dialogController = new CustomDialogController({builder: NewWebViewComp({webviewController1: popController})})this.dialogController.open()//将新窗口对应WebviewController返回给Web内核。//如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。//若不调用event.handler.setWebController接口,会造成render进程阻塞。event.handler.setWebController(popController)})}}
}
8、管理位置权限
<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){if (navigator.geolocation) {<!-- 前端页面访问设备地理位置 -->navigator.geolocation.getCurrentPosition(showPosition);}
}
function showPosition(position){locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
// xxx.ets
import web_webview from '@ohos.web.webview';@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController();build() {Column() {Web({ src:$rawfile('getLocation.html'), controller:this.controller }).geolocationAccess(true).onGeolocationShow((event) => { // 地理位置权限申请通知AlertDialog.show({title: '位置权限请求',message: '是否允许获取位置信息',primaryButton: {value: 'cancel',action: () => {event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求}},secondaryButton: {value: 'ok',action: () => {event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求}},cancel: () => {event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求}})})}}
}
相关文章:
鸿蒙实现Web组件开发
目录: 1、简介&使用场景2、加载网络页面3、加载本地页面4、加载HTML格式的文本数据5、设置深色模式6、上传文件7、在新窗口中打开页面8、管理位置权限 1、简介&使用场景 Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全…...

Linux——linux系统移植
创建VSCode工程 1、将NXP官方的linux内核拷贝到Ubuntu 2、解压缩tar -vxjf linux-imx-rel_imx_4.1.15_2.1.0_ga.tar.bz2 NXP官方开发板Linux内核编译 1、将.vscode文件夹复制到NXP官网linux工程中,屏蔽一些不需要的文件 2、编译NXP官方EVK开发板对应的Linux系统…...
工业摄像头应对复杂环境的策略与解决方案
工业摄像头需应对复杂环境,如极端温度、振动、尘土、光照不足等。为确保稳定工作,它采用了先进技术和设计。详细分析如下: 一、增强环境适应性 采用高灵敏度传感器:使用CMOS或CCD图像传感器,适应低光照条件。 高精度、…...

重生之我在异世界学编程之C语言:深入动态内存管理篇
大家好,这里是小编的博客频道 小编的博客:就爱学编程 很高兴在CSDN这个大家庭与大家相识,希望能在这里与大家共同进步,共同收获更好的自己!!! 本文目录 引言正文一 动态内存管理的必要性二 动态…...

【经典论文阅读】Latent Diffusion Models(LDM)
Latent Diffusion Models High-Resolution Image Synthesis with Latent Diffusion Models 摘要 动机:在有限的计算资源下进行扩散模型训练,同时保持质量和灵活性 引入跨注意力层,以卷积方式实现对一般条件输入(如文本或边界框…...
智能指针中的weak_ptr(弱引用智能指针)
弱引用智能指针 std::weak_ptr 可以看做是shared_ptr的助手,它不管理 shared_ptr 内部的指针。std::weak_ptr 没有重载操作符*和->,因为它不共享指针, 不能操作资源,所以它的构造不会增加引用计数,析构也不会减少引用计数,它的…...

【电子通识】机电继电器和固态继电器的区别
机电继电器 机电继电器于19世纪中叶发明。这些器件将线圈与可移动的金属触点结合使用来充当电动开关。这些器件会因为金属触点出现磨损而发生故障,例如焊死在一起。因此,在完全失效之前器件能够进行的开关周期数有限,从而限制了其总体可靠性。 一般情况下继电器控制…...

工业异常检测-CVPR2024-新的3D异常数据合成办法和自监督网络IMRNet
论文:https://arxiv.org/pdf/2311.14897v3.pdf 项目:https://github.com/chopper-233/anomaly-shapenet 这篇论文主要关注的是3D异常检测和定位,这是一个在工业质量检查中至关重要的任务。作者们提出了一种新的方法来合成3D异常数据&#x…...

如何创建对话窗口
文章目录 1. 概念介绍2. 使用方法3. 示例代码我们在上一章回中介绍了Dismissible Widget相关的内容,本章回中将介绍AlertDialog Widget.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们介绍的AlertDialog是指程序中弹出的确认窗口,其实我们在上一章回中删除ListView中…...

新手上路,学Go还是Python
对于新手来说,Go和Python都是很好的编程语言,它们各有特点,以下是详细的对比来帮助你决定先学哪一个: 一、语法和学习难度 Python 语法简洁易懂:Python以其简洁、优雅的语法而闻名,代码的可读性很高。例如…...
<!DOCTYPE html>的作用是什么
一、背景 从今天开始会不定时的发布一些前端的常见面试题,供大家参考。今天要发布的内容是关于html的面试题的作用是什么。接下来就一起讨论以下吧 二、概念 DOCTYPE 是html5中一种标准通用标记语言的文档类型的声明,它的目的就是为了告诉浏览器应该以…...

EasyExcel改名为FastExce做了那些改变呢
回到:github原作者地址:https://github.com/CodePhiliaX/fastexcel 中文 |English | 什么是 FastExcel FastExcel 是由原 EasyExcel 作者创建的新项目。2023 年我已从阿里离职,近期阿里宣布停止更新 EasyExcel,作者他本人决定继…...

狗狗的生育周期:关注与呵护
狗狗的繁殖是一个复杂且需要谨慎对待的过程,了解其生产周期对于宠物主人以及从事相关行业的人员至关重要。 一般而言,狗狗的怀孕周期约为两个月左右,但这并非绝对固定。从受孕到分娩,通常在 58 至 65 天之间波动。小型犬可能相对…...

ABAP DIALOG屏幕编程2
在上一篇博客ABAP DIALOG屏幕编程1中阐述了DIALOG、PBO、PAI的概念并且对常用页面元素怎么用进行了演示。在这一篇博文中会讲述怎么添加下拉框、搜索帮助,怎么创建表控件、屏幕跳转等。会用到上一篇里面的内容。 有关程序包含文件结构如下。 一、响应用户指令 如上…...
获取缓存大小与清除 Web 缓存 - 鸿蒙 HarmonyOS Next
针对浏览器 Web 组件清除缓存相关,具体实现如下 code 实例所示: /*公共方法类*/ export class PublicUtils {/*获取缓存大小*/static async getCacheSize(): Promise<number> {try {let bundleStats await storageStatistics.getCurrentBundleStats()let size bundleS…...
在Unreal Engine中,UHT与反射机制
UHT(Unreal Header Tool) 是虚幻引擎(Unreal Engine)中的一个重要工具,它用于处理和生成引擎所需的元数据,使得虚幻引擎能够执行许多复杂的功能,如反射、序列化、蓝图交互、垃圾回收等。简而言之…...

SQL项目实战与综合应用——项目设计与需求分析
项目设计与需求分析是软件开发过程中的核心环节,尤其在涉及数据库的应用时,良好的设计将直接影响到项目的可扩展性、性能和维护性。本文将深入探讨数据库设计的最佳实践,结合 C 与 SQL 的实际应用场景,涵盖项目需求收集、数据库设…...
分布式中的CAP定理和BASE理论与强弱一致性
分布式中的CAP定理和BASE理论与强弱一致性 CAP定理 CAP定理,也称为布鲁尔定理(Brewer’s Theorem),是由加州大学伯克利分校的Eric Brewer教授在2000年提出的,并由麻省理工学院的Seth Gilbert和Nancy Lynch于2002年正…...
C/C++常见符号与运算符
C/C常见符号与运算符对照表 符号用法与意义与Java类比:在条件运算符中 (cond ? x : y) 表示条件为假的分支;在 switch-case 中如 case 1:表示标签结束点;在自定义标签如 label: 中用于 goto 跳转Java中? :三元运算相同;switch-case中也有:…...

了解 k8s 网络基础知识
了解 Docker 网络模式 在使用 Docker run 创建 Docker 容器时,可以使用 --net 选项指定容器的网络模式,Docker 可以有4种网络模式。 host 模式。–nethost 指定和宿主机共用一个 NetWork Namespace,容器中的网络环境(ip 地址、路…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...

51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...

汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户,但你不希望用 root 权限运行 ns-3(这是对的,ns3 工具会拒绝 root),你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案:创建非 roo…...

C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...