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

鸿蒙实现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组件开发

目录&#xff1a; 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工程中&#xff0c;屏蔽一些不需要的文件 2、编译NXP官方EVK开发板对应的Linux系统…...

工业摄像头应对复杂环境的策略与解决方案

工业摄像头需应对复杂环境&#xff0c;如极端温度、振动、尘土、光照不足等。为确保稳定工作&#xff0c;它采用了先进技术和设计。详细分析如下&#xff1a; 一、增强环境适应性 采用高灵敏度传感器&#xff1a;使用CMOS或CCD图像传感器&#xff0c;适应低光照条件。 高精度、…...

重生之我在异世界学编程之C语言:深入动态内存管理篇

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文一 动态内存管理的必要性二 动态…...

【经典论文阅读】Latent Diffusion Models(LDM)

Latent Diffusion Models High-Resolution Image Synthesis with Latent Diffusion Models 摘要 动机&#xff1a;在有限的计算资源下进行扩散模型训练&#xff0c;同时保持质量和灵活性 引入跨注意力层&#xff0c;以卷积方式实现对一般条件输入&#xff08;如文本或边界框…...

智能指针中的weak_ptr(弱引用智能指针)

弱引用智能指针 std::weak_ptr 可以看做是shared_ptr的助手,它不管理 shared_ptr 内部的指针。std::weak_ptr 没有重载操作符*和->&#xff0c;因为它不共享指针&#xff0c; 不能操作资源&#xff0c;所以它的构造不会增加引用计数&#xff0c;析构也不会减少引用计数,它的…...

【电子通识】机电继电器和固态继电器的区别

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

工业异常检测-CVPR2024-新的3D异常数据合成办法和自监督网络IMRNet

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

如何创建对话窗口

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

新手上路,学Go还是Python

对于新手来说&#xff0c;Go和Python都是很好的编程语言&#xff0c;它们各有特点&#xff0c;以下是详细的对比来帮助你决定先学哪一个&#xff1a; 一、语法和学习难度 Python 语法简洁易懂&#xff1a;Python以其简洁、优雅的语法而闻名&#xff0c;代码的可读性很高。例如…...

<!DOCTYPE html>的作用是什么

一、背景 从今天开始会不定时的发布一些前端的常见面试题&#xff0c;供大家参考。今天要发布的内容是关于html的面试题的作用是什么。接下来就一起讨论以下吧 二、概念 DOCTYPE 是html5中一种标准通用标记语言的文档类型的声明&#xff0c;它的目的就是为了告诉浏览器应该以…...

EasyExcel改名为FastExce做了那些改变呢

回到&#xff1a;github原作者地址&#xff1a;https://github.com/CodePhiliaX/fastexcel 中文 |English | 什么是 FastExcel FastExcel 是由原 EasyExcel 作者创建的新项目。2023 年我已从阿里离职&#xff0c;近期阿里宣布停止更新 EasyExcel&#xff0c;作者他本人决定继…...

狗狗的生育周期:关注与呵护

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

ABAP DIALOG屏幕编程2

在上一篇博客ABAP DIALOG屏幕编程1中阐述了DIALOG、PBO、PAI的概念并且对常用页面元素怎么用进行了演示。在这一篇博文中会讲述怎么添加下拉框、搜索帮助&#xff0c;怎么创建表控件、屏幕跳转等。会用到上一篇里面的内容。 有关程序包含文件结构如下。 一、响应用户指令 如上…...

获取缓存大小与清除 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&#xff08;Unreal Header Tool&#xff09; 是虚幻引擎&#xff08;Unreal Engine&#xff09;中的一个重要工具&#xff0c;它用于处理和生成引擎所需的元数据&#xff0c;使得虚幻引擎能够执行许多复杂的功能&#xff0c;如反射、序列化、蓝图交互、垃圾回收等。简而言之…...

SQL项目实战与综合应用——项目设计与需求分析

项目设计与需求分析是软件开发过程中的核心环节&#xff0c;尤其在涉及数据库的应用时&#xff0c;良好的设计将直接影响到项目的可扩展性、性能和维护性。本文将深入探讨数据库设计的最佳实践&#xff0c;结合 C 与 SQL 的实际应用场景&#xff0c;涵盖项目需求收集、数据库设…...

分布式中的CAP定理和BASE理论与强弱一致性

分布式中的CAP定理和BASE理论与强弱一致性 CAP定理 CAP定理&#xff0c;也称为布鲁尔定理&#xff08;Brewer’s Theorem&#xff09;&#xff0c;是由加州大学伯克利分校的Eric Brewer教授在2000年提出的&#xff0c;并由麻省理工学院的Seth Gilbert和Nancy Lynch于2002年正…...

C/C++常见符号与运算符

C/C常见符号与运算符对照表 符号用法与意义与Java类比:在条件运算符中 (cond ? x : y) 表示条件为假的分支&#xff1b;在 switch-case 中如 case 1:表示标签结束点&#xff1b;在自定义标签如 label: 中用于 goto 跳转Java中? :三元运算相同&#xff1b;switch-case中也有:…...

了解 k8s 网络基础知识

了解 Docker 网络模式 在使用 Docker run 创建 Docker 容器时&#xff0c;可以使用 --net 选项指定容器的网络模式&#xff0c;Docker 可以有4种网络模式。 host 模式。–nethost 指定和宿主机共用一个 NetWork Namespace&#xff0c;容器中的网络环境&#xff08;ip 地址、路…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...