1、程序簡介

該程序是基于OpenHarmony標(biāo)準(zhǔn)系統(tǒng)編寫的UI應(yīng)用類：HelloOpenHarmony。

本案例是基于API 9接口開發(fā)。

本案例已在OpenHarmony凌蒙派-RK3568開發(fā)板驗(yàn)證通過

2、準(zhǔn)備事項(xiàng)

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

3、知識基礎(chǔ)

3.1、什么是TS？

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

3.2、基礎(chǔ)類型

3.2.1、Any

TypeScript 提供了 any 關(guān)鍵字表示任意數(shù)據(jù)類型，聲明為該類型的變量可以賦予任意類型的值。

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 關(guān)鍵字來表示數(shù)字類型，它是雙精度 64 位浮點(diǎn)值，既可以表示整數(shù)，又可以表示小數(shù)。

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 關(guān)鍵字來表示字符串類型，使用單引號（'）或雙引號（"）來表示字符串類型，也可以使用反引號（`）來定義多行文本和內(nèi)嵌表達(dá)式。

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

3.2.4、boolean

TypeScript 提供了 boolean 關(guān)鍵字來表示邏輯值 true 和 false。

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

3.2.5、數(shù)組類型

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

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

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

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

3.2.6、元組

TypeScript 提供了元組來表示已知元素?cái)?shù)量和類型的數(shù)組，元組內(nèi)的各元素的類型不必相同，但是對應(yīng)位置的類型必須一致。

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

3.2.7、enum

TypeScript 提供了 enum 關(guān)鍵字表示枚舉類型，枚舉類型主要用于定義數(shù)值的集合。

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

3.2.8、void

TypeScript 提供了 void 關(guān)鍵字表示函數(shù)的返回類型為空，也就是函數(shù)沒有返回值。

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

3.2.9、undefined

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

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

3.2.10、null

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

class Person {
}

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

3.2.11、聯(lián)合類型

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

var data: string | number; // 設(shè)置data為聯(lián)合類型
data = 'OpenHarmony'; // 正確
data = 99; // 正確
data = true; // 編譯報(bào)錯，類型不匹配

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

3.3、變量聲明

3.3.1、var

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

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

var osName:string = "OpenHarmony";

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

var osName:string;

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

var osName = "OpenHarmony";

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

var osName;

3.4、函數(shù)

3.4.1、函數(shù)聲明

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

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

3.4.2、函數(shù)調(diào)用

函數(shù)只有通過調(diào)用才可以執(zhí)行函數(shù)內(nèi)的代碼，語法格式如下：

function_name()

3.4.3、函數(shù)返回值

如果希望得到函數(shù)的執(zhí)行結(jié)果，可以使用 return 語句，語法如下：

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

3.4.4、帶參數(shù)函數(shù)

在調(diào)用函數(shù)時(shí)可以向函數(shù)傳遞值，這些值被稱為參數(shù)，語法如下：

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

3.4.5、可選參數(shù)

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

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

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

3.4.6、默認(rèn)參數(shù)

函數(shù)定義了參數(shù)則必須傳遞這些參數(shù)否則報(bào)錯，如果不想傳遞這些參數(shù)除了使用可選參數(shù)外，也可以使用默認(rèn)參數(shù)，當(dāng)不傳入該參數(shù)時(shí)則使用默認(rèn)值，語法如下：

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

注意：函數(shù)的參數(shù)不能同時(shí)是默認(rèn)參數(shù)和可選參數(shù)。

3.4.7、剩余參數(shù)

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

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

3.5、類

3.5.1、定義類

TypeScript 是面向?qū)ο蟮?JavaScript，定義一個類使用關(guān)鍵字 class ，類可以包含字段、構(gòu)造方法和方法。語法如下：

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、創(chuàng)建類對象

類定義完后，可以通過 new 關(guān)鍵字實(shí)例化一個類的對象，實(shí)例化類對象即調(diào)用類的構(gòu)造方法，語法如下：

var object_name = new class_name([ args ])

樣例如下：

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

3.5.3、訪問類屬性和方法

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

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

樣例如下：

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

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

3.5.4、類的繼承

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

class child_class_name extends parent_class_name {
}

樣例如下：

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

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

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

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

3.5.5、方法重寫

子類可以重寫父類的方法，在重寫父類方法的時(shí)候也可以使用 super 關(guān)鍵字調(diào)用父類的方法。樣例如下：

class Moux extends Person {

info(): string { // 重寫父類方法
console.log(super.info()); // 調(diào)用父類方法
return "Hello, " + this.name; // 重新實(shí)現(xiàn)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 中，可以使用訪問控制符來保護(hù)對類、變量、方法和構(gòu)造方法的訪問。TypeScript 支持 3 種不同的訪問權(quán)限。

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

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

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()); // 編譯報(bào)錯，age為private

3.6、接口

3.6.1、定義接口

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

interface interface_name {
// 抽象方法
}

樣例如下：

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

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

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

3.6.2、接口繼承

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

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

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

3.6.3、類實(shí)現(xiàn)接口

類可以使用 implements 關(guān)鍵字實(shí)現(xiàn)一個接口，一個類實(shí)現(xiàn)接口后必須聲明和實(shí)現(xiàn)接口的所有屬性和方法。

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

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

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

class Teacher implements IPerson { // 類型實(shí)現(xiàn)接口

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

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

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

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

4、項(xiàng)目創(chuàng)建

4.1、打開DevEco Studio

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

4.2、創(chuàng)建工程

點(diǎn)擊“Create Project”按鈕，如下所示：

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

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

4.3、編輯代碼

添加”Hello OpenHarmony“代碼，點(diǎn)擊”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、編譯工程

點(diǎn)擊“Build”=>"Rebuild Project"，具體如下所示：

編譯結(jié)果如下所示：

5、運(yùn)行前準(zhǔn)備

添加rk3568設(shè)備。

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

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

在“Select Hardware”界面中，點(diǎn)擊“New Hardware”按鈕，添加rk3568開發(fā)板，如下所示：

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

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

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

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

6、程序運(yùn)行

DevEco Studio提供遠(yuǎn)程模擬器和本地模擬器。

6.1、本地模擬器

點(diǎn)擊右側(cè)欄中的"Previewer"，可以查看ArkUI運(yùn)行結(jié)果。

程序運(yùn)行結(jié)果如下所示：

6.2、遠(yuǎn)程模擬器

遠(yuǎn)程模擬器需要執(zhí)行"4、運(yùn)行前準(zhǔn)備"的相關(guān)步驟。

選擇對應(yīng)的工程和開發(fā)板設(shè)備號，點(diǎn)擊下載按鍵，如下所示：

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