鴻蒙開(kāi)發(fā)【應(yīng)用開(kāi)發(fā)基礎(chǔ)知識(shí)】

應(yīng)用開(kāi)發(fā)介紹

1. 項(xiàng)目說(shuō)明

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

2. 主要功能

• 目錄標(biāo)題展示，目錄列表展示
• 點(diǎn)擊目錄列表，查看列表內(nèi)容
• 點(diǎn)擊目錄標(biāo)題的返回箭頭，返回之前的內(nèi)容
• 頁(yè)面內(nèi)容溢出，可上下滑動(dòng)查看內(nèi)容

3. 效果展示

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

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

參閱應(yīng)用開(kāi)發(fā)文檔—工具：

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

5. 創(chuàng)建項(xiàng)目

搭建開(kāi)發(fā)環(huán)境后，創(chuàng)建項(xiàng)目，了解項(xiàng)目結(jié)構(gòu)。

• 掌握OpenHarmony應(yīng)用的一些基本概念：

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

• 應(yīng)用包結(jié)構(gòu)：FA模型結(jié)構(gòu)、Stage模型結(jié)構(gòu)

項(xiàng)目的目錄結(jié)構(gòu):

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

6. 編寫(xiě)應(yīng)用

本文所編寫(xiě)的應(yīng)用是特別基礎(chǔ)的內(nèi)容

6.1 定義組件結(jié)構(gòu)

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

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

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

6.2 繪制組件UI

組件結(jié)構(gòu)編寫(xiě)完成，根據(jù)需求開(kāi)始繪制組件UI界面

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

6.3 添加交互邏輯

界面UI繪制完善后，接下來(lái)使用自定義組件的生命周期aboutToAppear回調(diào)函數(shù)，編寫(xiě)界面數(shù)據(jù)初始化的邏輯，并把界面上的交互邏輯編寫(xiě)完整。

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

6.4 測(cè)試效果

完成應(yīng)用編寫(xiě)后，利用DevEco Studio 的Previewer提供的預(yù)覽效果，測(cè)試應(yīng)用的運(yùn)行效果是否符合預(yù)期效果。

7. 項(xiàng)目復(fù)盤(pán)

在編寫(xiě)OpenHarmony應(yīng)用的過(guò)程中，踩了一些坑，總結(jié)下來(lái)有如下幾點(diǎn)：

1. 對(duì)eTS聲明式范式開(kāi)發(fā)自定義組件生疏，編寫(xiě)應(yīng)用的時(shí)候，梳理清楚邏輯后，難以順暢的編寫(xiě)成代碼。
2. DevEco Studio 的Previewer可能會(huì)因?yàn)榫彺嬖斐深A(yù)覽效果出錯(cuò)。
   例如：新增了一個(gè)自定義組件，并同時(shí)設(shè)置了點(diǎn)擊跳轉(zhuǎn)到新增自定義組件的事件，但在Previewer中點(diǎn)擊后，無(wú)響應(yīng)。
   

解決方案：

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

其他

• third-party-components

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

總結(jié)

• OpenHarmony設(shè)備開(kāi)發(fā)，保持了C++面向?qū)ο蟮奶匦约罢Z(yǔ)言的特點(diǎn):
  1. 面向?qū)ο笕笤瓌t（封裝、繼承、多態(tài)）
  2. C++語(yǔ)言API（智能指針、lambda、類型推導(dǎo)等）

? 熟悉OpenHarmony設(shè)備開(kāi)發(fā)的整體邏輯和C++語(yǔ)言后，了解進(jìn)程間的通信技術(shù)，遠(yuǎn)程調(diào)用等技術(shù)，可以更容易的上手OpenHarmony的設(shè)備開(kāi)發(fā)。

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