在開發(fā)之前年叮，我們需要先了解關(guān)于鴻蒙的一些基本概念：UI框架、應(yīng)用模型

基本概念

UI框架

鴻蒙提供了一套UI開發(fā)框架玻募，即方舟開發(fā)框架（ArkUI框架）只损。ArkUI為鴻蒙應(yīng)用的UI開發(fā)提供了完整的基礎(chǔ)設(shè)施，包括簡潔的UI語法七咧、豐富的UI功能（組件跃惫、布局、動畫以及交互事件）艾栋，以及實時界面預(yù)覽工具等爆存，可以支持開發(fā)者進行可視化界面開發(fā)。

方舟開發(fā)框架針對不同目的和技術(shù)背景的開發(fā)者提供了兩種開發(fā)范式蝗砾，分別是基于ArkTS的聲明式開發(fā)范式（簡稱“聲明式開發(fā)范式”）和兼容JS的類Web開發(fā)范式（簡稱“類Web開發(fā)范式”）先较。

在介紹上面兩種開發(fā)范式之前携冤，我們再了解兩個基本的概念：

• UI：即用戶界面。開發(fā)者可以將應(yīng)用的用戶界面設(shè)計為多個功能頁面闲勺，每個頁面進行單獨的文件管理曾棕，并通過頁面路由API完成頁面間的調(diào)度管理如跳轉(zhuǎn)、回退等操作菜循，以實現(xiàn)應(yīng)用內(nèi)的功能解耦翘地。
• 組件：UI構(gòu)建與顯示的最小單位，如列表癌幕、網(wǎng)格衙耕、按鈕、單選框勺远、進度條橙喘、文本等。開發(fā)者通過多種組件的組合谚中，構(gòu)建出滿足自身應(yīng)用訴求的完整界面渴杆。

開發(fā)范式

• 聲明式開發(fā)范式：采用基于TypeScript聲明式UI語法擴展而來的ArkTS語言，從組件宪塔、動畫和狀態(tài)管理三個維度提供UI繪制能力磁奖。
• 類Web開發(fā)范式：采用經(jīng)典的HML、CSS某筐、JavaScript三段式開發(fā)方式比搭，即使用HML標(biāo)簽文件搭建布局、使用CSS文件描述樣式南誊、使用JavaScript文件處理邏輯身诺。該范式更符合于Web前端開發(fā)者的使用習(xí)慣，便于快速將已有的Web應(yīng)用改造成方舟開發(fā)框架應(yīng)用抄囚。

以下是兩種開發(fā)范式的對比：

附圖：方舟開發(fā)框架示意圖

0000000000011111111.20240415144252.99562182254444988535830405075591.png

不同應(yīng)用類型支持的開發(fā)范式

根據(jù)所選應(yīng)用鴻蒙應(yīng)用模型（Stage模型涝焙、FA模型）和頁面形態(tài)（應(yīng)用或服務(wù)的普通頁面、卡片）的不同孕暇，對應(yīng)支持的UI開發(fā)范式也有所差異仑撞，詳見下表：

應(yīng)用模型

上面提到了應(yīng)用模型，那這個應(yīng)用模型又是什么妖滔？應(yīng)用模型是鴻蒙為開發(fā)者提供的應(yīng)用程序所需能力的抽象提煉隧哮，它提供了應(yīng)用程序必備的組件和運行機制。有了應(yīng)用模型座舍，開發(fā)者可以基于一套統(tǒng)一的模型進行應(yīng)用開發(fā)沮翔，使應(yīng)用開發(fā)更簡單、高效曲秉。

隨著系統(tǒng)的演進發(fā)展采蚀，HarmonyOS先后提供了兩種應(yīng)用模型：

• FA（Feature Ability）模型： HarmonyOS API 7開始支持的模型，已經(jīng)不再主推承二。
• Stage模型：HarmonyOS 3.1 Developer Preview版本開始新增的模型榆鼠，是目前主推且會長期演進的模型。在該模型中亥鸠，由于提供了AbilityStage、WindowStage等類作為應(yīng)用組件和Window窗口的“舞臺”读虏，因此稱這種應(yīng)用模型為Stage模型责静。

Stage模型之所以成為主推模型揩徊，源于其設(shè)計思想熄赡。Stage模型的設(shè)計基于如下出發(fā)點炊豪。

1. 為復(fù)雜應(yīng)用而設(shè)計

   • 多個應(yīng)用組件共享同一個ArkTS引擎（運行ArkTS語言的虛擬機）實例，應(yīng)用組件之間可以方便的共享對象和狀態(tài)礁凡，同時減少復(fù)雜應(yīng)用運行對內(nèi)存的占用紊浩。
   • 采用面向?qū)ο蟮拈_發(fā)方式，使得復(fù)雜應(yīng)用代碼可讀性高、易維護性好、可擴展性強。

2. 支持多設(shè)備和多窗口形態(tài)

   應(yīng)用組件管理和窗口管理在架構(gòu)層面解耦：

   • 便于系統(tǒng)對應(yīng)用組件進行裁剪（無屏設(shè)備可裁剪窗口）裤翩。
   • 便于系統(tǒng)擴展窗口形態(tài)今穿。
   • 在多設(shè)備（如桌面設(shè)備和移動設(shè)備）上蓝晒，應(yīng)用組件可使用同一套生命周期慢逾。

3. 平衡應(yīng)用能力和系統(tǒng)管控成本

   Stage模型重新定義應(yīng)用能力的邊界侣滩，平衡應(yīng)用能力和系統(tǒng)管控成本唯竹。

   • 提供特定場景（如卡片物臂、輸入法）的應(yīng)用組件姻僧，以便滿足更多的使用場景赌莺。
   • 規(guī)范化后臺進程管理：為保障用戶體驗，Stage模型對后臺應(yīng)用進程進行了有序治理掠哥，應(yīng)用程序不能隨意駐留在后臺牵咙，同時應(yīng)用后臺行為受到嚴格管理途茫，防止惡意應(yīng)用行為。

FA模型與Stage模型對比

項目	FA模型	Stage模型
應(yīng)用組件	1. 組件分類 0000000000011111111.20240415144235.67463682348765081471619435121310.png - PageAbility組件：包含UI界面，提供展示UI的能力栅组。- ServiceAbility組件：提供后臺服務(wù)的能力雀瓢，無UI界面。- DataAbility組件：提供數(shù)據(jù)分享的能力玉掸，無UI界面刃麸。2. 開發(fā)方式通過導(dǎo)出匿名對象、固定入口文件的方式指定應(yīng)用組件司浪。開發(fā)者無法進行派生泊业，不利于擴展能力。	1. 組件分類 0000000000011111111.20240415144235.38592509672050731842570022713040.png - UIAbility組件：包含UI界面啊易，提供展示UI的能力吁伺，主要用于和用戶交互。- ExtensionAbility組件：提供特定場景（如卡片租谈、輸入法）的擴展能力篮奄，滿足更多的使用場景。2. 開發(fā)方式采用面向?qū)ο蟮姆绞礁钊ィ瑢?yīng)用組件以類接口的形式開放給開發(fā)者宦搬，可以進行派生，利于擴展能力劫拗。
進程模型	有兩類進程：1. 主進程2. 渲染進程	有三類進程：1. 主進程2. ExtensionAbility進程3. 渲染進程
線程模型	1. ArkTS引擎實例的創(chuàng)建一個進程可以運行多個應(yīng)用組件實例，每個應(yīng)用組件實例運行在一個單獨的ArkTS引擎實例中矾克。2. 線程模型每個ArkTS引擎實例都在一個單獨線程（非主線程）上創(chuàng)建页慷，主線程沒有ArkTS引擎實例。3. 進程內(nèi)對象共享：不支持胁附。	1. ArkTS引擎實例的創(chuàng)建一個進程可以運行多個應(yīng)用組件實例酒繁，所有應(yīng)用組件實例共享一個ArkTS引擎實例。2. 線程模型ArkTS引擎實例在主線程上創(chuàng)建控妻。3. 進程內(nèi)對象共享：支持州袒。
應(yīng)用配置文件	使用config.json描述應(yīng)用信息、HAP信息和應(yīng)用組件信息弓候。	使用app.json5描述應(yīng)用信息郎哭，module.json5描述HAP信息、應(yīng)用組件信息菇存。

開發(fā)前準備

1. 安裝最新版DevEco Studio夸研。

2. 開發(fā)環(huán)境配置（詳細可參考：官網(wǎng)配置教程）

   • 開發(fā)之前肯定要搭建環(huán)境，做過Java開發(fā)的的都知道依鸥，安裝開發(fā)環(huán)境亥至，主要的是需要JDK的安裝，鴻蒙開發(fā)環(huán)境比較簡單，在安裝開發(fā)工具的適合會自動安裝jdk姐扮。

   • JDK安裝過的不受影響絮供，沒有安裝的在安裝開發(fā)工具的時候會自動安裝。

   • 有一點需要注意茶敏，鴻蒙開發(fā)需要安裝Node.js壤靶，這個也是js技術(shù)棧開發(fā)的必備。

構(gòu)建第一個鴻蒙應(yīng)用（Stage模型）

既然Stage模型是主推睡榆，那么我們就來用Stage模型構(gòu)建第一個鴻蒙應(yīng)用萍肆。

創(chuàng)建工程

1. 若首次打開DevEco Studio，請點擊Create Project創(chuàng)建工程胀屿。如果已經(jīng)打開了一個工程塘揣，請在菜單欄選擇File > New > Create Project來創(chuàng)建一個新工程。

2. 選擇Application應(yīng)用開發(fā)宿崭，選擇模板“Empty Ability”亲铡，點擊Next進行下一步配置。
   

   image-20240704205048063.png

3. 進入配置工程界面葡兑，Compile SDK選擇“4.0.0(API 10)”,其他參數(shù)保持默認設(shè)置即可奖蔓。
   

   image-20240704205458524.png

4. 點擊Finish，工具會自動生成示例代碼和相關(guān)資源讹堤，等待工程創(chuàng)建完成吆鹤。

ArkTS工程目錄結(jié)構(gòu)（Stage模型）

image-20240704210132813.png

• AppScope > app.json5：應(yīng)用的全局配置信息。
• entry：HarmonyOS工程模塊洲守，編譯構(gòu)建生成一個HAP包疑务。
  • src > main > ets：用于存放ArkTS源碼。
  • src > main > ets > entryability：應(yīng)用/服務(wù)的入口梗醇。
  • src > main > ets > entrybackupability：應(yīng)用提供擴展的備份恢復(fù)能力知允。
  • src > main > ets > pages：應(yīng)用/服務(wù)包含的頁面。
  • src > main > resources：用于存放應(yīng)用/服務(wù)所用到的資源文件叙谨，如圖形温鸽、多媒體、字符串手负、布局文件等涤垫。關(guān)于資源文件。
  • src > main > module.json5：模塊配置文件虫溜。主要包含HAP包的配置信息雹姊、應(yīng)用/服務(wù)在具體設(shè)備上的配置信息以及應(yīng)用/服務(wù)的全局配置信息。
  • build-profile.json5：當(dāng)前的模塊信息 衡楞、編譯信息配置項吱雏，包括buildOption敦姻、targets配置等。
  • hvigorfile.ts：模塊級編譯構(gòu)建任務(wù)腳本歧杏。
  • obfuscation-rules.txt：混淆規(guī)則文件镰惦。混淆開啟后犬绒，在使用Release模式進行編譯時旺入，會對代碼進行編譯、混淆及壓縮處理凯力，保護代碼資產(chǎn)茵瘾。
  • oh-package.json5：用來描述包名、版本咐鹤、入口文件（類型聲明文件）和依賴項等信息拗秘。
• oh_modules：用于存放三方庫依賴信息。
• build-profile.json5：應(yīng)用級配置信息祈惶，包括簽名signingConfigs雕旨、產(chǎn)品配置products等。其中products中可配置當(dāng)前運行環(huán)境捧请，默認為HarmonyOS凡涩。
• hvigorfile.ts：應(yīng)用級編譯構(gòu)建任務(wù)腳本。
• oh-package.json5：主要用來描述全局配置疹蛉，如：依賴覆蓋（overrides）活箕、依賴關(guān)系重寫（overrideDependencyMap）和參數(shù)化配置（parameterFile）等。

First Page

1. 使用文本組件可款。

   工程同步完成后讹蘑，在“Project”窗口，點擊“entry > src > main > ets > pages”筑舅，打開“Index.ets”文件，可以看到頁面由Text組件組成陨舱〈浼穑“Index.ets”文件的示例如下：

   // Index.ets
   @Entry
   @Component
   struct Index {
     @State message: string = 'Hello World';
   
     build() {
       Row() {
         Column() {
           Text(this.message)
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

2. 添加按鈕

   在默認頁面基礎(chǔ)上，我們添加一個Button組件游盲，作為按鈕響應(yīng)用戶點擊误墓，從而實現(xiàn)跳轉(zhuǎn)到另一個頁面∫娑校“Index.ets”文件的示例如下：

   // Index.ets
   @Entry
   @Component
   struct Index {
     @State message: string = 'Hello World'
   
     build() {
       Row() {
         Column() {
           Text(this.message)
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
           // 添加按鈕谜慌，以響應(yīng)用戶點擊
           Button() {
             Text('Next')
               .fontSize(30)
               .fontWeight(FontWeight.Bold)
           }
           .type(ButtonType.Capsule)
           .margin({
             top: 20
           })
           .backgroundColor('#0D9FFB')
           .width('40%')
           .height('5%')
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

3. 在編輯窗口右上角的側(cè)邊工具欄，點擊Previewer莺奔，打開預(yù)覽器欣范。第一個頁面效果如下圖所示：

   
   
   image-20240704211749033.png

Second Page

1. 創(chuàng)建第二個頁面

   • 新建第二個頁面文件。在“Project”窗口，打開“entry > src > main > ets ”恼琼，右鍵點擊“pages”文件夾妨蛹，選擇“New > ArkTS File”，命名為“Second”晴竞，點擊“Finish”蛙卤。可以看到文件目錄結(jié)構(gòu)如下：
     
     image-20240704212219237.png
2. 1. • 配置第二個頁面的路由噩死。在“Project”窗口颤难，打開“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二個頁面的路由“pages/Second”已维。示例如下：

      {
        "src": [
          "pages/Index",
          "pages/Second"
        ]
      }
      

   2. 添加文本及按鈕

   參照第一個頁面行嗤，在第二個頁面添加Text組件、Button組件等衣摩，并設(shè)置其樣式昂验。“Second.ets”文件的示例如下：

   // Second.ets
   @Entry
   @Component
   struct Second {
     @State message: string = 'Hi there'
   
     build() {
       Row() {
         Column() {
           Text(this.message)
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
           Button() {
             Text('Back')
               .fontSize(25)
               .fontWeight(FontWeight.Bold)
           }
           .type(ButtonType.Capsule)
           .margin({
             top: 20
           })
           .backgroundColor('#0D9FFB')
           .width('40%')
           .height('5%')
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

實現(xiàn)頁面間跳轉(zhuǎn)

頁面間的導(dǎo)航可以通過頁面路由router來實現(xiàn)艾扮。頁面路由router根據(jù)頁面url找到目標(biāo)頁面既琴，從而實現(xiàn)跳轉(zhuǎn)。使用頁面路由請導(dǎo)入router模塊泡嘴。

1.第一個頁面跳轉(zhuǎn)到第二個頁面甫恩。

在第一個頁面中，跳轉(zhuǎn)按鈕綁定onClick事件酌予，點擊按鈕時跳轉(zhuǎn)到第二頁磺箕。“Index.ets”文件的示例如下：

// Index.ets
// 導(dǎo)入頁面路由模塊
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
 
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按鈕抛虫，以響應(yīng)用戶點擊
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳轉(zhuǎn)按鈕綁定onClick事件松靡，點擊時跳轉(zhuǎn)到第二頁
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Next' button.`)
          // 跳轉(zhuǎn)到第二頁
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('Succeeded in jumping to the second page.')
 
          }).catch((err: BusinessError) => {
            console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2. 第二個頁面返回到第一個頁面。

在第二個頁面中建椰，返回按鈕綁定onClick事件雕欺，點擊按鈕時返回到第一頁∶藿悖“Second.ets”文件的示例如下：

// Second.ets
// 導(dǎo)入頁面路由模塊
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
 
@Entry
@Component
struct Second {
  @State message: string = 'Hi there'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 返回按鈕綁定onClick事件屠列，點擊按鈕時返回到第一頁
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Back' button.`)
          try {
            // 返回第一頁
            router.back()
            console.info('Succeeded in returning to the first page.')
          } catch (err) {
            let code = (err as BusinessError).code; 
            let message = (err as BusinessError).message; 
            console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

3. 打開“Index.ets”文件，點擊預(yù)覽器中的
   refresh.png
   按鈕進行刷新伞矩。效果如下圖所示：
   
   image-20240705114801550.png

使用真機運行應(yīng)用

1. 將搭載HarmonyOS系統(tǒng)的真機與電腦連接笛洛。具體指導(dǎo)及要求，可查看使用本地真機運行應(yīng)用/服務(wù)乃坤。

2. 點擊File > Project Structure... > Project > SigningConfigs界面勾選“Support HarmonyOS”和“Automatically generate signature”苛让，點擊界面提示的“Sign In”沟蔑，使用華為帳號登錄。等待自動簽名完成后蝌诡，點擊“OK”即可溉贿。如下圖所示：

   
   
   image-20240705120550000.png

3. 在編輯窗口右上角的工具欄，點擊
   run.png

   按鈕運行即可浦旱。

整體還是比較簡單的宇色，后續(xù)有機會在深入學(xué)習(xí)一下。