网站 成品下载,大型网站集群怎么做,小程序游戏定制开发,游戏软件开发公司排名文章目录 前言项目概述HarmonyOS应用架构项目结构Ability生命周期 ArkTS语言特性装饰器状态管理 UI组件与布局基础组件响应式布局样式与主题 页面路由与参数传递页面跳转参数接收 数据绑定与循环渲染数据接口定义循环渲染 条件渲染组件生命周期最佳实践与性能优化组件复用响应式… 文章目录 前言项目概述HarmonyOS应用架构项目结构Ability生命周期 ArkTS语言特性装饰器状态管理 UI组件与布局基础组件响应式布局样式与主题 页面路由与参数传递页面跳转参数接收 数据绑定与循环渲染数据接口定义循环渲染 条件渲染组件生命周期最佳实践与性能优化组件复用响应式设计性能优化 前言
随着华为HarmonyOS生态的不断发展越来越多的开发者开始关注并投入到HarmonyOS应用开发中。本文将通过一个实际的项目案例详细讲解HarmonyOS应用开发的核心技术和最佳实践帮助开发者快速掌握HarmonyOS应用开发的要点。
项目概述
本项目是一个基于HarmonyOS的学习应用主要包含了一个仪表盘示例页面用于展示业务数据概览。项目采用了ArkTS语言开发使用了HarmonyOS提供的UI框架和组件实现了响应式布局和页面路由等功能。
HarmonyOS应用架构
项目结构
HarmonyOS应用的项目结构遵循一定的规范主要包括以下几个部分
entry应用的入口模块包含了应用的主要代码和资源 src/main/etsArkTS代码目录 entryability应用的Ability实现是应用的入口点pages应用的页面组件components可复用的UI组件common公共工具和常量 src/main/resources应用的资源文件如图片、字符串等src/main/module.json5模块配置文件
Ability生命周期
Ability是HarmonyOS应用的基本组成单元类似于Android的Activity。在本项目中EntryAbility是应用的主入口它的生命周期包括
export default class EntryAbility extends UIAbility {onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {// Ability创建时调用}onDestroy(): void {// Ability销毁时调用}onWindowStageCreate(windowStage: window.WindowStage): void {// 窗口创建时调用在这里加载主页面windowStage.loadContent(pages/Index, (err) {// 页面加载回调});}onWindowStageDestroy(): void {// 窗口销毁时调用}onForeground(): void {// Ability进入前台时调用}onBackground(): void {// Ability进入后台时调用}
}ArkTS语言特性
ArkTS是HarmonyOS应用开发的首选语言它基于TypeScript增加了声明式UI和状态管理等特性。
装饰器
ArkTS中的装饰器是一种特殊的声明可以附加在类、方法、访问器、属性或参数上。本项目中使用了多种装饰器
Entry标记一个组件为页面入口Component定义一个自定义组件State定义组件内部的状态变量当状态变化时会触发UI刷新Prop用于父组件向子组件传递数据
例如在NavBar组件中
Component
export struct Navbar {Prop title: string build() {// 组件UI构建}
}状态管理
ArkTS提供了多种状态管理机制用于处理组件内部状态和组件间通信
State组件内部状态变化时会触发组件重新渲染Prop父组件向子组件传递的属性子组件不能修改Link双向绑定父子组件可以共同修改AppStorage应用级的状态存储
在DashboardExample组件中使用State管理数据
State screenWidth: number 0
State dataCards: DashboardCardItem[] [{title: 今日销售额, value: 8,846, unit: 元, trend: 12.5%, color: #2A9D8F},// 其他数据...
]UI组件与布局
基础组件
HarmonyOS提供了丰富的基础UI组件本项目中使用了
Text文本显示组件Image图片显示组件Column垂直布局容器Row水平布局容器Flex弹性布局容器List列表容器
响应式布局
HarmonyOS支持响应式布局可以根据屏幕尺寸自适应调整UI。在DashboardExample中通过检测屏幕宽度实现响应式布局
aboutToAppear() {// 获取屏幕宽度用于响应式布局this.screenWidth px2vp(AppStorage.Getnumber(windowWidth) || 720)
}// 根据屏幕宽度决定每行显示的卡片数量
Flex({ wrap: FlexWrap.Wrap, justifyContent: this.screenWidth 600 ? FlexAlign.Start : FlexAlign.SpaceAround }) {// 卡片布局
}样式与主题
ArkTS支持链式调用设置组件样式使UI代码更加简洁
Text(card.value).fontSize(28).fontWeight(FontWeight.Bold).fontColor(card.color)还可以通过设置backgroundColor、borderRadius、shadow等属性实现丰富的视觉效果
.width(this.screenWidth 600 ? 22% : 45%)
.height(120)
.padding(16)
.margin(8)
.borderRadius(12)
.backgroundColor(Color.White)
// 添加卡片阴影效果
.shadow({radius: 4, color: #1A000000, offsetY: 2})页面路由与参数传递
HarmonyOS提供了router模块用于页面间导航和参数传递。
页面跳转
在Index页面中通过router.pushUrl实现页面跳转
router.pushUrl({url: item.path,params: {desc: item.desc,value: item.value}
})参数接收
在目标页面中通过router.getParams获取传递的参数
onPageShow(): void {// 获取传递过来的参数对象const params router.getParams() as Recordstring, string;// 获取传递的值if (params) {this.desc params.desc as stringthis.title params.value as string}
}数据绑定与循环渲染
数据接口定义
使用TypeScript接口定义数据结构提高代码的可读性和可维护性
export interface DashboardCardItem {title: string; // 卡片标题value: string; // 数值内容unit: string; // 数值单位trend: string; // 趋势变化color: string; // 卡片主题颜色
}循环渲染
使用ForEach语法实现列表循环渲染
ForEach(this.dataCards, (card: DashboardCardItem) {// 数据卡片UI构建
})条件渲染
ArkTS支持在UI构建中使用条件表达式实现动态UI
// 根据趋势是否为正值显示不同颜色
Text(card.trend).fontSize(14).fontColor(card.trend.includes() ? #2A9D8F : #E76F51)组件生命周期
ArkTS组件有多个生命周期回调函数
aboutToAppear组件即将出现时调用用于初始化aboutToDisappear组件即将消失时调用用于清理资源onPageShow页面显示时调用onPageHide页面隐藏时调用onBackPress处理返回按键事件
aboutToAppear() {// 初始化工作this.screenWidth px2vp(AppStorage.Getnumber(windowWidth) || 720)
}onPageShow(): void {// 页面显示时的处理const params router.getParams() as Recordstring, string;// ...
}最佳实践与性能优化
组件复用
将通用UI封装为可复用组件如本项目中的NavBar组件
Component
export struct Navbar {Prop title: string build() {Row(){Image($r(app.media.tornLeft)).width(30).onClick((){router.back()})Text(this.title).fontSize(20).fontWeight(800)}.justifyContent(FlexAlign.SpaceBetween).width(100%).height(50)}
}响应式设计
根据不同屏幕尺寸调整布局提升用户体验
.width(this.screenWidth 600 ? 22% : 45%)性能优化
懒加载只在需要时加载组件和资源状态管理合理使用状态管理机制避免不必要的重渲染资源复用复用组件和资源减少内存占用
