WordPress.AMP,seo网站推广平台,如何找百度做网站,网页制作教程步骤文章目录 一、ArkTS1、语言定位与设计目标2、核心特性3、开发工具与生态4、学习资源 二、DevEco Studio空项目部分默认目录介绍1、基础的工程结构#xff08;1#xff09;pages#xff08;2#xff09;resources 三、DevEco Studio空项目默认代码index.ets介绍1、组件结构与… 文章目录 一、ArkTS1、语言定位与设计目标2、核心特性3、开发工具与生态4、学习资源 二、DevEco Studio空项目部分默认目录介绍1、基础的工程结构1pages2resources 三、DevEco Studio空项目默认代码index.ets介绍1、组件结构与装饰器1内容2装饰器3装饰器的工作原理 2、状态管理State3、UI 构建build 方法4、容器组件RelativeContainer5、文本组件Text6、布局对齐alignRules7、点击事件onClick8、资源引用说明 四、ArkUI1、ArkUI方舟开发框架1核心定位与背景2开发工具与生态支持 2、组件基础1组件分类 3、界面布局思路 五、属性1、通用属性1width2height3backgroundColor4padding5margin6border 2、文本属性1fontSize2fontColor3fontWeight 六、渲染1、条件渲染2、循环渲染3、状态管理和事件1onClick 一、ArkTS
ArkTS 是华为鸿蒙操作系统HarmonyOS推出的声明式编程语言专为高效构建跨设备应用而设计。它基于 TypeScript 语法提供简洁、直观的语法糖和工具链帮助开发者快速实现高性能、响应式的应用界面。
1、语言定位与设计目标
声明式编程范式 ArkTS 采用声明式语法如 Component、State 装饰器通过描述 UI “是什么” 而非 “如何做” 来构建界面。相比传统命令式编程声明式代码更简洁、易读且更符合现代前端开发趋势。TypeScript 超集 ArkTS 完全兼容 TypeScript继承了其静态类型检查、接口、枚举等特性同时扩展了鸿蒙特有的装饰器和 API降低了前端开发者的学习成本。跨设备统一开发 设计初衷是支持一次开发多端部署通过同一套代码适配手机、平板、手表、车机等不同设备形态减少重复开发。
2、核心特性
组件化与装饰器
Component声明 UI 组件支持嵌套组合实现界面复用。Entry标记应用入口组件。State实现响应式状态管理自动追踪数据变化并更新 UI。
响应式系统
自动状态绑定通过 State 装饰器声明响应式变量当变量值变化时关联的 UI 元素自动刷新。
布局系统
声明式布局提供 DirectionalLayout线性布局、Stack层叠布局、RelativeContainer相对布局等容器组件支持灵活排列子元素。
事件处理
直观的事件绑定通过 .onClick()、.onChange() 等方法绑定事件回调支持触摸、键盘、手势等多种交互。
生命周期管理
自动内存管理基于垃圾回收机制减少手动内存管理的风险。
资源管理
统一资源引用通过 $r() 函数引用应用资源如图像、字符串、布局文件支持多语言和设备适配。
3、开发工具与生态
DevEco Studio 华为官方 IDE集成代码编辑、调试、预览等功能支持 ArkTS 语法高亮、智能提示和实时预览。ArkUI 框架 基于 ArkTS 的 UI 框架提供丰富的组件库和布局系统支持声明式构建跨设备界面。鸿蒙 SDK 提供系统 API 访问能力如文件操作、网络请求、传感器数据等支持与原生功能深度集成。跨平台支持 通过鸿蒙的 分布式技术ArkTS 应用可无缝扩展到多设备实现设备间协同如手机控制智能家电。
4、学习资源
官方文档HarmonyOS 开发者文档教程与示例华为开发者联盟提供的官方教程和开源示例项目。社区支持HarmonyOS 开发者论坛、Stack Overflow 等社区提供技术交流和问题解答。
二、DevEco Studio空项目部分默认目录介绍
1、基础的工程结构
1pages
在 DevEco Studio 的鸿蒙项目中pages 目录是存放与应用页面相关代码文件的地方。
存放位置对于使用 ArkTS 语言开发的项目通常在 entry/src/main/ets 目录下。文件结构pages 文件夹下可以包含一个或多个页面每个页面都有对应的文件夹。作用用于管理应用的各个页面每个页面单独进行文件管理通过路由 API 实现页面的调度管理以实现应用内功能的解耦。例如在开发一个具有多个界面的鸿蒙应用时不同界面的相关代码就会分别存放在 pages 目录下对应的页面文件夹中方便开发者对各个页面的逻辑、样式和布局进行独立开发和维护。
2resources
在 DevEco Studio 的鸿蒙项目中resources 目录是存放应用资源文件的核心位置用于管理应用的静态资源如图像、字体、字符串、颜色、布局文件等。
base 目录基础资源
存放应用的默认资源不区分设备、语言、屏幕密度等条件是资源加载的**“兜底” 目录**。
多语言目录如 en-US、zh-CN
用于适配不同语言环境目录结构与 base/string 一致但存储对应语言的字符串资源。
screenable 目录屏幕密度适配
根据屏幕像素密度DPI存放不同版本的图片资源目录命名规则为 dpi-xxx如 dpi-160、dpi-240、dpi-320。 作用系统会根据设备屏幕密度自动加载对应目录的图片确保显示清晰。
device 目录设备类型适配
根据设备类型如手机、平板、车机存放特定布局或资源目录命名规则为 device-xxx如 device-phone、device-tablet。
三、DevEco Studio空项目默认代码index.ets介绍
鸿蒙应用开发中 ArkTS 语言编写的 index.ets 文件采用 Stage 模型鸿蒙 3.0 推荐架构
1、组件结构与装饰器
1内容
Entry
Component
struct Index {// 组件内容
}Entry标记该组件为应用的 入口点每个应用只能有一个 Entry 组件。Component声明这是一个 UI 组件可被其他组件引用或作为页面展示。struct Index定义组件名称为 Index采用 结构体struct语法符合 ArkTS 的面向对象设计。
2装饰器
在 ArkTS 语言中 符号开头的是装饰器Decorator用于为类、方法或属性添加额外的元数据或行为。这些装饰器是 ArkTS 框架的核心特性用于实现组件化、状态管理和生命周期控制。 Component声明一个类为 UI 组件使其能够被渲染为界面元素。 Entry标记组件为应用的 入口点每个应用只能有一个 Entry 组件。 State声明一个 响应式状态变量。当变量值变化时依赖它的 UI 会自动刷新。 Link创建一个 双向数据绑定子组件可以修改父组件的状态。 Prop从父组件 单向接收数据子组件不能直接修改。 Builder定义一个 可复用的 UI 片段提高代码复用性。
3装饰器的工作原理
元数据注入装饰器在编译时为类或属性添加额外信息框架通过这些信息实现特定功能如状态监听、生命周期管理。响应式系统State、Link 等装饰器使变量成为 可观察对象当值变化时框架会自动更新关联的 UI。
2、状态管理State
State message: string Hello World;State声明 message 为 响应式状态变量。当 message 变化时依赖它的 UI 元素会自动刷新。初始值默认显示 “Hello World”。
3、UI 构建build 方法
build() {// UI 布局
}build()组件的核心方法用于 定义 UI 结构。当组件被渲染时此方法会被调用。
4、容器组件RelativeContainer
RelativeContainer() {// 子组件
}
.height(100%)
.width(100%)RelativeContainer鸿蒙的 相对布局容器支持子组件通过相对位置如居中、对齐排列。宽高设置height(100%) 和 width(100%) 使容器占满整个屏幕。
5、文本组件Text
Text(this.message).id(HelloWorld).fontSize($r(app.float.page_text_font_size)).fontWeight(FontWeight.Bold)内容绑定Text(this.message) 将文本内容绑定到状态变量 message。ID 设置.id(HelloWorld) 为组件设置唯一标识用于自动化测试或样式引用。字体设置 fontSize($r(app.float.page_text_font_size))通过 $r 引用资源文件中的字体大小如 resources/base/element/dimens.json 中定义的值。fontWeight(FontWeight.Bold)设置字体为粗体。
6、布局对齐alignRules
.alignRules({center: { anchor: __container__, align: VerticalAlign.Center },middle: { anchor: __container__, align: HorizontalAlign.Center }
})垂直居中center 规则使文本在容器中 垂直居中。水平居中middle 规则使文本在容器中 水平居中。container表示当前组件的父容器即 RelativeContainer。
7、点击事件onClick
.onClick(() {this.message Welcome;
})事件绑定.onClick() 监听文本的点击事件。状态更新点击后message 被更新为 “Welcome”触发 UI 重新渲染。
8、资源引用说明
$r(app.float.page_text_font_size)$r资源引用函数用于获取 resources 目录下的资源。引用路径app.float.page_text_font_size 对应 resources/base/element/dimens.json 中的字体大小定义例如
{float: [{ name: page_text_font_size, value: 30fp }]
}四、ArkUI
1、ArkUI方舟开发框架
1核心定位与背景
ArkUI 是华为为 HarmonyOS鸿蒙系统 打造的 跨设备应用开发框架旨在通过统一的开发语言和工具链帮助开发者高效构建 多端手机、平板、智能穿戴、智慧屏、车机等一致、性能优越 的应用界面实现 “一次开发多端部署” 的跨设备开发目标。
2开发工具与生态支持
DevEco Studio 官方集成开发环境IDE提供 代码编辑、实时预览、多端调试、性能分析 等全流程工具大幅提升开发效率。内置 模拟器可快速预览应用在不同设备如手机、平板、手表上的显示效果。 生态与社区 华为开发者联盟提供 文档、教程、示例代码 及技术支持社区活跃开发者可通过论坛、直播等获取资源。
2、组件基础
在 HarmonyOS 中ArkUI 是官方推荐的 UI 框架它提供了声明式语法如 ArkTS/TS和丰富的组件库让开发者可以高效构建美观、流畅的界面。
1组件分类
ArkUI 组件按功能可分为以下几类。
容器组件Layout Containers用于组织和排列子组件控制布局结构。 DirectionalLayout线性布局水平 / 垂直排列线性排列子组件支持水平 / 垂直方向。 RelativeContainer相对布局通过相对位置定位通过相对位置定位子组件如居中、对齐父容器边缘。
基础组件Basic Components构成界面的基本元素。
Text文本显示。 常用属性 text文本内容fontSize字体大小fontColor字体颜色fontWeight字体粗细textAlign文本对齐方式 Button按钮可点击。 常用属性 type按钮类型普通、胶囊、圆角等onClick点击事件backgroundColor背景色enabled是否启用 导航组件Navigation用于页面导航和层级管理。 数据展示组件Data Display用于展示列表、网格等数据。 交互组件Interaction提供用户交互功。
3、界面布局思路
“先界面后内容” 指的是在进行界面开发时首先搭建好整体的界面框架和布局结构确定好界面的分区、组件的排列方式、视觉层次等就像建造房屋时先搭建好框架然后再往这个框架中填充具体的内容如文字、图片、数据等如同在房屋框架内装修布置。这样的开发流程可以避免内容和布局混杂导致的逻辑混乱使开发过程更具条理性。
五、属性
1、通用属性
1width
width(value: Length)设置组件自身的宽度缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽则会画出父组件的范围。
参数名类型必填说明value Length是要设置的组件宽度。单位vp
2height
height(value: Length)设置组件自身的高度缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高则会画出父组件的范围。
参数名类型必填说明valueLength是要设置的组件高度。单位vp
3backgroundColor
backgroundColor(value: ResourceColor): T设置组件背景色。
参数名类型必填说明valueResourceColor是设置组件的背景色。
4padding
padding(value: Padding | Length | LocalizedPadding)设置组件的内边距属性组件内容与组件边界之间的距离。
参数名类型必填说明valuePadding | Length | LocalizedPadding12是设置组件的内边距。参数为Length类型时四个方向内边距同时生效。默认值0单位vppadding设置百分比时上下左右内边距均以父容器的width作为基础值。
5margin
margin(value: Margin | Length | LocalizedMargin)设置组件的外边距属性组件与其他组件之间的距离。
参数名类型必填说明valueMargin | Length | LocalizedMargin12是设置组件的外边距。参数为Length类型时四个方向外边距同时生效。默认值0单位vpmargin设置百分比时上下左右外边距均以父容器的width作为基础值。在Row、Column、Flex交叉轴上布局时子组件交叉轴的大小与margin的和为整体。例如Column容器宽100其中子组件宽50margin left为10right为20子组件水平方向偏移10。
6border
border(value: BorderOptions)设置边框样式。
参数名类型必填说明valueBorderOptions是统一边框样式设置接口。**说明**边框宽度默认值为0即不显示边框。从API version 9开始父节点的border显示在子节点内容之上。
2、文本属性
1fontSize
fontSize(value: number | string | Resource)设置字体大小。
参数名类型必填说明valueResource | number | string是字体大小。fontSize为number类型时使用fp单位。字体默认大小16fp。string类型支持number类型取值的字符串形式可以附带单位例如10、“10fp”不支持设置百分比字符串。
2fontColor
fontColor(value: ResourceColor)设置字体颜色。
参数名类型必填说明valueResourceColor是字体颜色。
3fontWeight
fontWeight(value: number | FontWeight | string)设置文本的字体粗细设置过大可能会在不同字体下有截断。
参数名类型必填说明valueFontWeight | number | string是文本的字体粗细number类型取值[100, 900]取值间隔为100默认为400取值越大字体越粗。string类型仅支持number类型取值的字符串形式例如400以及bold、“bolder”、“lighter”、“regular”、“medium”分别对应FontWeight中相应的枚举值。默认值FontWeight.Normal
六、渲染
1、条件渲染
let num: number 1Entry
Component// 组件
struct Index {build() { // 构建Column() {if (num 1) {Text(text 1)} else if (num 2) {Text(text 2)} else {Text(text 3)}}.padding(20)}
}2、循环渲染
let names: string[] [a, b, c]Entry
Component// 组件
struct Index {build() { // 构建Column() {ForEach(names, (item: string, index: number) {Text(item index)})}.padding(20)}
}3、状态管理和事件
1onClick
onClick(event: (event: ClickEvent) void): T点击动作触发该回调。
参数
参数名类型必填说明eventClickEvent是获得ClickEvent对象。
返回值
类型说明T返回当前组件。
