應用開發介紹

1. 項目說明

通過OpenHarmony提供的Stage模型和ArkUI的eTS聲明式開發規范，結合簡單的Demo，分享學習OpenHarmony/docs/application-dev

2. 主要功能

• 目錄標題展示，目錄列表展示
• 點擊目錄列表，查看列表內容
• 點擊目錄標題的返回箭頭，返回之前的內容
• 頁面內容溢出，可上下滑動查看內容

3. 效果展示

4. 開發環境搭建

首先需要搭建好開發環境。

參閱應用開發文檔—工具：

• 下載[HUAWEI DevEco Studio For OpenHarmony]（簡稱DevEco Studio）
• [配置開發環境]

5. 創建項目

搭建開發環境后，創建項目，了解項目結構。

• 掌握OpenHarmony應用的一些基本概念：

  UI框架的簡單說明（方舟開發框架（ArkUI框架））
  ——類Web開發范式（JS）
  ——聲明式開發范式（eTS）
  Ability的基本概念（應用所具備能力的抽象）
  ——FA模型
  ——Stage模型
  

• 應用包結構：FA模型結構、Stage模型結構

項目的目錄結構:

• AppScope > app.json5 ：應用的全局配置信息。
• entry ：OpenHarmony工程模塊，編譯構建生成一個HAP包。
  • src > main > ets ：用于存放ets源碼。
  • src > main > ets > Application > AbilityStage.ts ：實現AbilityStage接口。
  • src > main > ets > MainAbility ：應用/服務的入口。
  • src > main > ets > MainAbility > MainAbility.ts ：承載Ability生命周期。
  • src > main > ets > pages ：MainAbility包含的頁面。
  • src > main > resources ：用于存放應用/服務所用到的資源文件，如圖形、多媒體、字符串、布局文件等。關于資源文件，詳見資源文件的分類。
  • src > main > module.json5 ：模塊配置文件。主要包含HAP包的配置信息、應用/服務在具體設備上的配置信息以及應用/服務的全局配置信息。
  • build-profile.json5 ：當前的模塊信息 、編譯信息配置項，包括buildOption、targets配置等。
  • hvigorfile.js ：模塊級編譯構建任務腳本，開發者可以自定義相關任務和代碼實現。
• build-profile.json5 ：應用級配置信息，包括簽名、產品配置等。
• hvigorfile.js ：應用級編譯構建任務腳本。

6. 編寫應用

本文所編寫的應用是特別基礎的內容

6.1 定義組件結構

創建好項目后，開始編寫自定義組件，引入需要的文件，定義需要使用的變量，再添加上組件會使用到的生命周期函數和build方法。

// 引用需要的組件和API
import TitleBar from './components/titleBar'
import router from '@ohos.router';

// @Entry裝飾的自定義組件用作頁面的默認入口組件，加載頁面時，將首先創建并呈現@Entry裝飾的自定義組件。
@Entry
// @Component裝飾的struct表示該結構體具有組件化能力，能夠成為一個獨立的組件，這種類型的組件也稱為自定義組件
@Component
struct Index {
  // @State裝飾的變量是組件內部的狀態數據，當這些狀態數據被修改時，將會調用所在組件的build方法進行UI刷新
  @State title: string = 'UI組件'
  @State isShowReturn: boolean = false
  items: Array< Item > = []
  
  // 函數在創建自定義組件的新實例后，在執行其build函數之前執行。允許在aboutToAppear函數中改變狀態變量，更改將在后續執行build函數中生效。  
  aboutToAppear() {
      ...
  }
   
  // build方法里描述UI結構
  build() {
      ...
  }
}

6.2 繪制組件UI

組件結構編寫完成，根據需求開始繪制組件UI界面

build() {
    // Columns沿垂直方向布局的容器
    Column() {
      // 引入的自定義組件  
      TitleBar({ title: this.title, isShowReturn: this.isShowReturn })
      // List包含一系列相同寬度的列表項。適合連續、多行呈現同類數據 
      List() {
        // ForEach渲染控制語法,循環渲染  
        ForEach(this.items, (each) = > {
          ListItem() {
            Row() {
              // 基礎文本組件，顯示一段文本的組件  
              Text(each.name)
                .fontSize(20)
                
              // 基礎圖片組件，支持本地圖片和網絡圖片的渲染展示 
              Image($r('app.media.arrow'))
                .padding(8)
                .width(40)
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
            .padding(10)
          }
          // 綁定通用點擊事件  
          .onClick(() = > {
            ...
          })
        })
      }
    }
    // 設置通用屬性，寬(width)高(height)            
    .width('100%')
    .height('100%')
  }

6.3 添加交互邏輯

界面UI繪制完善后，接下來使用自定義組件的生命周期aboutToAppear回調函數，編寫界面數據初始化的邏輯，并把界面上的交互邏輯編寫完整。

// 編寫界面數據初始化的邏輯，aboutToAppear函數在創建自定義組件的新實例后，在執行其build函數之前執行
aboutToAppear() {
    let routerParams = router.getParams();
    // 條件判斷： routerParams==undefined為一級目錄界面
    if (routerParams == undefined) {
    ...
    // 條件判斷： routerParams!==undefined則為二級目錄界面    
    } else {
    ...
    }
}
     
build(){
  ...
   Row() {
      ...
   }   
  // 編寫點擊事件的邏輯  
  .onClick(() = > {
    // 條件判斷： each.children === undefined，點擊的目錄列表無子目錄
    if (each.children === undefined) {
         router.push({
         url: each.path,
         params: {
         title: each.name
           }
         })
        // 條件判斷： each.children === undefined，點擊的目錄列表有子目錄
        } else {
         router.push({
         url: each.path,
         params: {
             title: each.name,
             items: each.children
           }
         })
       }
    })
   ... 
}

6.4 測試效果

完成應用編寫后，利用DevEco Studio 的Previewer提供的預覽效果，測試應用的運行效果是否符合預期效果。

7. 項目復盤

在編寫OpenHarmony應用的過程中，踩了一些坑，總結下來有如下幾點：

1. 對eTS聲明式范式開發自定義組件生疏，編寫應用的時候，梳理清楚邏輯后，難以順暢的編寫成代碼。
2. DevEco Studio 的Previewer可能會因為緩存造成預覽效果出錯。
   例如：新增了一個自定義組件，并同時設置了點擊跳轉到新增自定義組件的事件，但在Previewer中點擊后，無響應。
   

解決方案：

1. 在gitee上搜索OpenHarmony應用，可檢索到許多開發者上傳的OpenHarmony應用，下載源碼，模仿代碼編寫，
   同時查看文檔，保證理解每一行代碼。
2. 檢測代碼是否編寫正確，如果代碼正確，則通過DevEco Studio的Build下的Clean Project清理緩存。
   Clean Project示意圖：

其他

• third-party-components

第三方庫文件存放目錄。該目錄統一管理第三方庫的文件，例如：頭文件（.h），實現文件（.cpp），庫鏈接文件（.so）等。針對不同的第三方庫功能創建同名文件夾來實現單獨庫功能的管理。OpenHarmony如何將引入的第三方庫，融合，編譯，鏈接。

總結

• OpenHarmony設備開發，保持了C++面向對象的特性及語言的特點:
  1. 面向對象三大原則（封裝、繼承、多態）
  2. C++語言API（智能指針、lambda、類型推導等）

? 熟悉OpenHarmony設備開發的整體邏輯和C++語言后，了解進程間的通信技術，遠程調用等技術，可以更容易的上手OpenHarmony的設備開發。

• OpenHarmony應用開發，雖然和前端開發在寫法上有了相當大的變化，前端是運用（HTML CSS JS），但仍舊有同樣的三個過程:
  1. 搭建頁面結構
  2. 繪制頁面樣式
  3. 添加事件交互
  明白程序開發的流程后，在熟悉OpenHarmony應用開發的語法和本地API后，能在較短的時間內掌握OpenHarmony的應用開發。