鸿蒙移动应用开发项目式教程课件 项目1-人文史哲展示页-任务1-1-5 TypeScript基础语法2

鸿蒙移动应用开发项目式教程（AI助学）项目1ArkUI（方舟开发框架）—人文史哲展示页任务1-1创建人文史哲展示页基本布局任务1-2创建轮播图专区任务1-3创建人文历史专区任务1-4创建高校科普、戏曲文化专区

鸿蒙学习路线1.1人文史哲展示页

项目背景1.1人文史哲展示页

在日常生活中，传统的阅读方式受限于时间和空间，人们经常需要利用碎片化的时间获取和消化知识。随着HarmonyOS的兴起，其全场景、全连接的设计理念为开发跨平台、高效互动的网页提供了强大的技术支持。本项目旨在利用HarmonyOS中的ArkUI，开发一个集知识展示、互动体验、个性化学习于一体的人文史哲展示页，以满足不同用户群体对人文史哲知识的多元化需求。无论是在通勤途中、休息时间，还是在居家环境或咖啡馆等场所，用户都可以通过智能手机、平板计算机等设备轻松访问该展示页，获取高质量的人文史哲知识。

学习目标素质目标知识目标素质1.掌握HarmonyOS的全场景分布式架构设计；2.掌握HarmonyOS的开发环境配置；3.掌握如何使用Row和Column组件来构建基本的页面布局；4.掌握如何在Grid组件中定义网格的行数、列数及每行、每列的尺寸。能力目标1.理解HarmonyOS跨设备协同、资源高效利用等核心特性；2.了解并掌握HarmonyOS提供的开发工

具

集、应用程序接口（ApplicationProgramInterface，API）及用户界面（UserInterface，UI）组件库；3.深入理解Row和Column是HarmonyOS布局中的基础组件。1.加强对新技术、新工具的关注与学习，不断提升自身在HarmonyOS开发领域的专业能力；2.加强对自身工作的反思与总结，不断寻求提升工作效率和质量的方法与途径。；3.培养团队合作精神、用户导向思维及职业素养与责任心。1.1人文史哲展示页知识点预览#知识点重点难点应用说明1HarmonyOS概念√理解HarmonyOS基本概念2HarmonyOS技术架构√区分HarmonyOS技术架构层次3DevEcoStudio√√掌握开发工具DevEcoStudio的使用4工程创建√√会创建项目工程5TypeScript基础语法√√√掌握TypeScript基础语法6ArkUI中的布局容器√√√掌握ArkUI中的布局容器1.1人文史哲展示页知识解析任务导入学以致用课堂小结课后拓展预期目标与成果图1-1

人文史哲展示页效果1.1人文史哲展示页任务分析知识解析任务导入学以致用课堂小结课后拓展

人文史哲展示页，包括标题、轮播图、人文历史专区、高校科普专区、戏曲文化专区等栏目，需要通过Row、Column组件进行页面布局设计以及相关参数配置。1.1人文史哲展示页

变量声明任务导入知识解析学以致用课堂小结课后拓展1.1基础语法在编程的世界里，数据是构建一切的基础。在ArkTS中，变量就是存储数据的容器。它们就像是我们生活中的盒子,可以装下各种物品，让我们在需要的时候随时取用。在ArkTS中可以通过关键字let开头的声明引入变量，并通过类型注释指定类型。该变量在程序执行期间可以具有不同的值。

常量声明任务导入知识解析学以致用课堂小结课后拓展变量在运行过程中是可以变化的。但在现实生活中，有一些数据是不会变化的，比如:数学上的PI、自然常数e等等,这些用变量来表示就不太恰当。所以如果我们希望一个值声明之后，后续运行过程中不能变化，我们就可使用常量来表示。在ArkTS中使用const声明一个常量，以关键字const开头的声明引入只读常量，该常量只能被赋值一次。对常量重新赋值会造成编译时错误。1.1基础语法

自动类型推断知识解析学以致用课堂小结课后拓展由于ArkTS是一种静态类型语言，其特点是所有数据的类型都必须在编译时确定。如果一个变量或常量的声明中已赋予了初始值，那么开发者就不需要明确指定类型,而是可以让编译器根据上下文进行推导数据类型。以下示例中，两条声明语句都是有效的，两个变量都是string类型:1.1基础语法任务导入ArkTS的变量声明限制知识解析学以致用课堂小结课后拓展任何一种代码的书写中，命名的规范都是我们基础的体现，都是我们需要去遵守的。ArkTS变量声明也存在如下限制:1.1基础语法任务导入ArkTS的数据类型知识解析学以致用课堂小结课后拓展无论是Android还是iOS开发，都提供了多种数据类型用于常见的业务开发，但在ArkTs中数据类型就大有不同，例如int，long，float，double统一就是number类型。ArkTS是TypeScript的超集，其数据类型也是基于TypeScript而来。可以大致分为以下4种类型:1.1基础语法任务导入ArkTS的数据类型（1）知识解析学以致用课堂小结课后拓展ArkTS基本数据类型：string、number、boolean、null、undefined、bigint等。letname:string='小明';letage:number=20;letisMale:boolean=true;console.log(name);//输出小明console.log(age.toString());//输出：201.1基础语法任务导入

基础类型知识解析学以致用课堂小结课后拓展Number类型:ArkTS提供number和Number类型，任何整数和浮点数都可以被赋给此类型的变量。Boolean类型:Boolean类型由true和false两个逻辑值组成。String类型:字符串字面量由单引号(‘)或双引号(”)之间括起来的零个或多个字符组成。1.1基础语法任务导入ArkTS的数据类型（2）知识解析学以致用课堂小结课后拓展ArkTS除了支持常见的基本数据类型外，还支持以下四种类型。1.1基础语法任务导入ArkTS的数据类型（3）知识解析学以致用课堂小结课后拓展//引用类型letstudents:Array<string>=['小明','小张','小王','小李'];letstudents:string[]=['小明','小张','小王','小李'];//枚举类型EnumColor{Red,Blue,Green}letlikeColor:Color[]=Color.Red//联合类型letluckyNum:number|string=7;luckyNum='seven';//类型别名typeMatrix=number[][];letarr:Matrix=[[1,2,3]];1.1基础语法任务导入ArkTS的数据类型安全与类型推断知识解析学以致用课堂小结课后拓展ArkTS是类型安全的语言，编辑器会进行类型检查，实时提示错误信息。ArkTS是一种静态类型语言，所有数据的类型都必须在编译时确定。但是，如果一个变量或常量的声明包含了初始值，那么开发者就不需要显式指定其类型。1.1基础语法任务导入

空安全知识解析学以致用课堂小结课后拓展一般来说，有时会存在声明变量类型而不明确提供初始值。在这类情况下，通常使用联合类型包含null值。1.1基础语法任务导入

基本知识-语句知识解析学以致用课堂小结课后拓展条件语句：用于基于不同的条件来执行不同的动作，根据判断条件的执行结果（true或false）来决定执行的代码块。循环语句：用于重复执行相同的一组语句，提高效率、简化代码。//条件语句if(Math.random()>0.5){isValid=true;}else{isValid=false;}//条件表达式letisValid=Math.random()>0.5?true:false;//循环语句letstudents:string[]=['小明','小张','小王','小李‘];for(leti=0;i<students.length;i++){console.log(students[i]);}//for…of循环语句for(letstudentofstudents){console.log(student);}//while循环语句letindex=0;while(index<students.length){console.log(students[index]);index++;}1.1基础语法任务导入Enum类型知识解析学以致用课堂小结课后拓展Enum类型，又称枚举类型，通常用于为程序中的一组相关的常量，或约定变量只能在该组数据范围内选择值，以便于程序的可读性和维护性。使用Enum类型，约束变量：1.1基础语法任务导入

引用类型知识解析学以致用课堂小结课后拓展Object类型:Object类型是所有引用类型的基类型。任何值，包括基本类型的值（它们会被自动装箱），都可以直接被赋给Object类型的变量。Array类型∶即数组，是由可赋值给数组声明中指定的元素类型的数据组成的对象。数组的长度由数组中元素的个数来确定数组中第一个元素的索引为0。1.1基础语法任务导入Union类型知识解析学以致用课堂小结课后拓展union类型，即联合类型，是由多个类型组合成的引用类型。联合类型包含了变量可能的所有类型。联合类型还可以将变量值，约定在组数据范围内进行选择。1.1基础语法任务导入Aliases类型知识解析学以致用课堂小结课后拓展Aliases为类型别名，它允许为已有的类型定义一个别名，以提高代码的可读性和可维护性。通过类型别名，可以给复杂或重复出现的类型定义一个简洁的名称。1、基础类型别名:2、联合类型别名:1.1基础语法任务导入

组件内部声明变量知识解析学以致用课堂小结课后拓展组件内部声明变量不需要使用let关键字,而且在调用组件内变量时，需要使用this去引用。也可以在组件内部直接声明变量。1.1基础语法任务导入

函数的声明和使用（1）学以致用知识解析课堂小结课后拓展函数是一组一起执行多条语句的组合，形成可重用的代码块。通过function关键字声明要告诉编译器函数的名称、返回类型和参数以及执行的内容。1.2函数任务导入

函数的声明和使用（2）学以致用知识解析课堂小结课后拓展函数是一组一起执行多条语句的组合，形成可重用的代码块。通过function关键字声明要告诉编译器函数的名称、返回类型和参数以及执行的内容。//必选参数：必须要传入的参数//可选参数：参数是可选的，即在调用函数时可以选择性传入的参数functionfunc1(a:number,b?:number):number{returnb?a+b:a}func()//报错func1(1)//输出1func1(1,2)//输出31.2函数任务导入

函数的声明和使用（3）学以致用知识解析课堂小结课后拓展//默认参数：允许开发者为参数指定默认值，在调用函数时若未传递相应参数，则使用默认值functionfunc2(a:number,b:number=2):number{returna+b}func2(1)//使用默认值，输出3func2(1,3))//重新传值，输出4//剩余参数：允许开发者将函数的多个独立参数收集起来，并打包成一个数组functionfunc3(a:number,…Args:number[]):void{('Argsf：',JSON.stringfy(Args))}func3(1,2,3,4,5)//[2,3,4,5]1.2函数任务导入

函数的声明和使用（4）学以致用知识解析课堂小结课后拓展箭头函数/lambda表达式：通常用于需要一个简单函数的地方。//箭头函数的返回类型可以省略；省略时，返回类型通过函数体推断constprintInfo=(name:string):void=>{console.log(name)};constprintInfo=(name:string)=>{console.log(name)};//执行体只有一行的情况下可以省略花括号constprintInfo=(name:string)=>console.log(name);//箭头函数常用于作为回调函数letstudents:string[]=['小明','小张','小王','小李'];students.forEach((student:string)=>console.log(student));1.2函数任务导入

箭头函数学以致用知识解析课堂小结课后拓展箭头函数表达式的语法比传统的函数表达式更简洁，例如:箭头函数的返回类型可以省略;省略时，返回类型通过函数体推断。表达式可以指定为箭头函数，使表达更简短，因此以下两种表达方式是等价的:1.2函数任务导入

函数的声明和使用（5）学以致用知识解析课堂小结课后拓展闭包函数：一个函数可以将另一个函数当做返回值，保留对内部作用域的访问。functionouterFunc():()=>string{letcount=0return():string=>{count++;returncount.toString()}}letinvoker=outerFunc()console.log(invoker())//输出：1console.log(invoker())//输出：2typereturnType=()=>string;functionouterFunc():returnType{letcount=0return():string=>{count++;returncount.toString()}}letinvoker=outerFunc()console.log(invoker())//输出：1console.log(invoker())//输出：21.2函数任务导入

类的声明和使用（1）学以致用知识解析课堂小结课后拓展ArkTS支持基于类的面向对象的编程方式，定义类的关键字为class，后面紧跟类名。类的声明描述了所创建的对象共同的属性和方法。//声明类classPerson{name:string='小明';age:number=20;isMale:boolean=true;}//new实例创建类constperson=newPerson();console.log();//输出：小明//字面量创建类constperson:Person={name:'小张',age:29,isMale:true};console.log();//输出：小张1.3类任务导入

类的声明和使用（2）学以致用知识解析课堂小结课后拓展构造器：constructor用于实例化时进行初始化操作。classPerson{name:string='小明';age:number=20;isMale:boolean=true;constructor(name:string,age:number,isMale:boolean){=name;this.age=age;this.isMale=isMale;}}constperson=newPerson('小张',32,false);console.log();//输出:小张1.3类任务导入

类的声明和使用（3）学以致用知识解析课堂小结课后拓展类中的方法：用于描述类的行为。classPerson{name:string='小明';age:number=20;isMale:boolean=true;constructor(name:string,age:number,isMale:boolean){=name;this.age=age;this.isMale=isMale;}introduce(){if(this.isMale){console.log(`${}是个男生，年龄是${this.age}岁`);}else{console.log(`${}是个女生，年龄是${this.age}岁`);}}}constperson:Person={name:'小张',age:29,isMale:true};roduce();//小张是个男生，年龄是29岁1.3类任务导入

类的声明和使用（4）学以致用知识解析课堂小结课后拓展封装：将数据隐藏起来，只对外部提供必要的接口来访问和操作数据，确保数据的一致性和安全性。classPerson{//可见性修饰符包括：private、protected和public。默认可见性为public。publicname:string='小明';private_age:number=20;isMale:boolean=true;...//省略构造器和方法内容getage():number{returnthis._age;}setage(age:number){this._age=age;}}constperson:Person=newPerson('小张',28,true);console.log(person.age.toString())//实际访问的是get方法console.log(person._age.toString())//无法直接访问私有属性1.3类任务导入

类的声明和使用（5）学以致用知识解析课堂小结课后拓展继承：子类继承父类的特征和行为，使得子类具有父类相同的行为。ArkTS中允许使用继承来扩展现有的类，对应的关键字为extends。classEmployeeextendsPerson{private_department:string;constructor(name:string,age:number,isMale:boolean,department:string){super(name,age,isMale);this._department=department;}}constemployee:Employee=newEmployee('小张',28,true,'xx公司');roduce();//输出：小张是个男生，今年28岁1.3类任务导入

类的声明和使用（6）学以致用知识解析课堂小结课后拓展多态：子类继承父类，并可以重写父类方法，使不同的实例对象对同一行为有不同的表现。classEmployeeextendsPerson{department:string;constructor(name:string,age:number,isMale:boolean,department:string){super(name,age,isMale);this.department=department;}publicintroduce():string{roduce();console