介绍

本次培训旨在培养高校学子对HarmonyOS操作系统的深刻理解与浓厚兴趣，通过系统化的学习与实践，使学员不仅能够掌握HarmonyOS应用开发的基本技能，更能激发其创新潜能，为未来投身于鸿蒙生态建设打下坚实基础。培训结束后，学员将具备独立设计、开发并部署HarmonyOS应用程序的能力，为个人职业生涯增添亮点，同时为高校与产业界的合作搭建桥梁，共同推动HarmonyOS生态的繁荣与发展。
教学文章将分三篇进行推送，等不及的小伙伴可以点击下方链接观看适配教程。

相关视频与资料链接：

BiliBili视频课程链接

0. 开发环境：

DevEcoStudio版本：DevEco Studio NEXT Developer Beta1

SDK版本：5.0.3.403

API版本：12

1. HarmonyOS基础介绍

  鸿蒙系统（HarmonyOS）是华为公司自主研发的面向全场景的智能终端操作系统，旨在为不同设备的智能化、互联与协同提供统一的语言，为用户带来简捷、流畅、连接、安全可靠的全场景交互体验。它通过分布式架构和智能化技术，实现了不同设备之间的无缝连接和高效协同。提供统一的操作体验，覆盖智能手机、平板电脑、智能穿戴设备、智能家居、车载系统等多种设备和应用场景。在今年年初HarmonyOSNEXT鸿蒙星河版正式上限，并在6月21日发布开发版api12 beta版本。本篇文章主要介绍使用API12进行HarmonyOS NEXT应用开发。

1.1 HarmonyOS开发工具

  HarmonyOS应用开发为开发者提供了全链路开发工具，为广大开发者进行开发赋能。整套工具链主要包含：HarmonyOS工具、HarmonyOS砖块、HarmonyOS底座三大部分。在HarmonyOS工具主要提供7大开发者套件，HarmonyOS砖块则提供包含地图、AR、搜索、广告、账号等30000+API，HarmonyOS底座则由8大领先技术构建。

而我们本次主要讲解开发者套件的使用，从上到下可以划分为三个阶段：准备与设计、代码开发和准备与设计。

阶段一：准备与设计

Harmonyos Design

Harmonyos Design面向全场景智能体验的设计系统。全栈式设计规范：包括设计理念、人因研究、应用架构、人机交互、视觉风格、隐私设计、动效、音效、振动、多态控件、界面用语、全球化、无障碍等。提供了丰富的设计资源：HarmonyOS 字体、HarmonyOS Symbol 和 HarmonyOS 音效库。
相关资源链接：

• HarmonyOS 主题图标库 | icon素材免费下载
• HarmonyOS音效 | HarmonyOS设计
• 设计资源-HarmonyOS设计

ArkCompiler

ArkCompiler即方舟编译器。支持多种编程语言、多种芯片平台联合编译、运行而设计的统一编译运行时平台。支持包括动态类型和静态类型语言在内的多种编程语言，如 ArkTS、TS、JS。能将我们开发的代码，转换成字节码，使设备快速读取，提高运行效率

ArkTS&ArkUI

ArkTS和ArkUI是我们开发harmony应用的核心语言。设备底层开发于鸿蒙最开始的版本都是用的C或C++开发。而随着鸿蒙API的不断迭代，和代码的不断优化，鸿蒙开发语言也不断适配更新。从最开始的C/C++，到Jave、JS,再到现在的ArkTS。使开发更加简易快捷。

ArkTS在TypeScript( 简称TS)的基础上，匹配ArkUI框架扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。从Harmony OS NEXT Developer Preview 0版本开始，ArkTS在TS的基础上，进一步通过规范强化静态检查和分析。

• 许多错误在编译时可以被检测出来，不用等到运行时，这大大降低了代码运行错误的风险，有利于程序的健壮性；
• 减少运行时的类型检查，从而降低了运行时负载，有助于提升执行性能。
  
  

阶段二：开发和测试

HUAWEI DevEco Studio

DevEco Studio是华为开发者联盟提供的HarmonyOS应用及元服务开发者的集成开发环境，是基于IntelliJ IDEA Community开源版本打造。提供一站式的分布式应用开发平台，支持分布式多端开发、分布式多端调测、多端模拟仿真，全方位的质量与安全保障。下方会提供下载与安装步骤。


系统要求

Windows：
操作系统：Windows 10/11 64 位
内存：16GB及以上
硬盘：100GB 及以上
分辨率：1280*800 像素及以上

macOS
操作系统：macOS(X86) 11/12/13/14 macOS(ARM) 12/13/14
内存：8GB及以上
硬盘：100GB 及以上
分辨率：1280*800 像素及以上

HUAWEI DevEco Testing

HUAWEI DevEco Testing提供一站式的应用测试服务平台。为开发者提供全新自动化测试框架，及稳定性、性能、应用基础质量等专项测试服务，覆盖应用测试全周期，助力打造高品质应用。自动化测试框架DevEco Testing Hypium，持续提升测试脚本开发效率及应用测试效率。


系统要求

Windows：
操作系统：Windows 10/11 64 位
内存：推荐使用16GB及以上，最小8GB
硬盘：100GB 及以上
分辨率：1600*900 像素及以上

macOS
操作系统：macOS(X86) /12/13/14 macOS(ARM) 12/13/14
内存：推荐使用16GB及以上，最小8GB
硬盘：100GB 及以上
分辨率：1600*900 像素及以上

阶段三：上架与运营

AppGallery Connect

AppGallery Connect是华为应用市场推出的应用一站式服务平台，致力于为开发者提供应用创意、开发、分发、运营、分析全生命周期服务，构建全场景智慧化的应用生态。提高版本质量，开放分发和运营服务，帮助您获得用户并实现收入的规模增长。帮助开发者进行应用后续运营上架。

1.2 DevEco Studio 安装

(1)下载安装包

1）安装包下载地址

https://developer.harmonyos.com/cn/develop/deveco-studio/#download

2）根据自己的操作系统下载Betal版本

（2）安装

1）解压文件，双击exe文件，进入安装界面

2）默认安装于C：＼Program Files路径下，也可以单击"浏览…"指定其他安装路径，然后单击下一步

3）点击Next，进入安装选项页面，第一个一定要选上，后面三个最好也选上

4）点击Next，进入安装页，直接点击安装

5）安装完成后选择重启电脑，点完成

6）重启完成后，会在桌面看到DevEco Studio的图标

（3）配置开发环境

1）选择Agree，进入配置导入页面，选择不导入任何配置

2）进入首次运行的欢迎页面，点Agree

3）出现这个界面，则DevEco Studio安装完成

4）点击Create Project，选择空文件创建工程

（4）补充

1）完成上述三步后就下载完成了，下载完成后可以点击Djagnose 进行环境诊断，防止环境配置错误

2）官方文档中也有更加详细的环境安装报错解决示例说明

https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/environment_config-0000001052902427-V3#section551917522319

2. HarmonyOS 语法与组件

2.1 变量声明与数据类型

声明

ArkTS通过声明引入变量、常量、函数和类型。

变量声明

变量名：类型=值

hi: string = 'hello'; 

变量命名条件

1. 只能包含数字、字母、下划线以及$符号
2. 首个符号，不能以数字开头，只能允许字母或者下划线以及$符号开头
3. 同一个名字的变量在相同作用域中只能声明一次

类型

Number类型

数字，二进制，八进制，十进制，十六进制

count_1 : number = 24
count_2 : number = 3.14; 
count_3 : number = 1e10;

Boolean类型

boolean 类型由 true 和 false 两个逻辑值组成

let isDone: boolean = false;
let Done: boolean = true;

String类型

string 代表字符序列；可以使用转义字符来表示字符。
字符串字面量由单引号（'）或双引号（"）之间括起来的零个或多个字符组成。
字符串字面量还有一特殊形式，是用反向单引号（`）括起来的模板字面量。

name_1 :string = '双引号，单引号都可以'
name_2 :string = 'Hello, world!\n'; 
name_3 :string= 'this is a string'; 
name_4 :string = `The result is ${a}`;

Array类型

array，即数组，是由可赋值给数组声明中指定的元素类型的数据组成的对象。 数组可由数组复合字面量（即用方括号括起来的零个或多个表达式的列表，其中 每个表达式为数组中的一个元素）来赋值。数组的长度由数组中元素的个数来确定。数组中第一个元素的索引为 0。
以下示例将创建包含三个元素的数组：

names: string[] = ['Alice', 'Bob', 'Carol'];

元组

元组通常是一种数据结构，用于将多个不同类型的值组合成一个单一对象

  person : [string,number,boolean] = ['新年快乐',2024,true]

2.2 常用基础组件

容器类—Column和Row

布局容器概念

Column表示沿垂直方向布局的容器
Row表示沿水平方向布局的容器

对齐方式

justifyContent:设置子元素在主轴方向的对齐格式
alignItems:设置子元素在交叉轴方向的对齐格式

主轴和交叉轴的概念

主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。
交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。
代码示例

Column() {  // Column容器组件，用于垂直排列子元素  
  //Colum容器组件  
  Column({space:20}){  // 带有间距的Column容器  
    Text($r('app.string.wenben1'))  // 显示资源文件中的字符串  
      .fontSize(50)  // 设置字体大小  
      //ff0000  
      .fontColor(Color.Red)  // 设置字体颜色，十六进制、直接、调用  
      //400正常的，800最高  
      .fontWeight(800) // 设置字体粗细  
    Text("文本2").fontSize(20)  // 简单的文本显示  
    Text("文本3").fontSize(20)  
    Text("文本4").fontSize(20)  
  }  
  .height("50%")  
  .justifyContent(FlexAlign.Center)  // 设置子元素在主轴的居中对齐  
  //Row容器组件  
  Row(){  // Row容器组件，用于水平排列子元素  
    Text("文本1").fontSize(20)  
    Text("文本2").fontSize(20)  
    Text("文本3").fontSize(20)  
    Text("文本4").fontSize(20)  
  }.justifyContent(FlexAlign.Center)  // 设置子元素在主轴的居中对齐
}

展示类—Text

Text组件用于在界面上展示一段文本信息

创建方式

string字符串

Text('我是一段文本')

引用Resource资源
资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json。

Text($r('app.string.module_desc'))
  .baselineOffset(0)
  .fontSize(30)
  .border({ width: 1 })
  .padding(10)
  .width(300)

文本样式

fontSize：设置文本尺寸，为number类型时，使用fp单位。
fontColor：设置文本颜色
fontWeight：设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal。

Text("文本1")  // 显示资源文件中的字符串  
  .fontSize(50)  // 设置字体大小  
  //ff0000  
  .fontColor(Color.Red)  // 设置字体颜色，十六进制、直接、调用  
  //400正常的，800最高  
  .fontWeight(800) // 设置字体粗细  
Text("文本2").fontSize(20)  // 简单的文本显示

图片展示效果：

展示类—Image

调用方式：$r( )资源组件与访问（数据源调用）、本地文件调用、网络图片
资源分类与访问官方文档：
代码展示

Image($r('app.media.icon'))  // 显示图片资源  
  .width(80)  // 设置图片宽度  
  .height(80)  // 设置图片高度  
  .borderRadius(90)  // 设置图片边框圆角

图片展示效果：

输入类—TextInput

TextInput：单行文本输入框组件
placeholder：输入框无输入时的提示文本
text：输入框当前的文本内容
代码展示

Column({space:20}) {  // 一个Column容器
  TextInput({ text: '15937895215' }).fontSize(20) // 输入框，初始文本  
    .width("80%") // 设置宽度  
    .height(50)  // 设置高度  
  TextInput({ placeholder: '密码' }).fontSize(20) // 带占位符的输入框（提示文本）  
    .type(InputType.Password) // 设置输入类型为密码  
    .width("80%")  
    .height(50)  
    .backgroundColor(Color.Red) // 设置背景颜色  
}

图片展示效果：

操作类—Button

文字形按钮

Button("登录") // 按钮  
  .width("20%") // 设置宽度  
  .fontSize(20) // 设置字体大小  
  .type(ButtonType.Circle) // 设置按钮类型为圆形

自定义按钮，在Button内嵌套其他组件

Button(){  
  Text("登录") // 按钮  
    .fontSize(20) // 设置字体大小  
}.type(ButtonType.Normal) // 设置按钮类型为正常类型  
.width("20%").height(40)  
.borderRadius(10) //设置按钮圆角  
.backgroundColor("#ff0000") //设置按钮背景元素

图片展示效果

按钮类型

Capsule：胶囊型按钮（圆角默认为高度的一半），不支持通过borderRadius属性重新设置圆角。

Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

Circle：圆形按钮，不支持通过borderRadius属性重新设置圆角。

Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90) 
  .height(90)

Normal：普通按钮（默认不带圆角），支持通过borderRadius属性重新设置圆角。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

2.3 登陆界面搭建实操

通过对以上基础组件的学习，我们大致可以实现一个账号登录界面，展示效果如下：

代码如下

import { router } from '@kit.ArkUI'  
  
@Entry  
@Component  //@Entry 和 @Component 是ArkUI中的装饰器，用于定义组件的入口和组件本身。@Entry 表示这个组件是应用的入口组件，@Component 表示这是一个组件  
struct Login { //定义了一个名为Login的组件结构体  
  
  build() {  //是组件的构建方法，用于定义组件的UI结构  
    Column({space:50}) {  //开始一个垂直布局（Column），space:50 表示子元素之间的间隔为50vp  
     //任务列表App  
      Text("任务列表APP").fontSize(40).fontWeight(FontWeight.Bold)  //显示文本“任务列表APP”，字体大小为40vp，字体加粗。  
      //手机号密码输入框  
      Column({space:20}) {  //开始另一个垂直布局，用于放置手机号和密码输入框等控件，子元素间隔为20vp  
        TextInput({ placeholder: '手机号' })//创建一个文本输入框，提示文本为“手机号”，并设置了一系列样式属性，如字体大小、宽度、高度、类型、边框半径等。  
          .fontSize(20)  
          .width("80%")  
          .height(40)  
          .type(InputType.Normal)  
          .borderRadius(15)  
         // .backgroundColor(Color.Pink)  
        TextInput({ placeholder: '密码' }) //类似上一个输入框，但用于输入密码，并设置了密码类型  
          .fontSize(20)  
          .width("80%")  
          .height(40)  
          .type(InputType.Normal)  
          .borderRadius(15)  
          .type(InputType.Password)  
          // .backgroundColor(Color.Pink)  
        //我已阅读并同意协议  
        Row({ space: 5 }) { //子元素间隔为5vp  
          Checkbox().width(22)  //添加一个复选框，并设置宽度为22vp  
          //协议颜色不一样  
          Row() {  //开始另一个水平布局，用于放置“我已阅读并同意”及其后的文本  
            Text("我已阅读并同意").fontSize(14)  
            Text("服务协议").fontSize(14).fontColor(Color.Blue)//在Row内使用Text控件拼接出“我已阅读并同意”以及两个不同颜色的文本（服务协议和QQ保护指引），并通过fontColor设置特定文本的颜色。  
            Text("与").fontSize(14)  
            Text("QQ保护指引").fontSize(14).fontColor(Color.Blue)  
          }  
        }  
        //按钮  
        Button() { //开始定义一个按钮  
          Text("登录")  
            .fontSize(20)  
            .fontColor(Color.White)  
            .fontWeight(FontWeight.Bold)  
            .onClick(()=>{  
  
            })  
        }.width(100) //结束按钮的文本设置，并设置按钮的宽度和高度  
        .height(40)  
      }  
    }    .backgroundImage($r('app.media.background1')) //设置整个Column的背景图片，图片资源通过$r函数引用  
    .backgroundImageSize({width:'100%',height:"100%"}) //设置图片的大小，宽高为100%,占满整页  
    .justifyContent(FlexAlign.Center) //设置Flex容器（Column）的主轴对齐方式为居中  
    .height('100%')//设置Column的高度和宽度为父容器的100%，即全屏显示  
    .width('100%')  
  }  
}

结语

通过本篇文章希望大家对HarmonyOS NEXT开发有了更深入的理解，并掌握了基本的开发技能。在下一篇推送里面，我们将学习HarmonyOS 装饰器与事件，继续深入学习更多的开发技巧和特性。