移动应用开发技术与实战（ArkTS）（微课版）课件全套 项目1-12 认识鸿蒙- 考研通App开发

鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述认识系统定位、战略与核心技术1鸿蒙"1+8+N"全场景战略2鸿蒙发展历程与发展意义3鸿蒙三大核心技术理念4鸿蒙高效开发与测试本页用于说明本节学习路径，后续按“概念—图示—操作—总结”展开。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述“1+8+N”全场景战略鸿蒙是什么？•面向万物互联时代的分布式操作系统。•基于同一套系统能力，适配多种终端形态。•目标是提供全场景业务能力，让设备之间更好协同。分布式｜多终端｜全场景｜慧生活图1-1“1+8+N”全场景战略鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述“1+8+N”的结构理解1智能手机智慧生活的主入口8TV、音箱、眼镜、手表、车机、耳机、PC、平板华为自有重点终端N生态伙伴提供的泛IoT设备覆盖移动办公、智能家居、运动健康、影音娱乐、智能出行等场景1和8由华为构建，N由生态伙伴提供；其核心不是单一设备，而是“手机入口+多终端协同+生态设备扩展”的全场景生态。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述鸿蒙发展历程2019鸿蒙1.0首次应用于荣耀智慧屏2020鸿蒙2.0支持部分手机、车机、电视等设备2022鸿蒙3.0超级终端扩展；鸿蒙智联、万能卡片、隐私安全等能力增强2023鸿蒙4.0智能互联能力增强，多屏跨设备投屏实现突破2023鸿蒙NEXT预览版仅支持鸿蒙内核与鸿蒙系统应用，不再兼容安卓应用2024NEXT星河版“纯血”鸿蒙，统一系统与生态，整机性能进一步提升讲解主线：从智慧屏起步→多设备支持→超级终端→原生鸿蒙生态。录课时重点突出“NEXT/星河版”的生态转向。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述发展意义：从系统到生态为什么鸿蒙重要？•推动万物互联场景落地，让手机、计算机、智能穿戴、车载系统、平板、电视等终端联为一体。•从“设备可用”走向“设备协同”，为全场景智慧生活提供系统底座。•体现我国软件产业和自主操作系统生态建设的重要进展。一句话理解鸿蒙不是只解决“单设备好不好用”，而是进一步解决“多设备如何协同工作、服务如何跨端延续”。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述三大核心技术理念一次开发多端部署一个工程，一次开发上架，多端按需部署。可分可合自由流转业务可拆分组合，服务可跨设备流转。统一生态原生智能统一接入标准，开放AI能力，降低智能化门槛。讲解建议：这一页先建立总框架，后面三页分别展开。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述理念一：一次开发，多端部署核心含义•一个工程，一次开发上架，多端按需部署。•核心目标是降低多设备应用的开发和维护成本。•关键能力：多端开发环境、多端开发能力、多端分发机制。•典型支撑：多端双向预览、低代码可视化开发、交互事件归一。图1-3一次开发，多端部署不是简单“复制到多端”，而是让UI、交互和设备能力按终端特征适配。多端UI适配｜设备能力抽象多设备按需分发鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述理念二：可分可合，自由流转可分可合开发态将业务拆分为多个元服务，部署态可把一个或多个元服务组合打包成应用。自由流转支持跨端迁移和多端协同，让用户在不同设备之间连续使用同一服务。跨端迁移：时间上的串行交互多端协同：时间上的并行交互元服务理解元服务是鸿蒙中的轻量化服务形态，具有独立入口，可通过点击、碰一碰、扫一扫等方式触发，无需显式安装，帮助服务更快触达用户。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述理念三：统一生态，原生智能统一生态•支持主流跨平台开发框架接入，如ReactNative、Flutter、WEEX、Taro、uni-app等。•通过统一标准降低已有应用迁移成本。原生智能•通过AI能力开放，帮助开发者快速实现应用智能化。•原生智能不是一个单点功能，而是通过机器学习工具包、核心AI接口、核心深度学习接口和意图框架等能力支撑应用智能化。图1-6原生智能机器学习工具包CoreAIAPI深度学习接口鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述高效开发与测试体系ArkTS语言声明式UI、状态管理，提升开发效率ArkUI框架鸿蒙生态原生UI开发框架Stage模型定义应用结构与生命周期HarmonyOSSDK开放应用框架、系统、媒体、图形、服务和AI能力DevEcoStudio工程管理、代码编辑、预览、调试、设备模拟测试套件测试标准+测试工具，覆盖性能、功耗、稳定性、兼容性、UX、安全等这一页重点体现“语言—框架—模型—SDK—工具—测试”的开发闭环。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述ArkTS语言与ArkUI框架ArkTS鸿蒙生态应用开发语言，源码文件后缀为ets，提供声明式UI和状态管理能力。ArkUI鸿蒙生态原生UI开发框架，支持声明式开发范式和类Web开发范式。图1-7ArkUI主体结构鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述HarmonyOSSDK开放能力六大领域•应用框架•系统能力•媒体能力•图形能力•应用服务•AI能力SDK是鸿蒙生态建设的重要组成部分，用于支撑应用和元服务开发。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1鸿蒙概述DevEcoStudio与测试套件DevEcoStudio：工程管理、代码编辑、界面预览、编译构建、代码调试、性能调优、设备模拟、命令行工具、端云一体化开发。测试套件：测试标准+测试工具，既解决“测什么”，也解决“怎么测”，覆盖性能、功耗、稳定性、兼容性、UX、安全、分布式等。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.1小结用四句话回顾鸿蒙概述系统定位面向万物互联的分布式操作系统。战略结构1+8+N构建全场景智慧生活体系。核心理念一次开发、多端部署；可分可合、自由流转；统一生态、原生智能。开发支撑ArkTS、ArkUI、SDK、DevEcoStudio和测试套件形成完整闭环。可在本页结束1.1视频，然后单独开始1.2开发环境搭建视频。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境账号、工具、项目与模拟器1完成华为开发者联盟账号注册与认证2下载并安装DevEcoStudio3创建HelloWorld基础项目4使用模拟器运行并看到HelloWorld本页用于说明本节学习路径，后续按“概念—图示—操作—总结”展开。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境注册华为开发者联盟账号操作步骤•进入华为开发者联盟官网，单击右上角头像进入登录页面。•已有华为账号可直接登录；没有账号可使用手机号注册。•注册过程中需要确认账号通知、用户协议及隐私声明。•按提示完成开发者身份、岗位、行业和兴趣方向选择。图示依次对应：官网入口、账号登录、账号注册页面；实际操作时以当前官网页面为准。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境协议确认与实名认证实名认证的作用•用于确认开发者身份，是后续获取开发资源的重要前提。•进入账号信息后选择“去认证”，选择个人开发者，再根据向导填写资料并提交。•教材推荐使用人脸识别认证，操作相对方便。注意：网站界面可能更新，录制时以当前官网实际页面为准。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境下载DevEcoStudio下载路径开发者联盟官网→开发→DevEcoStudio→立即下载→下载中心。•根据计算机系统选择Windows或Mac版本。•工具官网会持续更新，下载最新版即可。•下载前通常需要登录已注册的华为账号。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境安装DevEcoStudio：安装向导安装要点•下载完成后先解压软件压缩包，进入目录后双击安装程序。•安装位置可默认在C盘，也可按实际需要选择其他路径。建议：路径不要包含中文和特殊符号，便于后续配置和排错。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境安装选项与安装完成安装选项：勾选桌面快捷方式，勾选“添加bin文件夹到PATH”用于更新PATH变量；随后选择开始菜单目录并开始安装。安装完成后可暂不重启。新版DevEcoStudio通常已集成SDK与构建插件。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境首次启动DevEcoStudio首次启动时选择不导入旧配置，接受协议后进入欢迎界面，在Projects中创建新项目。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境创建HelloWorld项目：模板选择选择Application，然后选择EmptyAbility模板，进入工程配置界面。填写工程名、包名、保存路径、SDK版本、模块名和支持设备类型。教材示例参数Projectname：HelloWorld；Bundlename：com.example.helloworld；Savelocation：D:\WorkSpace\DevEcoWorkSpace\HelloWorld。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境项目主界面与预览项目创建完成后，DevEcoStudio会自动同步工程；右侧Previewer选项卡可预览UI效果，便于快速检查界面。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境使用模拟器运行项目：入口与镜像下载操作说明•在设备列表中打开DeviceManager。•首次使用，选择模拟器存放位置，新建Emulator。•选择镜像存放位置，下载镜像。•接受许可协议后等待镜像文件下载完成。按钮顺序DeviceManager→+NewEmulator→下载镜像→Accept→Next→Finish鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境配置并启动虚拟设备•下载完成后，下载图标变为删除图标，再单击Next。•配置虚拟设备名称、运行内存和存储大小后，完成创建。•点击“绿色三角”启动设备。•补充提示：若Windows未开启Hyper-V，按系统提示开启后再启动。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2搭建鸿蒙开发环境运行HelloWorld项目运行结果判断•在启动好的虚拟设备上选择运行应用。•若虚拟设备上出现“HelloWorld”，说明项目创建、构建和模拟运行流程基本成功。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.21.2小结开发环境搭建检查清单账号准备完成华为开发者联盟账号注册与实名认证。工具安装下载安装DevEcoStudio，并确认SDK与构建工具可用。项目创建创建EmptyAbility模板项目，完成工程配置和同步。模拟运行创建虚拟设备，下载镜像，启动模拟器并运行HelloWorld。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.2实训1.1鸿蒙操作系统架构与特性调研1调研鸿蒙操作系统的微内核架构，理解其设计理念及其与传统操作系统的区别。2研究鸿蒙操作系统的分布式技术，包括设备虚拟化、分布式数据管理和软总线通信机制。3收集和分析鸿蒙操作系统在多设备协同方面的应用案例。4分析鸿蒙操作系统在技术发展上的趋势。建议成果：形成一页调研报告或一份小组汇报PPT，要求“有资料来源、有案例、有自己的分析”。鸿项目11.1鸿蒙概述1.2开发环境实训1.1实训1.2实训1.2鸿蒙应用开发与生态建设调研1学习鸿蒙应用开发支持的主要编程语言和框架。2理解鸿蒙应用开发的完整流程。3调研鸿蒙应用生态的现状和未来展望。建议成果：形成一份“鸿蒙应用开发与生态建设”调研报告，要求包含开发语言、开发流程、生态现状与个人分析。调研提示重点关注：•ArkTS、ArkUI与DevEcoStudio•需求分析、设计、编码、测试、部署•鸿蒙原生应用生态建设现状TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.1初识ArkTS2.1初识ArkTS2.1.1ArkTS概述2.1.2第一个程序1认识ArkTS在HarmonyOS开发中的主力语言地位2理解ArkTS与TypeScript/JavaScript的关系3掌握第一段ArkTS代码的编写与注释4会在Previewer中查看日志输出学习提示：本节按“概念—代码—运行效果—应用场景”推进。03TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.1初识ArkTSArkTS概述ArkTS是什么？•ArkTS是HarmonyOS优选的主力应用开发语言。•它保留TypeScript基本语法风格，同时强化静态检查与分析。•ArkTS提供声明式UI范式、状态管理等能力，适合开发高性能鸿蒙应用。ArkTSAPI发展历程示意图学习提示：ArkTS不是从零开始的新语言，而是在TS基础上面向鸿蒙场景增强。04TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.1初识ArkTSAPI演进从API9到API12•API9阶段：重点扩展TS/JS能力，增加声明式UI支持。•API10—12阶段：更强调性能、安全性与静态类型支持，ArkTS逐步移除资源消耗较大的动态特性，引入并发能力与空值安全机制。ArkTS从扩展能力逐步走向性能优化学习提示：把本页作为语言发展脉络理解，不必逐项展开底层细节。05TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.1初识ArkTS第一个ArkTS程序//计算x的值letx:number=24*32/*判断x是否大于10000*/if(x>10000){console.log('值大于10000')}else{console.log('值小于等于10000')}let声明变量｜if进行判断｜console.log输出日志06TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.1初识ArkTS程序运行与日志查看1打开HelloWorld工程中的pages/Index.ets文件。2在文件末尾输入示例代码并保存。3打开右侧Previewer选项卡启动预览器。4在底部工具栏选择Log项。5选择Previewers下的phone设备查看日志输出。07TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础从变量到模块的完整语法框架2.2ArkTS语法基础变量与数据类型语句与函数类与泛型模块与其他类型1会使用let、const声明变量与常量2能根据场景选择number、string、boolean、数组和对象3掌握if、switch、for、while等基本控制语句4理解函数、类、泛型和模块化的代码组织方式学习提示：本节按“概念—代码—运行效果—应用场景”推进。08TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础声明：变量、常量与类型推断//变量：值可以改变leta:number=100a=200//常量：只能赋值一次constPI:number=3.14//自动类型推断letb=100constrate=3.14console.log(typeofb)console.log(typeofrate)变量声明格式示意图let可变｜const只读｜初始值支持类型推断09TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础常用数据类型number表示数字，包括整数与浮点数，如age、height。string表示字符串，如姓名、地址、提示语等。boolean表示布尔值，只能取true或false。数组用于保存多个相同类型的数据，索引从0开始。对象用于保存多个不同类型的数据，常与interface配合。接口约定对象结构，提升代码可读性与类型安全。学习提示：重点理解这些类型解决什么问题，不需要死记定义。10TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础数组与对象//数组letnames:string[]=['TianYi','TianEr','TianSan']console.log('名字',names[0])//对象interfacePerson{name:stringage:number}letp1:Person={name:'TianYi',age:21}console.log('名字',)console.log('年龄',p1.age)数组适合批量数据｜对象适合结构化数据｜interface约束对象字段11TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础条件语句：if与switchletscore:number=88if(score>=90){console.log('优秀')}elseif(score>=80){console.log('良好')}elseif(score>=70){console.log('中等')}elseif(score>=60){console.log('及格')}else{console.log('不及格')}letlevel:string='B'switch(level){case'A':console.log('优秀');breakcase'B':console.log('良好');breakdefault:console.log('不及格')}if适合范围判断｜switch适合精确匹配｜case后注意break12TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础循环语句：for与while//for：循环次数较明确letsum=0for(leti=0;i<10;i++){sum+=i}console.log('累加',sum)//while：循环次数不确定leti=0while(i<10){i++}for适合次数明确｜while适合条件驱动｜break/continue控制循环13TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础函数：声明、参数与返回值functionadd(x:number,y:number):number{returnx+y}constresult=add(10,20)console.log('结果',result)//可选参数functionsay(name?:string){console.log(name?'hello'+name:'hello')}//默认参数functionhello(name:string='Jim'){console.log('hello',name)}参数类型｜返回值类型｜可选/默认参数14TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础箭头函数与函数类型letadd=(x:number,y:number):number=>{returnx+y}//简写形式letadd2=(x:number,y:number)=>x+y//函数类型约束letadd3:(x:number,y:number)=>number=(x,y)=>x+y语法更简洁｜可省略返回值类型｜适合回调函数15TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础类：属性、构造函数与方法classPerson{name:string=''age:number=0constructor(name:string,age:number){=namethis.age=age}displayInfo(){console.log('name='++',age='+this.age)}}constp1=newPerson('TianYi',21)p1.displayInfo()class定义类｜new创建对象｜this访问当前对象16TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础继承与可见性修饰符classStudentextendsPerson{score:number=0constructor(name:string,age:number,score:number){super(name,age)this.score=score}study(){console.log('Iamstudying')}}classUser{publicname:string=''privateage:number=0protectedid:number=1}说明：Person类沿用上一页示例｜extends继承｜super调用父类构造函数｜public/private/protected限制访问17TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础泛型：让代码更加通用interfaceResult<T>{message:stringcode:numberdata:T}functionlast<T>(arr:T[]):T{returnarr[arr.length-1]}classBox<T>{value:Tconstructor(value:T){this.value=value}}constb=newBox<number>(100)T表示类型参数｜可用于接口、函数和类｜调用时指定类型，提升代码复用性18TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础模块化：export与import为什么需要模块？•复杂程序通常会拆分为多个独立文件，每个文件可看作一个模块。•模块默认有自己的作用域，外部不能直接访问内部内容。•通过export导出，通过import导入，才能在其他文件中使用。学习提示：模块化是工程开发的基础，能让代码更清晰、更易维护。19TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础模块导出与导入示例20Test01.ets（导出）exportconstcount=100exportclassPerson{name:string=''age:number=0}exportconstadd=(x:number,y:number)=>x+yIndex.ets（导入）import{count,Person,add}from'./Test01'letp=newPerson()='TianYi'console.log(count)console.log(add(10,20))学习提示：还可以使用as重命名导入，解决命名冲突。TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.2ArkTS语法基础其他类型联合类型一个变量可以存储多种指定类型，如number|string。字面量联合类型把变量值限制在一组具体数值或字符串范围内。枚举类型把一组常量组织起来，提升可读性。21//联合类型与字面量联合类型letjudge:number|string=100judge='A'letcolor:'red'|'green'|'blue'='red'//枚举类型enumColorSet{Red=0xFF0000,Green=0x00FF00,Blue=0x0000FF}TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.3ArkUI布局基础从组件组合到渲染控制2.3ArkUI布局基础组件拆解系统组件自定义组件条件与循环渲染1理解ArkUI组件化界面的构成方式2会使用Text、Button、Image等系统组件3能创建并复用自定义组件4掌握if条件渲染与ForEach循环渲染学习提示：本节按“概念—代码—运行效果—应用场景”推进。22TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.3ArkUI布局基础组件拆解一个组件由哪些部分组成？•装饰器：如@Entry、@Component、@State，赋予结构特殊含义。•UI描述：用声明式方式描述界面结构。•属性方法：配置样式和属性，如width、fontSize等。•事件方法：绑定交互行为，如onClick。ArkUI组件拆解示意图学习提示：可以把组件看作“结构+样式+事件”的组合体。23TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.3ArkUI布局基础系统组件的使用方式@Entry@ComponentstructIndex{build(){Column(){Button({type:ButtonType.Circle}){Image($r('app.media.startIcon')).width(25).height(25)}.width(50).height(50).backgroundColor(Color.Red).onClick(()=>{console.log('单击')})}}}系统组件由框架提供，可直接使用组件参数｜子组件｜属性方法｜事件方法24TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.3ArkUI布局基础自定义组件@Entry@ComponentstructIndex{build(){Column(){MyComponent()}}}@ComponentstructMyComponent{build(){Text('自定义组件')}}自定义组件便于封装与复用可组合｜可重用｜数据驱动UI更新25TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.3ArkUI布局基础条件渲染@StateisFollow:boolean=falsebuild(){Column(){if(this.isFollow){Button('已关注').backgroundColor('#acacac')}else{Button('回关').backgroundColor('#ffaa00')}}}if/else控制显示｜状态变量改变后UI刷新｜适合按钮状态切换26TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固2.3ArkUI布局基础循环渲染ForEach@Statetitles:string[]=['电子产品','精品服饰','母婴产品','影音娱乐','海外旅游']build(){Column(){ForEach(this.titles,(item:string,index)=>{Text(item).fontSize(34).fontWeight(700).fontColor(Color.Orange)})}}数组作为数据源｜item表示数组元素｜index表示元素索引27TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.1饮品自动售货机任务场景无人售货机业务拆解•商场、车站等场景中，自动售货机需要展示饮品信息。•用户选择饮品和数量后，系统需要计算总金额。•本实训重点训练接口、类、方法和测试代码的综合使用。饮品自动售货机场景图学习提示：实训重点是业务逻辑如何建模，不必展开所有界面细节。28TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.1饮品自动售货机用接口与类实现基础业务逻辑任务要求Drink接口VendingMachine类金额统计1定义饮品数据结构2实现饮品展示与选择逻辑3统计已选择饮品的总金额4通过测试代码验证功能学习提示：本节按“概念—代码—运行效果—应用场景”推进。29TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.1饮品自动售货机接口与类设计interfaceDrink{name:stringprice:number}classVendingMachine{privatedrinks:Drink[]privatetotalMoney:numberconstructor(drinks:Drink[]){this.drinks=drinksthis.totalMoney=0}}用接口描述数据，用类封装业务Drink描述饮品｜VendingMachine封装售货机｜private保护内部数据30TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.1饮品自动售货机选择饮品与统计金额publicselectDrink(drinkName:string,drinkNum:number):void{for(leti=0;i<this.drinks.length;i++){if(this.drinks[i].name===drinkName){this.totalMoney+=this.drinks[i].price*drinkNumbreak}}}publicgetTotalMoney():number{returnthis.totalMoney}for遍历饮品｜if匹配名称｜price×number计算金额31TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.1饮品自动售货机初始化与测试constdrinks:Drink[]=[{name:'Coffee',price:2.5},{name:'Tea',price:3.5},{name:'Water',price:1.5}]constvendingMachine=newVendingMachine(drinks)vendingMachine.displayDrinks()vendingMachine.selectDrink('Coffee',2)vendingMachine.selectDrink('Tea',2)vendingMachine.selectDrink('Water',1)console.log('总金额:',vendingMachine.getTotalMoney())通过测试代码验证业务功能初始化数据｜创建对象｜调用方法｜查看结果32TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.2新闻列表任务场景•新闻应用通常用列表展示多条新闻。•每条新闻包括标题和创建时间两个核心信息。•本实训重点训练数组、对象、ForEach和文本样式控制。新闻列表运行效果学习提示：可将新闻列表与实际新闻App首页联系起来理解。33TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.2新闻列表用数组与ForEach实现动态列表任务要求NewsItem接口ForEach渲染文本样式1定义新闻数据结构2初始化新闻列表数据3使用ForEach动态渲染新闻条目4处理标题溢出与时间显示学习提示：本节按“概念—代码—运行效果—应用场景”推进。34TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.2新闻列表数据结构与初始化interfaceNewsItem{stem:stringcreatedAt:string}@Statelist:NewsItem[]=[{stem:'鸿蒙OS迎来重大更新，性能提升显著',createdAt:'2023-04-1008:00:00'},{stem:'鸿蒙OS智能设备市场占有率持续增长',createdAt:'2023-04-1109:30:00'},{stem:'开发者社区热烈反响：鸿蒙OS的潜力与挑战',createdAt:'2023-04-1218:20:00'}]stem表示标题｜createdAt表示创建时间｜@State保存列表数据35TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.2新闻列表列表动态渲染Column({space:12}){ForEach(this.list,(item:NewsItem)=>{Row({space:8}){Column({space:4}){Text(item.stem).fontSize(16).fontWeight(600).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})Text(item.createdAt).fontSize(14).fontColor('#bdbdbd')}}})}Column垂直排列｜Text显示标题和时间｜maxLines与textOverflow控制溢出36TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固实训2.2新闻列表样式优化要点让列表更像真实应用•标题字号略大、加粗，突出新闻主题。•时间字号较小、颜色较浅，形成信息层次。•标题最多显示一行，超出部分用省略号处理。•列表外层设置padding，让内容不贴边。标题、时间和间距共同决定列表可读性学习提示：界面开发不仅要实现功能，还要关注可读性和信息层次。37TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固知识巩固回顾ArkTS与ArkUI基础知识巩固回顾ArkTS与ArkUI基础选择题填空题简答题编程题1let用于声明可变变量，const用于声明常量2class用于定义类，export/import用于模块导入导出3@Entry标记入口组件，@Component标记自定义组件4ForEach适合遍历数组生成多个组件学习提示：本节按“概念—代码—运行效果—应用场景”推进。38TS项目22.1初识ArkTS2.2语法基础2.3ArkUI布局实训2.1实训2.2知识巩固知识巩固重点题型提示选择与填空重点•可变变量关键字：let。•函数声明关键字：function。•继承关键字：extends。•无返回值类型：void。•自定义组件装饰器：@Component。•入口组件装饰器：@Entry。简答与编程重点•能写出一个泛型函数，例如提取数组首元素或末元素。•能说明系统组件由框架提供，自定义组件由开发者封装。•能使用ForEach将数组动态渲染成多个Text组件。•能用接口描述数据结构，为后续列表和业务逻辑做准备。学习提示：课后可结合选择、填空、简答和编程题进行巩固。39常用UI组件(上)01Image组件02Text组件03Button组件04Radio组件05Toggle组件06项目实训目

录Contents01Image组件1.1Image组件概述1.2创建Image组件1.3Image组件常用属性其核心作用是把不同来源的图片数据以可视化形式呈现给用户，增强应用的视觉效果和用户体验。核心作用Image组件用于在应用界面中展示各类图片，它允许开发者通过简单的代码将本地资源、网络链接或Base64编码的图片渲染到界面上。组件用法支持常见的图片格式，如png、jpg、jpeg、bmp、svg、webp、gif和heif等。不同格式的图片在质量、压缩率和动画支持等方面各有特点，开发者可以根据实际需求选择合适的图片格式。图片格式Text组件Button组件Radio组件Toggle组件项目实训Image组件1.1Image组件概述Text组件Button组件Radio组件Toggle组件项目实训Image组件1.2创建Image组件加载本地图片图3-2加载本地图片结果加载本地图片结果如图3-2所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.2创建Image组件加载本地图片首先将图片资源(如HarmonyOSNEXT.jpg)放入项目resources/base/media下，如图3-1所示。图3-1图片资源HarmonyOSNEXT.jpg然后在ArkTS文件中引入并创建Image组件，如代码所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.2创建Image组件加载本地图片@Entry@ComponentstructIndex{build(){Column(){Image($r('app.media.HarmonyOSNEXT')).width('100%')}}}其中$r('app.media.HarmonyOSNEXT')是鸿蒙的资源引用语法，用于引用项目中resources/base/media目录下名为HarmonyOSNEXT的图片资源。注意：图片资源的命名不可以为中文，否则报错无法运行。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.2创建Image组件加载网络图片通过传入网络图片的URL地址来加载网络图片，如图3-3所示。图3-3加载网络图片加载网络图片结果如图3-4所示。图3-4加载网络图片结果Image组件有许多常用属性，可用于控制图片的显示效果、大小、裁剪方式等，常用属性如表3-1所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.3Image组件常用属性表3-1Image组件常用属性及说明属性名称属性作用可选值width设置图片的宽度具体数值（像素、逻辑像素）或百分比height设置图片的高度具体数值（像素、逻辑像素）或百分比borderRadius设置图片的圆角半径。具体数值或字符串alt设置图片加载时显示的占位图支持本地图片（png、jpg、bmp、svg、gif和heif类型）,支持PixelMap类型图片，不支持网络图片。默认值：nullobjectFit设置图片的填充效果，控制图片在组件区域内的显示方式ImageFit.Fill：拉伸图片以填充整个组件区域，可能变形ImageFit.Contain：保持宽高比，完整显示图片，可能留空白ImageFit.Cover：保持宽高比，覆盖组件区域，可能裁剪部分图片。ImageFit.None：不缩放，按原始大小显示ImageFit.ScaleDown：图片尺寸大于组件时按Contain显示，否则按None显示默认值：ImageFit.CoverobjectRepeat设置图片的重复样式ImageRepeat.NoRepeat：不重复，只显示一次

ImageRepeat.XY：水平和垂直方向重复显示

ImageRepeat.X:只在水平方向重复显示

ImageRepeat.Y:只在垂直方向重复显示默认值：ImageRepeat.NoRepeatinterpolation设置图片的插值效果，减轻低清晰度图片放大时的锯齿问题ImageInterpolation.Low：低质量插值，性能高但可能有明显锯齿

ImageInterpolation.Medium：中等质量插值，平衡性能和效果

ImageInterpolation.High：高质量插值，效果好但性能开销大默认值：ImageInterpolation.LowfillColor设置填充颜色颜色值（如

Color.Red），仅对svg图片生效代码执行结果如图3-5所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.3Image组件常用属性图3-5图片组件常用属性效果链式调用是指通过连续的点操作符（.）设置多个属性，允许连续配置。Image组件的属性设置完全支持链式调用。通过链式调用的方法，按水平方向重复显示红包样式的本地图片money.png,且在未加载成功前显示rays.svg作为占位图。如下代码所示。Text组件Button组件Radio组件Toggle组件项目实训Image组件1.3Image组件常用属性Image($r('app.media.money'))//加载本地图片money.png.width('100%')//设置图片组件的宽度

.height(80)//设置图片组件的高度

.border({width:7})//设置图片组件的边框样式，边框线宽度为7.borderRadius(20)//设置图片的圆角半径为20.alt($r('app.media.rays'))//设置图片加载时显示的占位图为rays.svg.objectFit(ImageFit.Contain)//设置图片的填充效果为Contain，可根据实际情况选择合适的填充效果

.objectRepeat(ImageRepeat.X)//设置图片的重复样式为只在水平方向重复

.interpolation(ImageInterpolation.High)//设置图片的插值效果为高质量插值

.fillColor(Color.Red)//设置填充颜色，仅对svg格式生效02Text组件2.1Text组件概述2.2创建Text组件2.3Text组件常用属性2.1Text组件概述目的一在鸿蒙NEXT系统中，Text组件是用于在界面上渲染和展示文本内容的基础组件，开发者可以通过该组件将各种文本内容（如标题、说明文字、提示信息等）添加到应用的用户界面中。研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训2.2创建Text组件目的一研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训一种为直接将字符串文本作为参数传递给content参数，Text('HelloHarmonyOSNEXT')另一种为引用Resource资源，Text($r('app.string.module_desc'))。Text组件用于在界面上显示文本内容，声明格式为：Text(content?:string|Resource,value?:TextOptions)，因此在创建组件时有两种方式：2.3Text组件常用属性目的一研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训基于ArkUI框架的设计理念，Text组件支持丰富的样式、交互和动态效果。常用属性如表3-2所示。表3-2Text组件常用属性及说明属性名称属性说明fontSize设置字体大小，为number类型时，使用fp单位。字体默认大小16fp。不支持设置百分比字符串fontColor设置字体颜色fontWeight设置文本的字体粗细，number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"Bolder"、"Lighter"、"Regular"、"Medium"，分别对应FontWeight中相应的枚举值。默认值：FontWeight.NormalfontStyle设置字体样式，"Italic"、"Normal"

，分别对应FontStyle中相应的枚举值。textAlign设置文本段落在水平方向的对齐方式，默认值：TextAlign.StarttextOverflow设置文本超长时，显示不下的文本的显示方式为下划线、删除线等。当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时，需配合maxLines使用，单独设置不生效maxLines设置文本的最大行数。默认情况下，文本是自动折行的，如果指定此属性，则文本最多不会超过指定的行lineHeight设置文本的文本行高decoration设置文本装饰线样式及其颜色letterSpacing设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示

2.3Text组件常用属性目的一研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训使用Text组件常用属性，对多行文本的样式进行设置。如下代码所示。Text('HarmonyOSNEXT是华为公司自研操作系统，2023年8月4日发布，'+'该系统是鸿蒙抛弃Linux内核及安卓开放源代码项目等代码的首个大版本，'+'该系统仅支持鸿蒙内核和鸿蒙系统的应用，不再兼容安卓应用。')//多行文本显示

.fontColor(Color.Blue)//设置字体颜色为蓝色

.fontSize(25)//设置字体大小为25fp.fontWeight(FontWeight.Bolder)//设置字体为加粗

.fontStyle(FontStyle.Italic)//设置字体为斜体

.textAlign(TextAlign.Center)//文本对齐方式为居中.maxLines(5)//文本显示最大行数为5.lineHeight(50)//文本行高为50.letterSpacing(2)//字符间距设置为2.decoration({//设置文本的装饰线样式及其颜色

type:TextDecorationType.Underline,color:Color.Red,style:TextDecorationStyle.WAVY}).textOverflow({overflow:TextOverflow.Ellipsis//设置文本超长时显示不下的文本用省略号代替})2.3Text组件常用属性目的一研究思路与目的Text组件Image组件Button组件Radio组件Toggle组件项目实训上划线、下划线、穿过文本根据实际情况需求设置颜色实线、双实线、点线、虚线、波浪线装饰线类型type：装饰线颜色color：装饰线样式style：decoration属性textOverflow为文本超长时显示不下的文本的显示样式，Ellipsis表示用省略号代替，MARQUEE为跑马灯的方式，但是需配合maxLines使用，单独设置不生效。Button组件常用属性03Button组件3.1Button组件概述3.2创建Button组件3.3Button组件常用属性3.4Button组件常用事件3.1Button组件概述Button组件Radio组件Toggle组件项目实训Text组件Image组件Button组件为用户提供了一个可单击的界面元素，通常显示为一个带有文本或图标的矩形区域。用户单击按钮时，会触发与之关联的事件，从而执行相应的业务逻辑，比如提交表单、切换页面、执行计算等。3.2创建Button组件Button组件Radio组件Toggle组件项目实训Text组件Image组件按钮组件Button的声明格式为Button(label:ResourceStr,options?:ButtonOptions)。使用lable，创建不包含子组件的按钮，如Button('登录')。不使用lable，创建包含子组件的按钮，但是只支持包含一个子组件，可以是基础组件或者容器组件。如下代码所示。Button(){Image($r('app.media.add'))//引用图片资源

.width(50)}3.3Button组件常用属性Button组件Radio组件Toggle组件项目实训Text组件Image组件Button组件是用于触发用户交互的核心组件之一。它支持丰富的属性，用于定义按钮的样式、行为和内容。常用属性如表3-3所示。表3-3Button

组件常用属性及说明属性名称属性说明width

/

height设置按钮的宽度和高度backgroundColor设置按钮背景色borderRadius设置按钮圆角type设置按钮类型，ButtonType.Normal：默认按钮。ButtonType.Capsule：胶囊按钮（圆角较大）。ButtonType.Circle：圆形按钮。fontSize设置文本显示字号fontColor设置文本显示颜色fontWeight设置文本的字体粗细。stateEffect设置是否开启按压态显示效果。按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。默认值：true使用Button组件常用属性，对按钮的样式进行设置。如下代码所示。3.3Button组件常用属性Button组件Radio组件Toggle组件项目实训Text组件Image组件Button('登录')//创建用于登录的按钮

.width(200)//设置按钮宽度

.height(85)//设置按钮高度

.type(ButtonType.Capsule)//设置按钮的类型为胶囊型

.backgroundColor(Color.Pink)//设置按钮的背景色

.fontColor(Color.Black)//设置按钮上字体的颜色

.fontSize(30)//设置按钮上字体大小

.fontWeight(FontWeight.Medium)//设置按钮上字体为中等

.stateEffect(true)//设置开启按压态显示效果其中type属性为对按钮的样式的设置，根据需求可设置为胶囊型Capsule、圆形Circle或者默认形状Normal。stateEffect属性设置为true时展示出按压状态的显示效果。3.4Button组件常用事件Button组件Radio组件Toggle组件项目实训Text组件Image组件@Statecount:number=1;//定义状态变量count用于计数,当前初始值为1build(){Row({space:20}){Text(`当前值:${this.count}`).fontSize(35)Button(){Image($r('app.media.add'))//引用图片资源

.width(50)}.onClick(()=>{this.count++//单击按钮实现当前值加1})}}Button组件支持多种事件，用于响应用户交互行为。常用事件为onClick，用于监听按钮的单击操作，适用于大多数交互场景，如提交表单、打开页面等。每当用户单击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。以下代码可是实现单击按钮，当前值增加1的功能。04Radio组件4.1Radio组件概述4.2创建Radio组件4.3Radio组件常用属性4.1Radio组件概述Radio组件Text组件Image组件Button组件Toggle组件项目实训Radio组件为单选框，允许用户在多个可见的选项中进行选择，且一次只能选择一个选项。Radio组件在多个领域和场景中都有广泛的应用，包括但不限于：表单填写：在需要用户进行单选的表单中，可以使用Radio组件来收集用户的选择。例如，性别选择、学历选择等。问卷调查：在问卷调查中，可以使用Radio组件让用户对某个问题进行单选回答。4.2创建Radio组件Radio组件Text组件Image组件Button组件Toggle组件项目实训创建性别选择的单选框，如下代码所示。Row(){Text('性别：')Radio({value:'男',group:'sex'})//当前单选框的值为男，所属群组名称为sexText('男')Radio({value:'女',group:'sex'})//当前单选框的值为女

Text('女')}按钮组件Radio的声明格式为Radio({value:string,group:string})value表示当前单选框的值，group表示当前单选框的所属群组名称，相同group的Radio只能有一个被选中。4.3Radio组件常用属性Radio组件Text组件Image组件Button组件Toggle组件项目实训Radio组件通常具有以下常用属性及常用事件，如表3-4所示。表3-4Radio组件常用属性及常用事件在3.4.2小节实现基础上，使用indicatorType属性控制单选框的选中样式，如下代码所示两个选项分别配置了画勾和圆圈不同的样式。单选框选中状态改变时触发onChange，执行里面的逻辑代码，在文本组件中返回当前性别。属性名称属性说明value用于设置

Radio

组件的值，当

Radio

被选中时，这个值可以被获取，以便判断用户选择的是哪个选项checked布尔类型属性，用于设置

Radio

是否被选中。可以通过动态绑定数据来控制其选中状态indicatorType配置单选框的选中样式。未设置时按照RadioIndicatorType.TICK进行显示onChange单选框选中状态改变时触发4.3Radio组件常用属性Radio组件Text组件Image组件Button组件Toggle组件项目实训@Stategender:string='女'//定义初始被选中性别为女build(){Column({space:30}){Row(){Text('性别：')Radio({value:'男',group:'sex',indicatorType:RadioIndicatorType.TICK})//选中状态为勾

.onChange((isChecked:boolean)=>{//当选中状态改变时执行出发回调

if(isChecked){this.gender='男'}else{this.gender='女'}})Text('男')Radio({value:'女',group:'sex',indicatorType:RadioIndicatorType.DOT})//选中状态为圈

.checked(true)Text('女')}Text('当前性别为：'+this.gender)}}05Toggle组件5.1Toggle组件概述5.2创建Toggle组件5.3Toggle组件