【鴻蒙】初識鴻蒙

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

基本概念

UI框架

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

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

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

  • UI：即用戶界面。開發(fā)者可以將應(yīng)用的用戶界面設(shè)計為多個功能頁面，每個頁面進(jìn)行單獨的文件管理，并通過頁面路由API完成頁面間的調(diào)度管理如跳轉(zhuǎn)、回退等操作，以實現(xiàn)應(yīng)用內(nèi)的功能解耦。
  • 組件：UI構(gòu)建與顯示的最小單位，如列表、網(wǎng)格、按鈕、單選框、進(jìn)度條、文本等。開發(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ā)范式名稱 語言生態(tài) UI更新方式 開發(fā)效率 應(yīng)用性能 適用場景 發(fā)展趨勢
聲明式開發(fā)范式 ArkTS語言 數(shù)據(jù)驅(qū)動更新 更接近自然語義的編程方式，開發(fā)者可以直觀地描述UI，無需關(guān)心如何實現(xiàn)UI繪制和渲染，開發(fā)高效簡潔。 共用UI后端引擎和語言運行時，無需JS框架，渲染更新鏈路更為精簡，占用內(nèi)存更少，應(yīng)用性能更佳。 復(fù)雜度較大、團隊合作度較高的程序 主推的開發(fā)范式持續(xù)演進(jìn)，為開發(fā)者提供更豐富、更強大的能力。
類Web開發(fā)范式 JS語言 數(shù)據(jù)驅(qū)動更新 采用經(jīng)典的HML、CSS、JavaScript三段式開發(fā)方式，對Web前端開發(fā)比較友好，開發(fā)相對復(fù)雜一些。 共用UI后端引擎和語言運行時，需要JS框架進(jìn)行頁面DOM管理，渲染更新鏈路更為復(fù)雜，占用內(nèi)存更多，應(yīng)用性能稍差。 界面較為簡單的程序應(yīng)用和卡片 非主推

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

0000000000011111111.20240415144252.99562182254444988535830405075591.png

通過上面 的對比可以看出官方也是推薦使用聲明式開發(fā)范式來構(gòu)建UI。

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

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

應(yīng)用模型 頁面形態(tài) 支持的UI開發(fā)范式
Stage模型（推薦） 應(yīng)用或服務(wù)的頁面 聲明式開發(fā)范式（推薦）
卡片 聲明式開發(fā)范式（推薦）類Web開發(fā)范式
FA模型 應(yīng)用或服務(wù)的頁面 聲明式開發(fā)范式類Web開發(fā)范式
卡片 類Web開發(fā)范式

應(yīng)用模型

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

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

  • FA（Feature Ability）模型： HarmonyOS API 7開始支持的模型，已經(jīng)不再主推。
  • Stage模型：HarmonyOS 3.1 Developer Preview版本開始新增的模型，是目前主推且會長期演進(jìn)的模型。在該模型中，由于提供了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)用組件進(jìn)行裁剪（無屏設(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ī)范化后臺進(jìn)程管理：為保障用戶體驗，Stage模型對后臺應(yīng)用進(jìn)程進(jìn)行了有序治理，應(yīng)用程序不能隨意駐留在后臺，同時應(yīng)用后臺行為受到嚴(yán)格管理，防止惡意應(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ā)者無法進(jìn)行派生，不利于擴展能力。		 1. 組件分類
0000000000011111111.20240415144235.38592509672050731842570022713040.png
- UIAbility組件：包含UI界面，提供展示UI的能力，主要用于和用戶交互。- ExtensionAbility組件：提供特定場景（如卡片、輸入法）的擴展能力，滿足更多的使用場景。2. 開發(fā)方式采用面向?qū)ο蟮姆绞?，將?yīng)用組件以類接口的形式開放給開發(fā)者，可以進(jìn)行派生，利于擴展能力。
進(jìn)程模型 有兩類進(jìn)程：1. 主進(jìn)程2. 渲染進(jìn)程 有三類進(jìn)程：1. 主進(jìn)程2. ExtensionAbility進(jìn)程3. 渲染進(jìn)程
線程模型 1. ArkTS引擎實例的創(chuàng)建一個進(jìn)程可以運行多個應(yīng)用組件實例，每個應(yīng)用組件實例運行在一個單獨的ArkTS引擎實例中。2. 線程模型每個ArkTS引擎實例都在一個單獨線程（非主線程）上創(chuàng)建，主線程沒有ArkTS引擎實例。3. 進(jìn)程內(nèi)對象共享：不支持。 1. ArkTS引擎實例的創(chuàng)建一個進(jìn)程可以運行多個應(yīng)用組件實例，所有應(yīng)用組件實例共享一個ArkTS引擎實例。2. 線程模型ArkTS引擎實例在主線程上創(chuàng)建。3. 進(jìn)程內(nèi)對象共享：支持。
應(yīng)用配置文件 使用config.json描述應(yīng)用信息、HAP信息和應(yīng)用組件信息。 使用app.json5描述應(yīng)用信息，module.json5描述HAP信息、應(yīng)用組件信息。

開發(fā)前準(zhǔn)備

  1. 安裝最新版DevEco Studio。

  2. 開發(fā)環(huán)境配置（詳細(xì)可參考：官網(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進(jìn)行下一步配置。

    image-20240704205048063.png

  3. 進(jìn)入配置工程界面，Compile SDK選擇“4.0.0(API 10)”,其他參數(shù)保持默認(rèn)設(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模式進(jìn)行編譯時，會對代碼進(jìn)行編譯、混淆及壓縮處理，保護代碼資產(chǎn)。
    • oh-package.json5：用來描述包名、版本、入口文件（類型聲明文件）和依賴項等信息。
  • oh_modules：用于存放三方庫依賴信息。
  • build-profile.json5：應(yīng)用級配置信息，包括簽名signingConfigs、產(chǎn)品配置products等。其中products中可配置當(dāng)前運行環(huán)境，默認(rè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組件組成?！?strong>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. 添加按鈕

    在默認(rèn)頁面基礎(chǔ)上，我們添加一個Button組件，作為按鈕響應(yīng)用戶點擊，從而實現(xiàn)跳轉(zhuǎn)到另一個頁面?！?strong>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”?？梢钥吹轿募夸浗Y(jié)構(gòu)如下：
      image-20240704212219237.png
      • 配置第二個頁面的路由。在“Project”窗口，打開“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二個頁面的路由“pages/Second”。示例如下：
      {
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

    2. 添加文本及按鈕

    參照第一個頁面，在第二個頁面添加Text組件、Button組件等，并設(shè)置其樣式?！?strong>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)到第二頁?！?strong>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%')
  }
}
  1. 第二個頁面返回到第一個頁面。

在第二個頁面中，返回按鈕綁定onClick事件，點擊按鈕時返回到第一頁?！?strong>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%')
  }
}
  1. 打開“Index.ets”文件，點擊預(yù)覽器中的
    refresh.png
    按鈕進(jìn)行刷新。效果如下圖所示：
    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í)一下。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容