《移动应用开发技术与实战（ArkTS）》课件 项目2-ArkTS快速入门

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: