HarmonyOS应用开发入门（一）

一、开发流程

1、准备和设计：语言&框架

        HarmonyOS Design, ArkTs, ArkUI, ArkCompler；

2、代码开发：开发&测试

        DevEco Studio, DevEco Testing；

3、测试与上架：分发&运营

        AppGallery Connect；

我们主要进行代码开发的学习，开发工具使用DevEco Studio，开发语言和框架使用ArkTs, ArkUI。

二、开发准备

1、开发工具安装

下载地址：DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟

（1）下载好之后，解压，双击解压后的安装包；

（2）点击Next;

（3）选择安装路径；

（4）安装设置；

（5）点击“Install”进行安装，等待进度条走完，点击“Next”；

（6）安装完成。

2、配置

（1）双击桌面上安装好的 DevEco Studio，点击“Agree”，然后选择“Do not import settings”；

（2）进入配置界面；

（3）SDK 安装目录默认即可；

 （4）点击“Next”开始安装，等待安装完成即可。

三、了解ArkTS

 ArkTs > TypeScript > JavaScript

ArkTS声明式UI的特性：

• 基本UI描述：ArkTS定义了各种装饰器、自定义组件、UI描述机制配合UI开发框架中的UI内置组件、事件方法、属性方法等完成UI开发。
• 状态管理：ArkTS提供了状态管理机制，UI相关联数据可以在组件内，组件间以及全局范围内传递，甚至可以跨设备传递。数据可以只读单向传递，也可双向传递。
• UI元素动态构建：ArkTS提供动态构建UI元素的能力，自定义UI结构，复用组件样式，扩展原生组件。
• 渲染控制：ArkTS提供了渲染控制能力。支持条件渲染，循环渲染等。

 四、TypeScript基本语法

演练场：TypeScript: 演练场 - 一个用于 TypeScript 和 JavaScript 的在线编辑器

1、变量声明

声明变量的关键字(let, const)  变量名:  数据类型  =  值

// string；字符串，可以用单引号或双引号
let msg；string = 'Hello World'
// number：数值，整数，浮点数
let age: number = 20
let score: number = 99.99
// boolean：布尔，true和false
let flag: boolean = true
// any：不确定类型，可以是任意类型
let a: any = 'jack'
a = 20
// union：联合类型，可以是多个指定类型中的一种
let u: string|number|boolean = 'jack'
u = 20
// Object：对象
let p = {name: 'jack', age: 2}
console.log(p.name)    // 输出
console.log(p['name'])
// Array：数组，元素可以是任意其它类型
let names: Array<string> = ['Jack', 'rose']
let ages: number[] = [20, 18]
console.log(name[0])

2、条件控制（if-else和switch）

3、循环迭代（for, while, do-while）

（1）for...in 循环：取出的是key或索引。

// 输出0，1，2
let students: string[] = ["jerry","petter","jhon"];
let val:any;
for (val in students) {
    console.log(val)
}

（2）for...of循环：取出的是元素（内容）。

// 输出"jerry","petter","jhon"
let students: string[] = ["jerry","petter","jhon"];
let val:any;
for (val of students) {
    console.log(val)
}

（3）forEach循环：对数组中的每个元素执行一次回调，不可停止或者中断循环，仅用于对数
组的迭代。

let students: string[] = ["jerry","petter","jhon"];
students.forEach((val, idx, array) => {
    console.log(val); //当前值
    console.log(idx); //索引
    console.log(array); //原数组
});

4、函数（function）

// 无返回值，返回值void可省略
function sayHello(name: string): void{
    console.log('你好，' + name + '!')
}
sayHello('jack')

// 有返回值
function sum(x: number, y: number): number{
    return x + y
}
let result = sum(20,21)
console.log(result)

// 箭头函数
let sayHi = (name: sting) => {
     console.log('你好，' + name + '!')
}
sayHi('jack')

// 可选参数，在参数后加?，表示该参数是可选的
function sayHello(name?: string): void{
    // 判断name是否有值
    name = name ? name : '陌生人'
    console.log('你好，' + name + '!')
}
sayHello('jack')
sayHello()

// 参数默认值，在参数后面赋值，表示参数默认值,如果没有传参，则用默认值
function sayHello(name: string = '陌生人'): void{
    console.log('你好，' + name + '!')
}
sayHello('jack')
sayHello()

5、类和接口

TypeScript具备面向对象编程的基本语法，例如interface、class、enum等。也具备封装、继承、多态等面向对象基本特征。

（1）枚举、接口

// 定义枚举
enum Msg {
    HI = 'Hi',
    HELLO = 'Hello'
}

// 定义接口，抽象方法接收枚举参数
interface A {
    say(msg: Msg): void
}

// 实现接口
class B implements A {
    say(msg: Msg): void {
        console.log(msg + ', I am B')
    }
}

// 初始化对象
let a: A = new B()
// 调用方法，传递枚举参数
a.say(Msg.HI)

（2）类、继承 

// 定义矩形类
class Rectangle {
    // 成员变量
    private width: number
    private length: number
    // 构造函数
    constructor(width: number, length: number) {
        this.width = width
        this.length = length
    }
    // 成员方法
    public area(): number{
        return this.width * this.length
    }
}

// 定义正方形
class Square extends Rectangle {
    constructor(side: number) {
        // 调用父类构造
        super(side, side)
    }
}

let s = new Square(10)
console.log(s.area())

6、模块开发（export，import）

五、Hello HarmonyOS

1、打开 DevEco，新建一个 HarmonyOS 项目：

2、配置项目信息：

 3、Index.ets 中的代码如下所示：

@Entry
@Component
struct Index {
  @State message: string = 'Hello HarmonyOS'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

4、当前停留在 Index.ets 下，打开预览器：