鴻蒙初學001-構建第一個ArkTS應用（Stage模型）

_York發表於2024-10-10
鴻蒙模型

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-dev-guide-V5

HarmonyOS SDK介紹：

從HarmonyOS NEXT Developer Preview1（API 11）版本開始，HarmonyOS SDK以Kit維度提供豐富、完備的開放能力，涵蓋應用框架、系統、媒體、圖形、應用服務、AI六大領域，例如：

  • 應用框架相關Kit開放能力：Ability Kit（程式框架服務）、ArkUI（方舟UI框架）等。
  • 系統相關Kit開放能力：Universal Keystore Kit（金鑰管理服務）、Network Kit（網路服務）等。
  • 媒體相關Kit開放能力：Audio Kit（音訊服務）、Media Library Kit（媒體檔案管理服務）等。
  • 圖形相關Kit開放能力：ArkGraphics 2D（方舟2D圖形服務）、Graphics Accelerate Kit（圖形加速服務）等。
  • 應用服務相關Kit開放能力：Game Service Kit（遊戲服務）、Location Kit（位置服務）等。
  • AI相關Kit開放能力：Intents Kit（意圖框架服務）、HiAI Foundation Kit（HiAI Foundation服務）等。

開發工具：DevEco Studio工具

1、建立一個應用

二、建立後的專案目錄

目錄介紹：

  • AppScope > app.json5：應用的全域性配置資訊，詳見app.json5配置檔案。
  • entry：HarmonyOS工程模組，編譯構建生成一個HAP包。
    • src > main > ets：用於存放ArkTS原始碼。
    • src > main > ets > entryability：應用/服務的入口。
    • src > main > ets > entrybackupability：應用提供擴充套件的備份恢復能力。
    • src > main > ets > pages：應用/服務包含的頁面。
    • src > main > resources：用於存放應用/服務所用到的資原始檔，如圖形、多媒體、字串、佈局檔案等。關於資原始檔，詳見資源分類與訪問。
    • src > main > module.json5：模組配置檔案。主要包含HAP包的配置資訊、應用/服務在具體裝置上的配置資訊以及應用/服務的全域性配置資訊。具體的配置檔案說明，詳見module.json5配置檔案。
    • build-profile.json5：當前的模組資訊 、編譯資訊配置項，包括buildOption、targets配置等。
    • hvigorfile.ts：模組級編譯構建任務指令碼。
    • obfuscation-rules.txt：混淆規則檔案。混淆開啟後，在使用Release模式進行編譯時，會對程式碼進行編譯、混淆及壓縮處理，保護程式碼資產。詳見開啟程式碼混淆。
    • oh-package.json5：用來描述包名、版本、入口檔案（型別宣告檔案）和依賴項等資訊。
  • oh_modules：用於存放三方庫依賴資訊。

  • build-profile.json5：工程級配置資訊，包括簽名signingConfigs、產品配置products等。其中products中可配置當前執行環境，預設為HarmonyOS。

  • hvigorfile.ts：工程級編譯構建任務指令碼。

  • oh-package.json5：主要用來描述全域性配置，如：依賴覆蓋（overrides）、依賴關係重寫（overrideDependencyMap）和引數化配置（parameterFile）等。

三、編寫頁面

，在“Project”視窗，點選“entry > src > main > ets > pages”，開啟“Index.ets”檔案，進行頁面的編寫

新增一個按鈕

//新增按鈕，以響應使用者點選
      Button(){
        Text('Next')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .type(ButtonType.Capsule)
      .margin({
        top:20
      })
      .backgroundColor('#0D9FFB')
      .width('40%')
      .height('10%')

四、建立第二個頁面

開發者也可以在右鍵點選“pages”資料夾時，選擇“New > Page > Empty Page”，命名為“Second”，點選“Finish”完成第二個頁面的建立。使用此種方式則無需再進行下文中第二個頁面路由的手動配置。

建立頁面後自動新增的路由

第二個頁面新增返回按鈕

@Entry
@Component
struct Second  {
  @State message: string = 'Hello World';

  build() {
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        Button(){
          Text('返回')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }.type(ButtonType.Circle)
        .margin({
          top:20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }.height('100%')
  }
}

新增按鈕點選事件，做跳轉操作：

跳轉到第二個頁面程式碼

router.pushUrl({
  url:'pages/Second'
}).then(()=>{
  console.log('to Second Page')
}).catch((err:BusinessError)=>{
  console.error('跳轉錯誤 ${err.Code}, ${err.message}')
})

路由返回程式碼：

 console.log('click back')
          try {
            router.back()
          }
          catch (err){
            let code=(err as BusinessError).code;
            let message=(err as BusinessError).message;
            console.error('Fail to Back ${code},message is ${message}')
          }

第一個ArtTS應用完成

相關文章