【Web/HarmonyOS】采用ArkTS+Web组件开发网页嵌套的全屏应用
文章目录
- 1、简介
- 2、效果
- 3、在ArkTs上全屏Web
- 3.1、创建ArkTS应用
- 3.2、修改模块化配置(module.json5)
- 3.3、修改系统栏控制(ArkTS代码)
- 4、双网页嵌套Web实现
- 5、ArkTS+Web技术架构的演进
1、简介
在鸿蒙应用开发领域,技术选型的迭代速度令人瞩目。继昨日完成Vue框架的鸿蒙HelloWorld实践后,今日笔者深度体验了ArkTS+Web组件的开发范式,成功构建了一个支持双网页嵌套的全屏应用。本文将完整复现开发过程,重点解析全屏实现、网页嵌套等核心技术要点。
2、效果
3、在ArkTs上全屏Web
3.1、创建ArkTS应用
同样采用DevEco的IDE创建应用,可以参考我上一篇文章《【Web】使用Vue3开发鸿蒙的HelloWorld!》。
3.2、修改模块化配置(module.json5)
可以参考我的应用路径
修改module.json5源码如下:
{"module": {"name": "entry","type": "entry","description": "$string:module_desc","mainElement": "EntryAbility","deviceTypes": ["phone"],"deliveryWithInstall": true,"installationFree": false,"pages": "$profile:main_pages","abilities": [{"name": "EntryAbility","srcEntry": "./ets/entryability/EntryAbility.ts","description": "$string:EntryAbility_desc","icon": "$media:icon","label": "$string:EntryAbility_label","startWindowIcon": "$media:icon","startWindowBackground": "$color:start_window_background","exported": true,"skills": [{"entities": ["entity.system.home"],"actions": ["action.system.home"]}]}],}
}
3.3、修改系统栏控制(ArkTS代码)
可以参考我的应用路径
修改Index.ets源码如下:
import web_webview from '@ohos.web.webview'
import window from '@ohos.window'
import common from '@ohos.app.ability.common'@Entry
@Component
struct WebPage {controller: web_webview.WebviewController = new web_webview.WebviewController()private context = getContext(this) as common.Contextasync aboutToAppear() {try {// 获取窗口对象并设置全屏const win = await window.getLastWindow(this.context)// 核心配置:全屏+隐藏系统栏await win.setWindowLayoutFullScreen(true)await win.setWindowSystemBarEnable([])// 设置状态栏完全透明(防止出现白条)await win.setWindowSystemBarProperties({statusBarColor: '#00000000',navigationBarColor: '#00000000',statusBarContentColor: '#FF000000' // 状态栏图标颜色})// 禁用边缘手势(可选)await win.setWindowTouchable(false)} catch (err) {console.error('全屏配置失败:', JSON.stringify(err))}}build() {Column() {Web({src: $rawfile("index.html"),controller: this.controller}).width('100%').height('100%').zoomAccess(false).fileAccess(true).domStorageAccess(true).initialScale(100)}.width('100%').height('100%').backgroundColor(Color.White)}
}
4、双网页嵌套Web实现
我把应用程序的Web放在rawfile目录下的index.html中
可以参考我的源码:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>底部导航切换</title><style>* {margin: 0;padding: 0;box-sizing: border-box;touch-action: manipulation;}body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background: #f8f9fa;padding-bottom: 80px; /* 为底部导航预留空间 */}/* 内容区域 */.content-container {padding: 15px;margin-top: 10px;transition: all 0.3s;}#contentFrame {width: 100%;height: calc(100vh - 140px);border: 2px solid #dee2e6;border-radius: 16px;background: white;}/* 底部导航栏样式 */.nav-bar {display: flex;gap: 8px;padding: 12px;background: white;box-shadow: 0 -2px 4px rgba(0,0,0,0.08);position: fixed;bottom: 0;left: 0;right: 0;z-index: 100;border-top-left-radius: 24px;border-top-right-radius: 24px;}.nav-btn {flex: 1;padding: 12px 0;border: none;border-radius: 24px;background: #e9ecef;font-size: 16px;transition: all 0.3s;cursor: pointer;}.nav-btn:hover {background: #007bff;color: white;}.nav-btn.active {background: #007bff;color: white;transform: scale(0.95);}/* 移动端适配 */@media (max-width: 768px) {.nav-btn {padding: 10px 0;font-size: 14px;}#contentFrame {height: calc(100vh - 120px);}body {padding-bottom: 70px;}}</style>
</head>
<body>
<div class="content-container"><iframe id="contentFrame" src="https://shazhenyu.blog.csdn.net/" frameborder="0"></iframe>
</div><nav class="nav-bar"><button class="nav-btn active" onclick="switchTab('csdn')">📝 我的博客</button><button class="nav-btn" onclick="switchTab('baidu')">🔍 手机百度</button>
</nav><script>function switchTab(target) {const frame = document.getElementById('contentFrame');const buttons = document.querySelectorAll('.nav-btn');// 切换按钮状态buttons.forEach(btn => btn.classList.remove('active'));event.target.classList.add('active');// 切换内容const urls = {csdn: 'https://shazhenyu.blog.csdn.net/',baidu: 'https://m.baidu.com'};frame.src = urls[target];// 特殊页面适配if(target === 'csdn') {frame.style.height = 'calc(100vh - 140px)';document.body.style.backgroundColor = '#f8f9fa';} else {frame.style.height = 'calc(100vh - 140px)';document.body.style.backgroundColor = '#ffffff';}}// 初始化加载CSDNwindow.onload = () => {const frame = document.getElementById('contentFrame');frame.addEventListener('load', () => {// CSDN页面特殊处理if(frame.src.includes('csdn.net')) {frame.style.height = 'calc(100vh - 140px)';}});};// 窗口尺寸变化处理window.addEventListener('resize', () => {const frame = document.getElementById('contentFrame');frame.style.height = window.innerWidth > 768? 'calc(100vh - 140px)': 'calc(100vh - 120px)';});</script>
</body>
</html>
5、ArkTS+Web技术架构的演进
相较于传统Web开发模式,ArkTS+Web的融合方案展现出三大优势:
- 原生性能增强:通过ArkTS声明式UI框架与Web组件的混编,既保留了Web生态的灵活性,又获得了接近原生应用的流畅度
- 开发效率提升:一套代码同时适配手机、平板等多端设备,相较传统跨平台方案缩减约40%的适配成本
- 系统级能力接入:可直接调用鸿蒙系统API,实现全屏显示、系统栏控制等原生功能
相关文章:
【Web/HarmonyOS】采用ArkTS+Web组件开发网页嵌套的全屏应用
文章目录 1、简介2、效果3、在ArkTs上全屏Web3.1、创建ArkTS应用3.2、修改模块化配置(module.json5)3.3、修改系统栏控制(ArkTS代码) 4、双网页嵌套Web实现5、ArkTSWeb技术架构的演进 1、简介 在鸿蒙应用开发领域,技术…...
Leetcode (力扣)做题记录 hot100(34,215,912,121)
力扣第34题:在排序数组中查找第一个数和最后一个数 34. 在排序数组中查找元素的第一个和最后一个位置 - 力扣(LeetCode) class Solution {public int[] searchRange(int[] nums, int target) {int left 0;int right nums.length - 1;int[…...
Babylon.js学习之路《三、创建你的第一个 3D 场景:立方体、球体与平面》
文章目录 1. 引言:从零构建一个 3D 场景1.1 目标与成果预览1.2 前置条件 2. 初始化 Babylon.js 场景2.1 创建 HTML 骨架2.2 初始化引擎与场景 3. 创建基础几何体3.1 立方体(Box)3.2 球体(Sphere)3.3 平面(P…...
Go 语言即时通讯系统开发日志-day1:从简单消息收发 Demo 起步
Go语言即时通讯系统开发日志day1,主要模拟实现的一个简单的发送消息和接受消息的小demo,因为也才刚学习go语言的语法,对go的json、net/http库了解不多,所以了解了一下go语言的encoding/json库和net/http库,以及websock…...
AAAI-2025 | 中科院无人机导航新突破!FELA:基于细粒度对齐的无人机视觉对话导航
作者:Yifei Su, Dong An, Kehan Chen, Weichen Yu, Baiyang Ning, Yonggen Ling, Yan Huang, Liang Wang 单位:中国科学院大学人工智能学院,中科院自动化研究所模式识别与智能系统实验室,穆罕默德本扎耶德人工智能大学࿰…...
中科院无人机导航物流配送的智能变革!LogisticsVLN:基于无人机视觉语言导航的低空终端配送系统
作者:Xinyuan Zhang, Yonglin Tian, Fei Lin, Yue Liu, Jing Ma, Kornlia Sra Szatmry, Fei-Yue Wang 单位:中国科学院大学人工智能学院,中科院自动化研究所多模态人工智能系统国家重点实验室,澳门科技大学创新工程学院工程科学系…...
IP协议、以太网包头及UNIX域套接字
IP协议、以太网包头及UNIX域套接字 IP包头结构 IP协议是互联网的核心协议之一,其包头包含了丰富的信息来控制数据包的传输。让我们详细解析IPv4包头结构: 4位版本号(version):标识IP协议版本,IPv4值为4 4位首部长度(header len…...
普林斯顿数学三剑客读本分析。
这几天看了普斯林顿数学三剑客,主要看了微积分、概率论前半部分,数学分析看了目录,大体略读了一下。怎么说呢,整体上来看,是很不错的,适合平常性阅读,配套结合国内教材习题来深入还是很不错的。…...
Matlab 模糊pid的液压舵机伺服系统
1、内容简介 Matlab 235-模糊pid的液压舵机伺服系统 可以交流、咨询、答疑 2、内容说明 略 舵机是轮船,客机等机器控制系统的重要组成部分,是客机,战斗机等飞行器操作系统的关键部件,也是一种超高的精度的位置伺服系统ÿ…...
Linux基础命令之目录管理——了解各种操作文件目录的命令,万字教学,超详细!!!(1)
文章目录 前言1、Linux文件系统1.1 核心特点1.2 重要目录结构1.3 文件类型1.4 文件和目录的命名规则1.5 文件与目录的定位方式 2、查看目录或文件的详细信息(ls)2.1 基本语法2.2 常用操作2.3 高级用法 3、切换目录(cd)3.1 常用操作…...
中国黄土高原中部XF剖面磁化率和粒度数据
时间分辨率:1000年 < x空间分辨率为:空共享方式:申请获取数据大小;35.75 KB数据时间范围:743-0 ka元数据更新时间:2023-08-15 数据集摘要 该数据集包括中国黄土高原中部XF剖面磁化率和粒度数据。将所有…...
tabs切换#
1、html <el-tabs v-model"tabValue" tab-change"handleTabClick"><el-tab-pane label"集群" name"1"></el-tab-pane><el-tab-pane label"节点" name"2"></el-tab-pane></el-ta…...
免费Office图片音频高效提取利器
软件介绍 今天要给大家介绍一款非常好用的Office文档图片及音频提取工具,它不仅好用,而且完全免费,没有任何广告。 软件概况 这款名为Office File Picture Extractor(PPT图片提取)的软件,大小仅有4MB。打…...
迁移 Visual Studio Code 设置和扩展到 VSCodium
本文同步发布在个人博客 迁移 Visual Studio Code 设置和扩展到 VSCodium - 萑澈的寒舍https://hs.cnies.org/archives/vscodium-migrateVisual Studio Code(以下简称 VS Code)无疑是当下最常用的代码编辑器。尽管微软的 VS Code 源代码采用 MIT 协议开…...
1.7 方向导数
(底层逻辑演进脉络)从"单车道"到"全路网"的导数进化史: 一、偏导数奠基(1.6核心) 诞生背景:多元函数分析需求 当变量间存在耦合关系时(如房价面积单价装修成本)…...
深入理解目标检测中的关键指标及其计算方法
深入理解目标检测中的关键指标及其计算方法 在目标检测领域,评估模型性能时,我们通常会关注几个关键指标,这些指标帮助我们量化模型的准确性和有效性。本文将详细介绍这些常见指标及其计算方法,帮助你更好地理解和评估目标检测模…...
Ollama+OpenWebUI+docker完整版部署,附带软件下载链接,配置+中文汉化+docker源,适合内网部署,可以局域网使用
前言: 因为想到有些环境可能没法使用外网的大模型,所以可能需要内网部署,看了一下ollama适合小型的部署,所以就尝试了一下,觉得docker稍微简单一点,就做这个教程的,本文中重要的内容都会给下载…...
【Redis实战篇】分布式锁-Redisson
1. 分布式锁-redisson功能介绍 基于setnx实现的分布式锁存在下面的问题: 重入问题: 重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中,可重入锁的意义在于防止死锁,比如HashTable这样的代码中,他的方法都…...
构造二叉树
一、由中序和后序遍历序列构造二叉树 106. 从中序与后序遍历序列构造二叉树 - 力扣(LeetCode) /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* …...
vue3: pdf.js 3.4.120 using javascript
npm install pdfjs-dist3.4.120 项目结构: pdfjsViewer.vue <template><div><div v-if"loading" class"flex justify-center items-center py-8"><div class"animate-spin rounded-full h-12 w-12 border-b-2 borde…...
编译原理AST以Babel为例进行解读、Webpack中自定义loader与plugin
AST树详解 编译原理 主要研究如何将高级编程语言的源代码转换为机器能理解的目标代码(通常是二进制代码或中间代码)。编译器的底层实现通常包含多个阶段,包括词法分析、语法分析、语义分析和代码生成。 一、AST的核心概念与作用 AST&#…...
牛客周赛 Round 92
目录 A-小红的签到题 代码 B-小红的模拟 代码 C-小红的方神题 代码 D-小红的数学题 代码 无注释版 有注释版 E-小红的ds题 代码 无注释版 有注释版 A-小红的签到题 代码 #include<bits/stdc.h> using namespace std; int main(){int n;cin>>n;cha…...
面试题:C++虚函数可以是内联函数吗?
目录 1.引言 2.示例 3.总结 1.引言 为什么C的虚函数和内联函数这两个看似矛盾的特性能否共存?这个问题实际上触及了C编译期优化与运行时多态性之间的微妙平衡。我发现这个问题不仅是面试中的常见陷阱,更是理解C深层机制很好的一个点。 虚函数可以被声…...
蚁群算法赋能生鲜配送:MATLAB 实现多约束路径优化
在生鲜农产品配送中,如何平衡运输效率与成本控制始终是行业难题。本文聚焦多目标路径优化,通过 MATLAB 实现蚁群算法,解决包含载重限制、时间窗约束、冷藏货损成本的复杂配送问题。代码完整复现了从数据生成到路径优化的全流程,助…...
前苹果首席设计官回顾了其在苹果的设计生涯、公司文化、标志性产品的背后故事
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...
《基于 Kubernetes 的 WordPress 高可用部署实践:从 MariaDB 到 Nginx 反向代理》
手把手教你用 Kubernetes 部署高可用 WordPress 博客 本实验通过 Kubernetes 容器编排平台,完整部署了一个高可用的 WordPress 网站架构,包含 MariaDB 数据库、WordPress 应用和 Nginx 反向代理三大核心组件。实验涵盖了从基础环境准备到最终服务暴露的…...
文件上传总结
攻击与绕过方式 一、条件竞争 攻击原理:在上传文件的同时利用代码逻辑中的时序问题(如 unlink() 删除操作)触发条件竞争,从而实现上传恶意文件并绕过限制。 示例测试源码: 以下为测试文件上传功能的 PHP 源码ÿ…...
在文档里如何引用在线SVG甘特图
在文档里如何引用在线SVG甘特图 介绍 本文将详细介绍如何快速创建一个功能强大的在线甘特图,并将其嵌入到其他文档(如 Notion、Wiki、Qiita、GitHub、Obsidian、Email 等)中。只要目标工具支持引用网络图片,你就可以轻松实现这一…...
Spring AI 与 Groq 的深度集成:解锁高效 AI 推理新体验
Spring AI 与 Groq 的深度集成:解锁高效 AI 推理新体验 前言 在人工智能飞速发展的当下,AI 推理的效率和性能成为开发者关注的焦点。Groq 作为一款基于 LPU™ 的超快速 AI 推理引擎,凭借其强大的性能,能够支持各类 AI 模型&…...
101alpha---第10
rank(((0 < ts_arg_min(ts_delta(close, 1), 4)) ? ts_delta(close, 1) : ((ts_arg_max(ts_delta(close, 1), 4) < 0) ? ts_delta(close, 1) : (-1 * ts_delta(close, 1))))) alpha 那么我们来看具体含义 吧 rank(((0 < ts_arg_min(ts_delta(close, 1), 4)) ? …...
vim中的查找
在 Vim 中,使用 n 键可以按正向(向下)继续查找下一个匹配项。若要反向(向上)查找,可以使用以下方法: 1. 使用 N 键反向查找 在查找命令(如 /keyword)后,按下…...
什么是IP专线?企业数字化转型的关键网络基础设施
为什么企业需要IP专线? 在当今数字化浪潮席卷全球的背景下,企业网络需求正经历着前所未有的变革。传统网络架构已难以满足现代企业对高效、安全、灵活网络服务的需求,IP专线正是在这一背景下应运而生的关键网络解决方案。 专线服务本质上是…...
Linux环境基础开发工具的使用(yum、vim、gcc、g++、gdb、make/Makefile)
目录 Linux软件包管理器 - yum Linux下载软件的方式 认识yum 查找软件包 安装软件包 如何实现本地机器和云服务器之间的文件互传 卸载软件 Linux编辑器 - vim vim的基本概念 vim下各模式的切换 vim命令模式各命令汇总 vim底行模式各命令汇总 Linux编译器 - gcc/g …...
5.11 - 5.12 JDBC+Mybatis+StringBoot项目配置文件
JDBC: 预编译SQL优点:安全,性能更高。 在cmd里面输入java-jar就可以运行jar包。 Mybatis: 持久层框架。用于简化JDBC的开发。 数据库连接池里面放置的是一个一个Connection连接对象。(连接池中的连接可以复用&#…...
判断一个数组有没有重复值
要判断一个数组是否包含重复值,你可以使用多种方法。以下是一些常用的方法: 方法 1:使用 Set Set 是一种集合数据结构,它只存储唯一的值。因此,你可以将数组转换为 Set,然后比较 Set 的大小与数组的长度。…...
51c大模型~合集127
我自己的原文哦~ https://blog.51cto.com/whaosoft/13905076 #Executor-Workers架构 图解Vllm V1系列2 本文详细介绍了vllm v1的Executor-Workers架构,包括Executor的四种类型(mp、ray、uni、external_launcher)及其适用场景ÿ…...
Spring急速入门
Spring 是 企业级开发的一站式框架,核心是 IOC(控制反转) 和 AOP(面向切面编程) 一、Spring 核心:IOC 理论 1. 什么是 IOC? IOC(Inversion of Control,控制反转&…...
#在 CentOS 7 中手动编译安装软件操作及原理
在 CentOS 7 中,手动编译安装软件(即从源代码编译安装)是一种高度灵活的方式,适用于需要定制化软件功能、优化性能或安装官方仓库未提供的软件版本的场景。以下是针对手动编译安装的详细说明,包括原理、步骤、注意事项…...
【Kubernetes】初识基础理论(第一篇)
前言 单机容器编排: docker-compose 容器集群编排: docker swarm、mesosmarathon、kubernetes 应用编排: ansible 一、Kubernetes概述 Kubernetes 是一个可移植的、可扩展的开源平台,用于管理容器化的…...
配置集群(yarn)
在配置 YARN 集群前,要先完成以下准备工作: 集群环境规划:明确各节点的角色,如 ResourceManager、NodeManager 等。网络环境搭建:保证各个节点之间能够通过网络互通。时间同步设置:安装 NTP 服务࿰…...
按钮导航组件 | 纯血鸿蒙组件库AUI
摘要: 按钮导航组件(A_ButtonNav):可设置导航数据(含文本及路由),可设置按钮颜色、导航标题及导航子标题。 一、组件调用方式 1.1.极简调用: 用 A_ButtonNav 调用“按钮导航组件”,只需要给属性 data (导…...
自适应主从复制模拟器的构建与研究
自适应主从复制模拟器的构建与研究 摘要: 本文旨在构建一个自适应主从复制模拟器,深入研究主从复制原理及优化方法。从研究者视角出发,详细阐述模拟器的设计、实现与实验过程,通过表格、图表及代码等辅助手段,逐步探讨如何在不同网络条件和负载下,自动调整主从复制参数和…...
015枚举之滑动窗口——算法备赛
滑动窗口 最大子数组和 题目描述 给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 原题链接 思路分析 见代码注解 代码 int maxSubArray(vector<int>& num…...
【Dv3Admin】工具视图配置文件解析
在开发后台管理系统时,处理复杂的 CRUD 操作是常见的需求。Django Rest Framework(DRF)通过 ModelViewSet 提供了基础的增删改查功能,但在实际应用中,往往需要扩展更多的功能,如批量操作、权限控制、查询优化等。dvadmin/utils/viewset.py 模块通过继承并扩展 ModelViewS…...
在MyBatis Plus里处理LocalDateTime类型
在MyBatis Plus里处理LocalDateTime类型 在MyBatis Plus里处理LocalDateTime类型时,你要确保数据库字段和Java实体类属性之间的类型映射是正确的。下面为你介绍处理这种情况的方法: 1. 数据库字段类型对应设置 要保证数据库字段类型和LocalDateTime相…...
编程技能:字符串函数03,strncpy
专栏导航 本节文章分别属于《Win32 学习笔记》和《MFC 学习笔记》两个专栏,故划分为两个专栏导航。读者可以自行选择前往哪个专栏。 (一)WIn32 专栏导航 上一篇:编程技能:字符串函数02,strcpy 回到目录…...
edge设置位IE模式打开网页
打开Edge浏览器->在浏览器工具栏右键->自定义工具栏->外观->选择要在工具栏上显示的按钮->找到“Internet Explorer 模式”按钮->开启,将其添加到工具栏中...
代码随想录训练营第二十二天| 101.对称二叉树 100.相同的树
101.对称二叉树: 文档讲解:代码随想录|101.对称二叉树 视频讲解:新学期要从学习二叉树开始! | LeetCode:101. 对称二叉树_哔哩哔哩_bilibili 状态:已做出 思路: 这道题目我初始做的时候想着使用…...
nvm管理node版本
To manage Node.js versions on Windows, I recommend using nvm-windows (Node Version Manager for Windows). Here’s how we can handle this: First, let’s install nvm-windows. I’ll propose a command to check if it’s already installed: nvm versionGreat! I s…...
智能手表测试计划文档(软/硬件)
📄 智能手表测试计划文档(软/硬件) 项目名称:Aurora Watch S1 文档编号:AW-S1-QA-TP-001 编制日期:2025-xx-xx 版本:V1.0 编写人:xxx(测试主管) 一、测试目标…...