鸿蒙5.0开发进阶：JS组件-文件组织

原创 于 2025-03-07 14:39:56 发布 · 784 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #android #前端 #鸿蒙系统 #javascript #ArkUI #ArkTS

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

文件组织

目录结构

JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下：

图1 目录结构

目录结构中文件分类如下：

  • .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。

  • .css结尾的CSS样式文件，这个文件用于描述页面样式。

  • .js结尾的JS文件，这个文件用于处理页面和用户的交互。

各个文件夹的作用：

  • app.js文件用于全局JavaScript逻辑和应用生命周期管理。
  • pages目录用于存放所有组件页面。
  • common目录用于存放公共资源文件，比如：媒体资源和JS文件。
  • i18n目录用于配置不同语言场景资源内容，比如应用文本词条，图片路径等资源。

说明

  • i18n是开发保留文件夹，不可重命名。

  • 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。

文件访问规则

应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下：

  • 引用代码文件，需使用相对路径，比如：../common/utils.js。

  • 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。

  • 公共代码文件和资源文件推荐放在common下，通过以上两条规则进行访问。

  • CSS样式文件中通过url()函数创建<url>数据类型，如：url(/common/xxx.png)。

说明

当代码文件A需要引用代码文件B时：

  • 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。

  • 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。

媒体文件格式

表1 支持的图片格式

格式支持版本支持的文件类型
BMPAPI Version 4+.bmp
JPEGAPI Version 4+.jpg
PNGAPI Version 4+.png

存储目录定义

从API Version 5开始，image组件支持应用私有目录内的图片资源访问。

目录类型路径前缀访问可见性说明
应用私有目录internal://app/仅本应用可见目录随应用卸载删除，路径禁止使用../等方式访问父目录

HarmonyOS鸿蒙开发指南:兼容JS的类Web开发范式 JS语法参考
斌擎科技
01-08 1304
JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。
HarmonyOS鸿蒙开发指南:兼容JS的类Web开发范式 框架说明
斌擎科技
01-08 1325
指定designWidth（屏幕逻辑宽度），所有与大小相关的样式（例如width、font-size）均以designWidth和实际屏幕宽度的比例进行缩放，例如在designWidth为720时，如果设置width为100px时，在实际宽度为1440物理像素的屏幕上，width实际渲染像素为200物理像素。在应用开发的hml和js文件中使用$r的语法，可以对JS模块内的resources目录下的json资源进行格式化，获取相应的资源内容，该目录与pages目录同级，具体目录结构请参考文件组织。
【鸿蒙（HarmonyOS）】UI开发的两种范式：ArkTS、JS（以登录界面开发为例进行对比）
热门推荐
守夜人
09-12 1万+
对比较于Android：ArkUI将界面设计和具体操作放到的一个文件中（当然ArkUI有组件自定义，这个就另当别论），这个方式比较新颖。HTML、CSS、JS这一套技术，相信很多IT人都已经非常熟悉，这也是我能快速入手HarmonyOS的重要因素。根据官方介绍，ArkUI提供了UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。ArkTS我也仅仅学习了四个月，相比较我在使用JS开发UI界面上而言，有所偏弱。功能的话，推荐使用ArkTS。
鸿蒙API14开发【文件组织】兼容JS的类Web开发范式
鸿蒙的技术博客
02-27 306
JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下：
实现多容器与宿主机之间数据共享
shuju1_的博客
08-29 1583
跨主机，实现多容器通信
基于js开发快速学习鸿蒙基础
weixin_49898946的博客
08-26 3220
鸿蒙有两套系统版本，一套是原先的鸿蒙系统，可以兼容安卓的应用，但是随着质疑声，有人质疑鸿蒙是套壳安卓，于是乎，另一套系统，纯血鸿蒙(Harmonyos Next)诞生了，也就意味着，鸿蒙不再支持安卓的应用了，所有的应用想要在鸿蒙系统上运行，就必须整一套针对于鸿蒙的系统，这也就打破了人们的质疑声。目前鸿蒙有多种方式开发，一个是基于js的鸿蒙开发，一个是基于ts的鸿蒙开发，还有就是用华为官方语言arkts以及仓颉这两种语言的开发。而本篇文章主要讲解的是基于js的鸿蒙开发的基础讲解，利于快速上手鸿蒙开发。
HarmonyOS 鸿蒙应用开发(十、第三方开源js库移植适配指南)
猫哥 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS，AIOT)
02-07 9868
js-e2e是基于eslint进行封装、配置规则，用于分析JS库代码对NodeJS和Web浏览器的内置模块、对象的依赖及兼容ES标准版本的工具，支持检查指定源码目录和指定三方库的兼容性。te。
鸿蒙5.0开发进阶：使用AKI轻松实现跨语言调用实现案例
HSMMQAQ的博客
10-28 1049
针对JS与C/C++跨语言访问场景，NAPI使用比较繁琐。
鸿蒙5.0进阶开发：ArkWeb框架-解决Web组件本地资源跨域问题
AyomQAQ的博客
01-15 938
为了提高安全性，ArkWeb内核不允许file协议或者resource协议访问URL上下文中来自跨域的请求。
鸿蒙5.0进阶开发：UI开发-容器组件（toolbar开发）
AyomQAQ的博客
01-07 350
toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。
鸿蒙5.0进阶开发：ArkWeb框架-使用Web组件加载页面
AyomQAQ的博客
01-16 949
页面加载是Web组件的基本功能。
鸿蒙5.0进阶开发：UI开发-容器组件（image-animator开发）
AyomQAQ的博客
01-06 600
image-animator组件为图片帧动画播放器。
HarmonyOS 鸿蒙应用开发(十一、面向鸿蒙开发的JavaScript基础)
猫哥 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS，AIOT)
02-19 4208
网络上介绍鸿蒙应用TypeScript语言学习的文章已经很多了，但唯独对JavaScript基础介绍偏少。这里补充介绍一下，觉得有帮助的小伙伴可以点击收藏。 ArkTS 是 TypeScript 的一种扩展版本，而 TypeScript 本身就是 JavaScript 的超集。这意味着 ArkTS 保留了大部分 JavaScript 的语法和编程范式。因此JavaScript 不仅是前端开发的核心，还在鸿蒙应用中扮演着重要角色。
2. 鸿蒙JSUI开发 - 组件使用，样式布局，按键交互
tingle1314的专栏
11-15 946
2. JSUI开发 - 组件使用，样式布局，按键交互。
鸿蒙Js网络 请求本机后台服务
qq_53720794的博客
10-13 1864
鸿蒙发送http请求到本机后台服务
关于鸿蒙系统 JS UI 框架源码的分析(1)
m0_74530944的博客
04-01 1398
首先鸿蒙应用是打包成 HAP (Harmony Ability Package) 格式分发的，和安卓 APK 一样都是压缩包，包结构大同小异。分发到端上之后，统一由鸿蒙(概念)的 API 承接，然后就分了不同的模式。在华为手机上推送的鸿蒙版本，可以无感兼容安卓应用，肯定是依赖了 AOSP 的。而开源的部分主要面向低端的 IoT 设备，或者手表手环之类的，甚至可以没有屏幕，2021年6月开源的版本刚支持了内存 128MB 以上的设备，还无法独立支撑手机上的应用。
鸿蒙HarmonyOS兼容JS的类Web开发-开发指导
特创数字
01-11 1558
设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
鸿蒙HarmonyOS实战：JS组件通用事件规范总结
2401_84917132的博客
08-22 1007
事件回调函数中通过参数可以携带额外的信息，如组件上的数据对象dataset，事件特有的回调参数。
【鸿蒙实战开发】—— 在应用中使用前端页面JavaScript
2401_88547687的博客
11-14 1424
在下面的示例中，应用侧页面中通过createWebMessagePorts方法创建消息端口，再把其中一个端口通过 postMessage() 接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。第一种使用方法，在应用侧new Promise。
鸿蒙5.0版开发：ArkTS组件通用属性（触摸热区设置）
最新发布
08-21
在 HarmonyOS 5.0 的 ArkTS 组件中，设置触摸热区（Touch Area）属性可以通过组件的 `touchable` 和 `hitTestBehavior` 等属性来实现。这些属性允许开发者定义组件响应触摸事件的区域和行为。 ### 配置触摸热区属性 #### 1. `touchable` 属性 `touchable` 属性用于控制组件是否可以响应触摸事件。设置为 `true` 时，组件将可以响应触摸事件；设置为 `false` 时，组件将忽略所有触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .touchable(true) } .width('100%') .height(100) } } ``` #### 2. `hitTestBehavior` 属性 `hitTestBehavior` 属性用于定义组件在命中测试（Hit Test）中的行为。它有以下几种取值： - `HitTestBehavior.self`: 组件仅在其自身的区域内响应触摸事件。 - `HitTestBehavior.none`: 组件不响应任何触摸事件。 - `HitTestBehavior.default`: 组件按照默认行为响应触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .hitTestBehavior(HitTestBehavior.self) } .width('100%') .height(100) } } ``` #### 3. 自定义触摸热区 如果需要更复杂的触摸热区配置，可以通过自定义组件的 `onTouch` 事件来实现。通过监听触摸事件，开发者可以自定义组件的响应逻辑。 ```ts @Component struct MyComponent { @State message: string = 'Touch Me' build() { Column() { Text(this.message) .fontSize(30) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.message = 'Touched Down' } else if (event.type === TouchType.Up) { this.message = 'Touched Up' } }) } .width('100%') .height(100) } } ``` ### 注意事项 - **性能优化**：在设置触摸热区时，应避免不必要的复杂逻辑，以确保应用的响应速度和性能。 - **交互设计**：触摸热区的设计应符合用户习惯，避免过于敏感或响应区域过小的问题。 通过以上方法，开发者可以灵活地配置 ArkTS 组件的触摸热区属性，以满足不同的交互需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值