项目2 中国汽车销量排行榜应用

项目2中国汽车销量

排行榜应用目录1项目描述2学习目标3知识图谱4技术准备5项目实施6项目小结7AI赋能1项目描述创建一个中国汽车销量排行榜应用。主界面显示2024年中国汽车销量排行榜，信息包括排名、国内/国外汽车品牌及对应年销售量。点击左上角返回按钮退出应用，点击右上角切换按钮，切换国内/国外汽车品牌年销售量排行榜信息。应用运行效果如图2-1、图2-2所示。图2-1首页显示国内汽车品牌排行榜效果图2-2首页显示国外汽车品牌排行榜效果2学习目标知识目标1.熟悉ArkTS基础语法2.熟悉@Builder用法3.熟悉装饰器@State、@Prop、@Link用法4.熟悉自定义组件生命周期函数技能目标能够使用ArkTS实现应用简单功能素质目标1.培养使用ArkTS装饰器进行组件化开发和数据传递的规范编程习惯2.提升通过预览器与模拟器测试UI布局及数据展示准确性的质量保障意识3知识图谱本项目所涉及的知识图谱，以“中国汽车销量排行榜App”为核心，系统梳理了构建该应用的核心知识体系。图谱采用中心辐射式结构，在核心主题节点下延伸出七大模块，直观呈现了从ArkTS基础语法到各类常用装饰器（@Entry、@Component、@Builder、@State、@Prop、@Link）的完整学习路径。项目知识图谱如图2-3所示。图2-3

项目知识图谱4技术准备2.4.1ArkTS基础语法1.变量与常量（1）变量声明使用关键字let声明的变量可以在程序执行期间具有不同的值。lethi:string='hello';hi='hello,world';（2）常量声明使用关键字const声明的只读常量只能被赋值一次。对常量重新赋值会造成编译时错误。consthello:string='hello';（3）自动类型推断由于ArkTS是一种静态类型语言，所有数据的类型都必须在编译时确定。如果变量或常量的声明包含了初始值，开发者就不需要显式指定其类型，这是因为ArkTS规范中列举了所有允许自动推断类型的场景。以下示例中，两条声明语句都是有效的，两个变量都是string类型：lethi1:string='hello';lethi2='hello,world';4技术准备2.数据类型（1）基本类型基本数据类型包括number、string等简单类型，它们可以准确地表示单一的数据类型。基本类型确保数据在存储和访问时是直接的，比较时直接比较其值。①number类型ArkTS提供number类型，任何整数和浮点数都可以被赋给此类型的变量。数字字面量包括整数字面量和十进制浮点数字面量。整数字面量包括以下类别：

十进制整数，由数字序列组成。例如：0、117、-345。

十六进制整数，以0x（或0X）开头，包含数字（0-9）和字母a-f或A-F。例如：0x1123、0x00111、-0xF1A7。

八进制整数，以0o（或0O）开头，只能包含数字（0-7）。例如：0o777。

二进制整数，以0b（或0B）开头，只能包含数字0和1。例如：0b11、0b0011、-0b11。浮点数字面量包括以下部分：

十进制整数，可为有符号数（前缀为“+”或“-”）。

小数点（“.”）。

小数部分（由十进制数字字符串表示）。

指数部分，以“e”或“E”开头，后跟有符号（前缀为“+”或“-”）或无符号整数。4技术准备②boolean类型boolean类型由true和false两个逻辑值组成。通常在条件语句中使用boolean类型的变量：letisDone:boolean=false;//...if(isDone){('Done!');}③string类型string类型代表字符序列，可以使用转义字符来表示字符。字符串字面量由单引号（'）或双引号（"）之间括起来的零个或多个字符组成。字符串字面量还有一特殊形式，是用反向单引号（`）括起来的模板字面量。lets1='Hello,Harmony!\n';lets2="thisisastring";leta='Success';lets3=`Theresultis${a}`;4技术准备（2）引用类型引用类型包括对象、数组和函数等复杂数据结构。这些类型通过引用访问数据，对象和数组可以包含多个值或键值对，函数则可以封装可执行的代码逻辑。引用类型在内存中通过指针访问数据，修改引用会影响原始数据。①void类型void类型用于指定函数没有返回值。functionsayHello():void{console.log("你好！");//这里不需要写return}此类型只有一个值，同样是void。由于void是引用类型，因此它可以用于泛型类型参数。classClass<T>{//...}letinstance:Class<void>②Object类型Object类型是所有引用类型的基类型。任何值，包括基本类型的值，都可以直接被赋给Object类型的变量（基本类型值会被自动装箱）。Object类型用于表示除基本类型外的类型。leto1:Object='Alice';leto2:Object=['a','b'];leto3:Object=1;4技术准备③array类型array类型，即数组，是由可赋值给数组声明中指定的元素类型的数据组成的对象。数组可由数组复合字面量赋值。数组复合字面量是用方括号括起来的零个或多个表达式列表，每个表达式为数组中的一个元素。数组的长度由数组中元素的个数确定。数组中第一个元素的索引为0。letnames:string[]=['Alice','Bob','Carol'];④enum类型enum类型，即枚举类型，是预先定义的一组命名值的值类型，其中命名值又称为枚举常量。使用枚举常量时必须以枚举类型名称为前缀。enumColorSet{Red,Green,Blue}letc:ColorSet=ColorSet.Red;常量表达式用于显式设置枚举常量的值。enumColorSet{White=0xFF,Grey=0x7F,Black=0x00}letc:ColorSet=ColorSet.Black;4技术准备⑤Union类型Union类型，即联合类型，是由多个类型组合成的引用类型。联合类型包含了变量可能的所有类型。⑥Aliases类型Aliases类型为匿名类型（数组、函数、对象字面量或联合类型）提供名称，或为已有类型提供替代名称。typeMatrix=number[][];typeHandler=(s:string,no:number)=>string;typePredicate<T>=(x:T)=>boolean;typeNullableObject=Object|null;4技术准备3.运算符（1）赋值运算符赋值运算符=，使用方式如x=y。复合赋值运算符将赋值与运算符组合在一起，例如：a+=b等价于a=a+b，其中的+=即为复合赋值运算符。复合赋值运算符包括：+=、-=、*=、/=、%=、<<=、>>=、>>>=、&=、|=、^=。（2）比较运算符比较运算符主要用于比较两个值，并返回一个布尔值（true或false），如表2-1所示。4技术准备（3）算术运算符算术运算符主要用于执行数学计算，如表2-2所示。（4）位运算符位运算符允许直接对整数的二进制表示进行操作，如表2-3所示。4技术准备（5）逻辑运算符逻辑运算符主要用于处理布尔值（true或false），帮助进行条件判断和逻辑组合，如表2-4所示。4技术准备4.流程控制（1）if语句if语句用于需要根据逻辑条件执行不同语句的场景。当逻辑条件为真时，执行对应的一组语句，否则执行另一组语句（如果有的话）。else部分也可能包含if语句。if语句如下所示：if(condition1){//语句1}elseif(condition2){//语句2}else{//else语句}条件表达式可以是任何类型，非boolean类型会进行隐式类型转换：lets1='Hello';if(s1){(s1);//打印“Hello”}lets2='Harmony';if(s2.length!=0){(s2);//打印“Harmony”}4技术准备（2）switch语句使用switch语句执行与switch表达式值匹配的代码块。switch语句如下所示：switch(expression){caselabel1://如果label1匹配，则执行//...//语句1//...break;//可省略caselabel2:caselabel3://如果label2或label3匹配，则执行//...//语句23//...break;//可省略default://默认语句}注意：如果switch表达式的值等于某个label的值，则执行相应的语句。如果没有任何一个label值与表达式值相匹配，并且switch具有default子句，那么程序会执行default子句对应的代码块。break语句（可选的）允许跳出switch语句并继续执行switch语句之后的语句。如果没有break语句，则执行switch中的下一个label对应的代码块。4技术准备（3）条件表达式条件表达式根据第一个表达式的布尔值来返回其他两个表达式之一。condition?expression1:expression2如果condition的值为真值（转换后为true的值），则使用expression1作为该表达式的结果；否则，使用expression2。letmessage=Math.random()>0.5?'Valid':'Failed';condition如果是非bool值则会进行隐式转换。('a'?'true':'false');//true(''?'true':'false');//false(1?'true':'false');//true(0?'true':'false');//false(null?'true':'false');//false(undefined?'true':'false');//false4技术准备（4）for语句for语句会被重复执行，直到循环退出语句值为false。for语句如下所示：for([init];[condition];[update]){statements}for语句的执行流程如下：执行init表达式（如有）。此表达式通常初始化一个或多个循环计数器。计算condition。如果它为真值（转换后为true的值），则执行循环主体的语句。如果它为假值（转换后为false的值），则for循环终止。执行循环主体的语句。如果有update表达式，则执行该表达式。回到步骤2。示例：letsum=0;for(leti=0;i<10;i+=2){sum+=i;}4技术准备（5）for-of语句使用for-of语句可遍历数组、Set、Map、字符串等可迭代的类型。for-of语句如下所示：for(forVarofIterableExpression){//processforVar}示例：for(letchof'astringobject'){(ch);}（6）while语句只要condition为真值（转换后为true的值），while语句就会执行statements语句。while语句如下所示：while(condition){statements}示例：letn=0;letx=0;while(n<3){n++;x+=n;}4技术准备（7）do-while语句如果condition的值为真值（转换后为true的值），那么statements语句会重复执行。do-while语句如下所示：do{statements}while(condition)示例：leti=0;do{i+=1;}while(i<10)（8）break语句使用break语句可以终止循环语句或switch。（9）continue语句continue语句会停止当前循环迭代的执行，并将控制传递给下一个迭代。（10）throw和try语句throw语句用于抛出异常或错误：thrownewError('thiserror')try语句用于捕获和处理异常或错误：try{//可能发生异常的语句块}catch(e){//异常处理}4技术准备5.函数基本语法：（1）函数声明（完整格式）function函数名(参数1:类型,参数2:类型):返回值类型{//函数体return返回值;}说明：

function：声明函数的关键字

函数名：遵循驼峰命名法（如：calculateTotal）(参数1:类型)：参数必须指定类型（如：name:string）:返回值类型：声明函数返回值的类型（如：number、void）{}：包裹函数体的代码块

return：返回结果（返回值类型必须匹配声明的类型）4技术准备（2）箭头函数（简化写法）const函数名=(参数1:类型,参数2:类型):返回值类型=>{//函数体return返回值;}//单行箭头函数可以省略return和{}const函数名=(参数:类型)=>表达式;说明：

const函数名：将函数赋值给常量变量=>：箭头函数符号

当函数体只有一行时，可以省略：

大括号

{}return

关键字（自动返回表达式结果）

适合简单的回调函数和单行操作4技术准备（3）可选参数function函数名(必选参数:类型,可选参数?:类型){//函数体}说明：

可选参数?：参数名后的问号表示该参数可选

可选参数必须放在必选参数之后

调用时可传可不传该参数

在函数体内需要检查可选参数是否存在（4）默认参数function函数名(参数:类型=默认值){//函数体}说明：=默认值：当参数未传递时使用的默认值默认参数可以在参数列表的任何位置（但建议放在最后）默认值可以是：基础值（如：count=5）表达式（如：date=newDate()）函数调用（如：id=generateId()）4技术准备6.面向对象（1）普通类普通类概念：类是面向对象编程的基础，用于描述具有相同属性和行为的对象的模板。核心语法：class类名{//字段（属性）字段名:类型;//构造函数constructor(参数:类型){this.字段名=参数;}//方法方法名():返回值类型{//方法体}}4技术准备特性：

封装：将数据和行为包装在类中

访问修饰符：public：默认，公开访问private：仅类内部访问protected：类及其子类可访问

静态成员：使用

static

关键字，属于类而非实例构造函数：构造函数是类实例化时自动调用的特殊方法，用于初始化对象属性。构造函数定义如下：constructor([parameters]){//...}如果未定义构造函数，则会自动创建具有空参数列表的默认构造函数，例如：classPoint{x:number=0;y:number=0;}letp=newPoint();在这种情况下，默认构造函数使用字段类型的默认值初始化实例中的字段。4技术准备对象：对象是面向对象编程的核心概念，它是类的具体实例。对象创建语法如下：通过new创建实例const对象名=new类名(参数);对象使用示例如下：classPerson{name:string;age:number;constructor(name:string,age:number){=name;this.age=age;}greet(){console.log(`你好，我是${}`);}}//创建对象实例constperson1=newPerson("张三",25);//访问对象成员person1.greet();//输出：你好，我是张三console.log(String(person1.age));//输出：254技术准备（2）抽象类概念：抽象类是不能被实例化的基类，用于定义子类必须实现的抽象成员。核心语法：abstractclass抽象类名{//抽象属性abstract属性名:类型;//抽象方法（无实现）abstract方法名(参数:类型):返回值类型;//普通方法（可以有实现）方法名():void{//方法体}}特性：• 用abstract关键字声明• 可以包含抽象成员（强制子类实现）• 可以包含具体实现（代码复用）• 不能直接实例化4技术准备（3）继承概念：继承允许一个类（子类）继承另一个类（父类）的属性和方法，实现代码复用和层次化设计。核心语法：class子类extends父类{//新增字段新字段:类型;constructor(参数:类型,新参数:类型){super(参数);//调用父类构造函数this.新字段=新参数;}//方法重写方法名():返回值类型{//可以调用super.方法名()访问父类方法}//新增方法新方法():void{//方法体}}特性：• extends：继承关键字• super：调用父类构造函数或方法• 方法重写：子类可以重写父类方法• 单继承：ArkTS只支持单继承（一个子类只能有一个父类）4技术准备（4）接口概念：接口定义了一组方法和属性的契约，类可以实现（implement）接口，保证提供接口定义的功能。核心语法：interface接口名{//必需属性属性名:类型;//可选属性可选属性名?:类型;//方法签名方法名(参数:类型):返回值类型;}//类实现接口class类名implements接口名{//必须实现接口定义的属性和方法}特性：• 契约性：规定类必须实现的成员• 多实现：一个类可以实现多个接口• 可选成员：使用?标记可选实现• 接口继承：接口可以继承其他接口4技术准备7.模块化程序可划分为多组编译单元或模块。每个模块都有其自己的作用域，即，在模块中创建的任何声明（变量、函数、类等）在该模块之外都不可见，除非它们被显式导出。与此相对，从另一个模块导出的变量、函数、类、接口等必须首先导入到模块中。（1）导出概念：模块导出允许将模块中的变量、函数、类等暴露给其他模块使用。ArkTS使用ESM(ECMAScriptModules)规范。核心语法：//1.单独导出exportconst/let/var变量名=值;exportfunction函数名(){};exportclass类名{};//2.批量导出const变量=值;function函数(){};class类{};export{变量,函数,类};//3.默认导出（每个模块只能有一个）exportdefault表达式;//4.重命名导出export{原名as新名};特性：• 一个模块可以同时有多个命名导出和一个默认导出• 导出内容可以是变量、函数、类、接口等• 支持导出时重命名• 默认导出在导入时可以自定义名称4技术准备（2）导入概念：模块导入允许在当前模块中使用其他模块导出的内容。核心语法：//1.导入命名导出import{导出名}from"模块路径";import{原名as新名}from"模块路径";//2.导入默认导出import自定义名称from"模块路径";//3.混合导入import默认导入,{命名导入}from"模块路径";//4.全部导入为命名空间import*as命名空间from"模块路径";//5.只执行模块（不导入任何内容）import"模块路径";特性：• 导入路径可以是相对路径(./)或第三方模块名• 支持导入时重命名• 可以使用命名空间对象访问所有导出• 支持动态导入(import())4技术准备2.4.2@Entry用法1.概念@Entry装饰器用于标识UIAbility的根组件（入口组件）。一个UIAbility有且仅有一个@Entry组件；而一个应用可以包含多个UIAbility，因此可能有多个@Entry组件。2.核心语法@Entry@Componentstruct组件名{build(){//组件UI描述}}3.特性• 必须与@Component一起使用• 只能装饰一个自定义组件• 代表界面的根节点4技术准备2.4.3@Component用法1.概念@Component是ArkUI的基础装饰器，用于装饰一个结构体，使其成为自定义组件。2.生命周期函数组件的生命周期函数能在组件特定阶段执行任务，比如初始化数据或释放资源，如表2-5所示。3.核心语法@Componentstruct组件名{//状态变量@Statecount:number=0;//生命周期函数aboutToAppear(){console.log('组件即将创建');}//必须实现的build函数build(){//UI描述}}4技术准备2.4.4@Builder用法1.概念@Builder用于定义可复用的UI片段，类似于函数式组件。2.两种形式（1）全局Builder（静态方法）（2）自定义组件内的Builder（成员方法）3.核心语法//全局Builder@Builderfunction函数名(参数){//UI描述}//成员Builder@ComponentstructMyComponent{@Builder方法名(参数){//UI描述}}4技术准备2.4.5@State用法1.概念@State装饰的变量是组件内部的状态数据，当状态改变时会触发UI更新。2.核心语法@ComponentstructMyComponent{@Statecount:number=0;}3.特性• 只能用于组件内部• 初始化必须有默认值• 支持基本类型和类对象• 子组件通过@Prop或@Link接收4技术准备2.4.6@Prop用法1.概念@Prop用于接收父组件传递的状态数据，具有单向绑定特性。2.核心语法@ComponentstructChildComponent{@Propdata:string;}3.特性• 只能从父组件初始化• 父组件状