鸿蒙开发环境准备，ArkTS基础语法入门

大纲

• 主题：鸿蒙开发环境准备，ArkTS基础语法入门。

• 内容摘要：带领直播课的观众一步步安装好DevEco Studio，配置好开发环境。学习基础的ArkTS 语法，能够基本掌握鸿蒙开发的核心语言ArkTs，包括数组，函数的基本使用，对象方法，接口&对象…

简介

DevEco Studio简介

HUAWEI DevEco Studio（以下简称DevEco Studio）是基于IntelliJ IDEA Community开源版本打造，为运行在HarmonyOS系统上的应用和服务（以下简称应用/服务）提供一站式的开发平台。

作为一款开发工具，除了具有基本的代码开发、编译构建及调测等功能外，DevEco Studio还具有如下特点：

• 高效智能代码编辑：支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能，提升代码编写效率。
• 多端双向实时预览：支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览，便于快速查看代码运行效果。
• 多端设备模拟仿真：提供HarmonyOS本地模拟器，支持Phone等设备的模拟仿真，便捷获取调试环境。
• DevEco Profiler性能调优：提供实时监控能力和场景化调优模板，便于全方位的设备资源监测，采集数据覆盖多个维度，为开发者带来高效、直通代码行的调优体验。

运行环境要求

为保证DevEco Studio正常运行，建议电脑配置满足如下要求：

• 操作系统：Windows10 64位、Windows11 64位
• 内存：16GB及以上
• 硬盘：100GB及以上
• 分辨率：1280*800像素及以上

安装与配置

开发工具下载

进入到网址：https://developer.huawei.com/consumer/cn/deveco-studio/，点击立即下载，Mac(X86)适用于英特尔的处理器，Max(ARM)适用于M系列的处理器。

首先，我们下载DevEco Studio，其是基于Itellij IDEA Community定制化开发的专注于HarmonyOS应用和设备的开发的集成开发环境(IDE)。

在勾选三个选项时，只需勾选创建快捷方式即可。

DevEco Studio提供开箱即用的开发体验，将HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化DevEco Studio安装配置流程。

以前的版本需要手动配置Node.js，SDK；对于最新的版本，HarmonyOS SDK已嵌入DevEco Studio中，无需额外下载配置。HarmonyOS SDK可以在DevEco Studio安装位置下DevEco Studio\sdk目录中查看。如需进行OpenHarmony应用开发，可通过Settings > OpenHarmony SDK页签下载OpenHarmony SDK。

Harmony OS 和 OpenHarmony 的区别

OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，由华为、阿里、腾讯、百度、浪潮、招商银行、360等十家互联网企业共同发起组建。这一项目的目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。从“Open”一词中可以看出，它是一个开放源代码的项目，由华为雇佣的开发者编写代码，而后，华为将HarmonyOS中的基础功能提取出来，打包成一个名为“OpenHarmony”的项目，并捐赠给了开放原子开源基金会。作为一个开源项目，OpenHarmony不包括AOSP的组成部分，因此不支持apk安装。这意味着使用者只需遵守开源协议和法律即可使用。

HarmonyOS是华为基于OpenHarmony、AOSP等开源项目开发的面向多种全场景智能设备的商用版本。如果将OpenHarmony理解为基础地基，HarmonyOS则是在此基础上建立的精装房。为了保护华为现有手机和平板用户的数字资产，HarmonyOS 2在遵循AOSP的开源许可的基础上，实现了现有Android生态应用在部分搭载该系统设备上的运行，支持apk安装。HarmonyOS的其他称呼包括鸿蒙操作系统和鸿蒙OS。

如果你是一名应用开发工程师，专注于华为终端设备的应用开发，那么选择HarmonyOS可能更合适。如果你对HarmonyOS底层的技术感兴趣，或者想对HarmonyOS做出贡献，那么选择OpenHarmony将是一个不错的选择。当然，如果想更进一步，基于OpenHarmony开源项目进行二次开发制作属于自己的操作系统，也是一个很好的选择。

Previewer

预览代码的效果，根据代码的变化实时变化。

向观众演示随着message内容的变化，右侧Previewer的内容也发生了相应的变化。

汉化插件的配置

…

ArkTS基础快速入门

1. 解释说明

// console.log('消息说明','打印的内容')
console.log('我说','HelloWorld')

// 如果想要修改分隔符
console.log('我说'+','+'Hello World')
console.log(['我说','HelloWorld'].join(","))

相当于给console.log()传入两个参数，当代码执行时，会在控制台输出每个参数并且自动在每个参数之间插入一个空格。

输出的结果可以在DevEco Studio底部的Log中进行查看。

拓展：代码区保存和预览区reload的区别

• Ctrl+S保存代码

  当你按下 Ctrl+S 保存代码时，DevEco Studio 通常会执行一次增量编译。增量编译只会重新编译自上次构建以来更改的部分代码，这种方法使得编译速度非常快。因此，保存后的更新几乎是即时的，而且不会清除之前的日志信息。

  实时编译预览的前提是在Preview的上端开启了LivePreview，即小插头的图标。

• 预览区 Reload

  预览区的 Reload 按钮可能会触发更复杂的操作，包括完整的 UI 刷新，甚至可能重新加载整个页面或应用。同时，Reload会导致应用的状态被重置，因此之前的日志信息会被清除。

2. 变量与常量

• 变量

// let 变量名：变量类型 = 值
let title:string = '奥利奥水果捞'
let price:number = 21.8
let isSelect:boolean = true

let title:string = '奥利奥水果捞'
console.log('字符串title',title)

let price:number = 21.86
console.log('价格price',price)

let isSelect:boolean = true
console.log('是否被选择isSelect',isSelect)

• 常量

// const 常量名：常量类型 = 值
const companyName:string = '华为'
const PI:number = 3.14

3. 变量命名规则

• 只能包含数字、字母、下划线，不能以数字开头
• 不能包含关键字(例如let const)
• 严格区分大小写

4. 数组

let names: string[] = ['小红','小明','小张']
console.log('取到了',names[2])

5. 函数

定义函数

function 函数名(){
  函数体
}

function 函数名(形参1:类型,形参2:类型){
	函数体
  return 处理后的结果
}

调用函数

函数名()

函数名(实参1，实参2)

function buy(num:number,price:number){
  return num*price
}

let totalPrice:number = buy(2,3)
console.log('最终的价格',totalPrice)

6. 箭头函数

箭头函数是一种更为简洁的函数写法，语句的末尾需要加分号。

let buy = (num:number,price:number) => {
  return num*price
}

let totalPrice:number = buy(2,3)
console.log('最终的价格',totalPrice)

7. 对象

• 作用：用于描述一个物体的特征和行为。

对象是一个可以存储多个数据的容器。

• 定义与使用
  • 通过Interface接口约定对象结构类型
  • 定义对象并且使用

interface 接口名称{
  属性1:类型1
  属性2:类型2
  属性3:类型3
}

interface Person{
  name:string
  age:number
  gender:string
}

let person:Person = {
  name:'张三',
  age:18,
  gender:'male'
}

console.log('人的名字:',person.name)
console.log('人的年龄:',person.age)
console.log('人的性别:',person.gender)

interface 接口名称{
  方法名:(参数:类型) => 返回值类型
}

interface Person{
  name:string
  age:number
  gender:string
  sing:(song:string)=>void
}

let person:Person = {
  name:'张三',
  age:18,
  gender:'male',
  sing:(song:string)=>{
    console.log('张三','唱',song);
  }
}

console.log('人的名字:',person.name)
console.log('人的年龄:',person.age)
console.log('人的性别:',person.gender)
person.sing('我和我的祖国')

8. 联合类型

• 适用于不用类型

let judge:number | string = 100
judge = 'A+'
console.log('评价',judge)

• 锁定类型

let gender: 'male' | 'female' | 'secret' = 'male'
console.log('性别',gender)

9. 枚举

enum 枚举名{
  常量1 = 值,
  常量2 = 值,
  ......
}

enum ThemeColor{
  RED = '#ff0f29',
  ORANGE = '#ff7100',
  GREEN = '#30b30e'
}

let color:ThemeColor = ThemeColor.RED

实例：创建一个学生信息系统

• 描述

你需要创建一个系统来管理学生的信息。每个学生有名字、年龄、性别以及成绩。通过函数计算并打印每个学生的总成绩。使用枚举表示成绩等级，并用对象描述学生信息。

• 要求

1. 使用 interface 定义学生的信息。
2. 使用枚举来表示成绩等级。
3. 使用函数计算总成绩。
4. 使用箭头函数打印学生信息。

// 定义枚举
enum GradeLevel {
  A = '优秀',
  B = '良好',
  C = '中等',
  D = '及格',
  F = '不及格'
}

// 定义学生接口
interface Student {
  name: string;
  age: number;
  gender: 'male' | 'female' | 'secret';
  scores: number[];
  gradeLevel?: GradeLevel;  // 可选属性
}

// 函数计算总成绩
function calculateTotalScore(scores: number[]): number {
  // array.reduce(callbackFn,initialValue);
  // callbackFn:(accumulator,currentValue)=>... 将第一个元素作为accumulator，并从第二个元素开始处理数组。
  return scores.reduce((total, score) => total + score, 0);
}

// 箭头函数打印学生信息
let printStudentInfo = (student: Student): void => {
  const totalScore = calculateTotalScore(student.scores);
  console.log(`学生姓名: ${student.name}`);
  console.log(`年龄: ${student.age}`);
  console.log(`性别: ${student.gender}`);
  console.log(`总成绩: ${totalScore}`);
  student.gradeLevel = totalScore >= 90 ? GradeLevel.A : (totalScore >= 80 ? GradeLevel.B : (totalScore >= 70 ? GradeLevel.C : (totalScore >= 60 ? GradeLevel.D : GradeLevel.F)));
  console.log(`成绩等级: ${student.gradeLevel}`);
}

// 创建学生对象
let student: Student = {
  name: '李华',
  age: 16,
  gender: 'male',
  scores: [88, 92, 76, 81]
}