鴻蒙開發(fā)【應用開發(fā)基礎知識】

應用開發(fā)介紹

1. 項目說明

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

2. 主要功能

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

3. 效果展示

4. 開發(fā)環(huán)境搭建

首先需要搭建好開發(fā)環(huán)境。

參閱應用開發(fā)文檔—工具：

• 下載[HUAWEI DevEco Studio For OpenHarmony]（簡稱DevEco Studio）
• [配置開發(fā)環(huán)境]

5. 創(chuàng)建項目

搭建開發(fā)環(huán)境后，創(chuàng)建項目，了解項目結構。

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

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

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

項目的目錄結構:

• AppScope > app.json5 ：應用的全局配置信息。
• entry ：OpenHarmony工程模塊，編譯構建生成一個HAP包。
  • src > main > ets ：用于存放ets源碼。
  • src > main > ets > Application > AbilityStage.ts ：實現(xiàn)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 ：模塊級編譯構建任務腳本，開發(fā)者可以自定義相關任務和代碼實現(xiàn)。
• build-profile.json5 ：應用級配置信息，包括簽名、產(chǎn)品配置等。
• hvigorfile.js ：應用級編譯構建任務腳本。

6. 編寫應用

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

6.1 定義組件結構

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

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

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

6.2 繪制組件UI

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

build() {
    // Columns沿垂直方向布局的容器
    Column() {
      // 引入的自定義組件  
      TitleBar({ title: this.title, isShowReturn: this.isShowReturn })
      // List包含一系列相同寬度的列表項。適合連續(xù)、多行呈現(xiàn)同類數(shù)據(jù) 
      List() {
        // ForEach渲染控制語法,循環(huán)渲染  
        ForEach(this.items, (each) = > {
          ListItem() {
            Row() {
              // 基礎文本組件，顯示一段文本的組件  
              Text(each.name)
                .fontSize(20)
                
              // 基礎圖片組件，支持本地圖片和網(wǎng)絡圖片的渲染展示 
              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回調函數(shù)，編寫界面數(shù)據(jù)初始化的邏輯，并把界面上的交互邏輯編寫完整。

// 編寫界面數(shù)據(jù)初始化的邏輯，aboutToAppear函數(shù)在創(chuàng)建自定義組件的新實例后，在執(zhí)行其build函數(shù)之前執(zhí)行
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聲明式范式開發(fā)自定義組件生疏，編寫應用的時候，梳理清楚邏輯后，難以順暢的編寫成代碼。
2. DevEco Studio 的Previewer可能會因為緩存造成預覽效果出錯。
   例如：新增了一個自定義組件，并同時設置了點擊跳轉到新增自定義組件的事件，但在Previewer中點擊后，無響應。
   

解決方案：

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

其他

• third-party-components

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

總結

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

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

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