1、程序簡介

該程序是基于OpenHarmony標準系統編寫的UI應用類：HelloOpenHarmony。

本案例是基于API 9接口開發。

本案例已在OpenHarmony凌蒙派-RK3568開發板驗證通過

2、準備事項

在Windows安裝HUAWEI DevEco Studio編譯工具。

3、知識基礎

3.1、什么是TS？

TypeScript 簡稱 TS ，它是 JavaScript 的一個超集并支持 ECMAScript 6 標準，如果讀者已經熟悉 TS 語法可以直接跳過本節了，如果有過其它編程語言經驗的話會很容易上手，語言都是相通的，充其量就是熟悉一下不同語言間的語法，本節只是簡單介紹一下 TS 語法，如果想更多的了解 TS，請自行查看TypeScript官網

3.2、基礎類型

3.2.1、Any

TypeScript 提供了 any 關鍵字表示任意數據類型，聲明為該類型的變量可以賦予任意類型的值。

var data: any; // 聲明data為any類型
data = true;
console.log(typeof data); // boolean
data = 'OpenHarmony';
console.log(typeof data); // string
data = 100;
console.log(typeof data); // number
data = 10.5
console.log(typeof data); // number

3.2.2、number

TypeScript 提供了 number 關鍵字來表示數字類型，它是雙精度 64 位浮點值，既可以表示整數，又可以表示小數。

var data: number;
data = 100;
console.log(typeof data) // number
data = -10;
console.log(typeof data) // number
data = 3.14;
console.log(typeof data) // number
data = 0b10001;
console.log(typeof data) // number

3.2.3、string

TypeScript 提供了 string 關鍵字來表示字符串類型，使用單引號（'）或雙引號（"）來表示字符串類型，也可以使用反引號（`）來定義多行文本和內嵌表達式。

var data: string;
data = "Hello, OpenHarmony";
data = 'Hello, OpenHarmony';
data = `Hello, ${data}`
console.log(data) // Hello, Hello, OpenHarmony

3.2.4、boolean

TypeScript 提供了 boolean 關鍵字來表示邏輯值 true 和 false。

var data: boolean = false;
data = true;
data = false;

3.2.5、數組類型

TypeScript 沒有提供專門的關鍵字來表示數組類型，聲明一個數組可以使用元素類型后邊加[]或者數組泛型的方式。

var scores: number[] = [90, 88]; // 聲明一個number數組
var names: string[] = ["張三", "李四"]; // 聲明一個string數組
var address: Array<string> = ["Beijing", "Tianjin"]; // 聲明一個string數組
console.log(names[0]) // 訪問數組
console.log(scores[0].toString()) // 訪問數組
console.log(address[0]) // 訪問數組

for(var i = 0; i < address.length; i++) { // 遍歷數組
console.log(address[i])
}

for(var index in address) { // 遍歷數組
console.log(address[index])
}

3.2.6、元組

TypeScript 提供了元組來表示已知元素數量和類型的數組，元組內的各元素的類型不必相同，但是對應位置的類型必須一致。

var user: [string, number, string]; // 定義一個元組
user = ["張三", 18, 'Beijing']; // 初始化元組，對應位置類型必須一致
console.log(`姓名：${user[0]}`) // 姓名：張三
console.log(`年齡：${user[1]}`) // 年齡：18
console.log(`住址：${user[2]}`) // 住址：Beijing

3.2.7、enum

TypeScript 提供了 enum 關鍵字表示枚舉類型，枚舉類型主要用于定義數值的集合。

enum Color { // 定義一個枚舉
Red,
Green,
Blue
}
var c: Color = Color.Blue; // 定義枚舉類型
console.log(c.toString()); // 2

3.2.8、void

TypeScript 提供了 void 關鍵字表示函數的返回類型為空，也就是函數沒有返回值。

function print(msg: string): void { // 函數沒有返回值
console.log(msg)
}

3.2.9、undefined

TypeScript 提供了 undefined 關鍵字表示聲明了一個變量但并沒有賦值的情況。

var data; // 聲明了data，但是沒有賦值
console.log(typeof data); // undefined

3.2.10、null

TypeScript 提供了 null 關鍵字表示一個對象沒有初始化。

class Person {
}

var person: Person; // 聲明一個person，但是沒有初始化
if(null == person) {
console.log("person is null"); // person is null
}

3.2.11、聯合類型

TypeScript 允許通過 | 將一個變量設置成多種類型，賦值的時候可以根據設置的類型來賦值。

var data: string | number; // 設置data為聯合類型
data = 'OpenHarmony'; // 正確
data = 99; // 正確
data = true; // 編譯報錯，類型不匹配

注意：聯合類型很重要，ArkUI框架里大量使用了聯合類型。

3.3、變量聲明

3.3.1、var

變量在使用前必須先聲明，TS 使用 var 聲明一個變量，我們可以使用一下四種方式來聲明變量：

（1）聲明變量的類型并賦值初始值，格式：var [變量名] : [類型] = 值;

var osName:string = "OpenHarmony";

（2）聲明變量的類型但不賦值初始值，格式：var [變量名] : [類型];

var osName:string;

（3）聲明變量并賦值初始值，但不設置類型，格式：var [變量名] = 值;

var osName = "OpenHarmony";

（4）聲明變量并沒有設置類型和初始值，該類型可以是任意類型，默認值為 undefined，格式：var [變量名];

var osName;

3.4、函數

3.4.1、函數聲明

函數就是包裹在花括號中的代碼塊，前邊使用 function 關鍵字，語法格式如下：

function function_name() {
// 執行代碼
}

3.4.2、函數調用

函數只有通過調用才可以執行函數內的代碼，語法格式如下：

function_name()

3.4.3、函數返回值

如果希望得到函數的執行結果，可以使用 return 語句，語法如下：

function function_name(): return_type {
return value; // return語句
}

3.4.4、帶參數函數

在調用函數時可以向函數傳遞值，這些值被稱為參數，語法如下：

function func_name(param1 :paramType, param2 :paramType) {
}

3.4.5、可選參數

如果函數定義了參數則必須傳遞這些參數否則報錯，如果不想傳遞這些參數，可以添加 ? ，語法如下：

function func_name(param1: paramType, param2?: paramType) {
}

注意：如果參數不全是可選參數，那么可選參數的位置必須放在最后。

3.4.6、默認參數

函數定義了參數則必須傳遞這些參數否則報錯，如果不想傳遞這些參數除了使用可選參數外，也可以使用默認參數，當不傳入該參數時則使用默認值，語法如下：

function func_name(param1: paramType, param2: paramType = default_value) {
}

注意：函數的參數不能同時是默認參數和可選參數。

3.4.7、剩余參數

在不確定要向函數傳遞多個參數的情況下，可以使用剩余參數，剩余參數前邊以 ... 為前綴數據類型為數組的形式提供，語法如下：

function func_name(param1: paramType, param2: paramType, ...params: paramType[]) {
}

3.5、類

3.5.1、定義類

TypeScript 是面向對象的 JavaScript，定義一個類使用關鍵字 class ，類可以包含字段、構造方法和方法。語法如下：

class class_name {
// 類作用域
}

樣例如下：

class Person {
name: string;
age: number;

constructor(name: string, age: number) {
this.name = name;
this.age = age;
}

info(): string {
return "name: " + this.name + ", age: " + this.age;
}
}

3.5.2、創建類對象

類定義完后，可以通過 new 關鍵字實例化一個類的對象，實例化類對象即調用類的構造方法，語法如下：

var object_name = new class_name([ args ])

樣例如下：

var person = new Person('harmony', 10); // 創建一個Person對象

3.5.3、訪問類屬性和方法

訪問類的屬性和方法以 . 號的形式，語法如下：

obj.field_name // 訪問屬性
obj.function_name() // 訪問方法

樣例如下：

var person = new Person('harmony', 10); // 創建一個person

console.log(person.name); // harmony
console.log(person.age.toString()); // 10
console.log(person.info()); // name: harmony, age: 10

3.5.4、類的繼承

TypeScript 支持繼承類，創建類的時候可以使用關鍵字 extends 繼承一個已有的類，這個已有的類稱為父類，繼承它的類稱為子類。子類除了不能繼承父類的私有成員(方法和屬性)和構造函數，其他的都可以繼承。語法如下：

class child_class_name extends parent_class_name {
}

樣例如下：

class Zhangsan extends Person {
sayHello() {
console.log("Hello, " + this.name)
}
}

var person = new Zhangsan('harmony', 10); // 創建person

console.log(person.name); // harmony
console.log(person.age.toString()); // 10
console.log(person.info()); // name: harmony, age: 10

注意：類的繼承只支持單繼承，不支持多繼承。也就是說子類只能繼承一個父類。

3.5.5、方法重寫

子類可以重寫父類的方法，在重寫父類方法的時候也可以使用 super 關鍵字調用父類的方法。樣例如下：

class Moux extends Person {

info(): string { // 重寫父類方法
console.log(super.info()); // 調用父類方法
return "Hello, " + this.name; // 重新實現info方法
}
}

var person = new Moux('harmony', 10);

console.log(person.name); // harmony
console.log(person.age.toString()); // 10
console.log(person.info()); // name: harmony, age: 10
// Hello, harmony

3.5.6、訪問修飾符

TypeScript 中，可以使用訪問控制符來保護對類、變量、方法和構造方法的訪問。TypeScript 支持 3 種不同的訪問權限。

public（默認）：公有，可以在任何地方被訪問。

protected：受保護，可以被其自身以及其子類訪問。

private：私有，只能被其定義所在的類訪問。

樣例如下所示：

class Person {
name: string;
private age: number; // age為private，外界無法訪問

constructor(name: string, age: number) {
this.name = name;
this.age = age;
}

info(): string {
return "name: " + this.name +
", age: " + this.age;
}
}

var person = new Person('harmony', 10);
console.log(person.name); // harmony
console.log(person.age.toString()); // 編譯報錯，age為private

3.6、接口

3.6.1、定義接口

接口是一系列抽象方法的聲明，接口定義后需要具體的類實現，語法如下：

interface interface_name {
// 抽象方法
}

樣例如下：

interface IPerson { // 定義一個接口
name: string; // 定義接口的一個屬性
say: () => string; // 定義接口的一個方法
}

var person: IPerson = { // 創建一個接口的實例
name: "OpenHarmony", // 設置屬性值
say: () => { // 實現接口方法
return "Hello, " + person.name;
}
}

console.log(person.name); // OpenHarmony
console.log(person.say()); // Hello, OpenHarmony

3.6.2、接口繼承

接口可以使用 extends 關鍵字繼承其它接口來擴展自己，接口既支持單繼承又支持多繼承，多繼承時接口間使用逗號 , 分隔。語法如下：

// 接口單繼承
interface Child_interface_name extends super_interface_name {
}

// 接口多繼承
interface Child_interface_name extends super_interface_name1, super_interface_name2 {
}

3.6.3、類實現接口

類可以使用 implements 關鍵字實現一個接口，一個類實現接口后必須聲明和實現接口的所有屬性和方法。

interface IPerson { // 定義一個接口
name: string; // 定義接口的屬性
say: () => string; // 定義接口的方法
}

class Person implements IPerson { // 類型實現接口
name: string; // 必須聲明接口屬性
constructor(name: string) { // 在構造方法對屬性初始化
this.name = name;
}

say(): string { // 實現接口的方法
return `Hello, I'm ${this.name}`;
}
}

class Teacher implements IPerson { // 類型實現接口

constructor(public name: string) { // 聲明接口屬性簡化方式
}

say(): string { // 實現接口的方法
return `Hello, I'm ${this.name}`;
}
}

var person: IPerson = new Person("王大爺"); // 創建IPerson實現類
console.log(person.say()); // Hello, I'm 王大爺
console.log(person.name); // 王大爺

person = new Teacher("王老師"); // 創建IPerson實現類
console.log(person.say()); // Hello, I'm 王老師
console.log(person.name);

4、項目創建

4.1、打開DevEco Studio

打開DevEco Studio軟件（安裝目錄一般是在C:\Program Files\Huawei\DevEco Studio 3.0.0.993\bin），如下所示：

4.2、創建工程

點擊“Create Project”按鈕，如下所示：

彈出“Create Project”界面，選擇“OpenHarmony”，再選擇“Empty Ability”，點擊“Next”按鍵，如下所示：

在“Create Project”界面中，在"Project name"輸入自己的工程名，選擇”Project type“為”Application“，選擇”Language“為”eTS“，點擊”Finish“按鍵，如下所示：

4.3、編輯代碼

添加”Hello OpenHarmony“代碼，點擊”index.ets“頁面，如下所示：

在index.ets文件中，輸入如下代碼：

@Entry
@Component
struct Index {
@State message: string = 'Hello World'
@State message_oh: string = 'Hello OpenHarmony'

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

4.4、編譯工程

點擊“Build”=>"Rebuild Project"，具體如下所示：

編譯結果如下所示：

5、運行前準備

添加rk3568設備。

在DevEco Studio菜單欄，單擊"Tools" => "Device Manager"，如下所示：

在”Device Manager“界面中，點擊”Local Emulator“ => "Phone"，再點擊"New Emulator"按鈕，如下所示：

在“Select Hardware”界面中，點擊“New Hardware”按鈕，添加rk3568開發板，如下所示：

在"Configur Hardware Profile"界面中，編輯"Device Name"為rk3568，點擊"Finish"按鈕，如下所示：

回到"Select Hardware"界面，選中"rk3568"模型，點擊"Next"按鍵。如下圖所示：

在"System Image"界面中，直接點擊"Next"按鈕，如下圖所示：

在"Virutal Device"界面中，修改"Name"為"rk3568"，點擊"Finish"按鈕。如下圖所示：

6、程序運行

DevEco Studio提供遠程模擬器和本地模擬器。

6.1、本地模擬器

點擊右側欄中的"Previewer"，可以查看ArkUI運行結果。

程序運行結果如下所示：

6.2、遠程模擬器

遠程模擬器需要執行"4、運行前準備"的相關步驟。

選擇對應的工程和開發板設備號，點擊下載按鍵，如下所示：

DevEcoStudio會將工程下載到開發板，開發板液晶屏顯示如下：