#打卡不停更# OpenHarmony - 應用開發入門指南

作者：餘香鑫

前言

1. 了解OpenHarmony
2. 能夠開發一些簡單的OpenHarmony應用

一、了解OpenHarmony

OpenHarmony是由開放原子開源基金會(OpenAtom Foundation)孵化及營運的開源項目, 目标是面向全場景、全連接配接、全智能時代, 搭建一個智能終端裝置作業系統的架構和平台, 促進萬物互聯産業的繁榮發展.

• 開放原子開源基金會:

  由阿裡巴巴、百度、華為、浪潮、360、騰訊、招商銀行聯合發起, 于 2020 年 6 月成立的非營利機構. 為各類開源項目提供各種支援

(1）開放原子開源基金會是中國内地首個開源領域的基金會, 成立于2020年6月, 由阿裡巴巴、百度、華為、浪潮、360、騰訊、招商銀行等企業聯合發起, 是在中華人民共和國民政部注冊的非營利性獨立法人機構. 基金會涵蓋OpenHarmony、TecentOS Tiny、AliOShings、UBLM、TKEstack、XuperChain等項目. )

和HarmonyOS有什麼關系

華為的說法HarmonyOS是基于OpenHarmony開發的商用版本, 如下方右圖所示

二、ArkUI架構

ArkUI架構也稱方舟開發架構, 架構提供了應用UI開發所必需的能力，如多種元件、布局計算、動畫能力、UI互動、繪制等。

架構提供了基于TS擴充的聲明式開發範式(簡稱

eTS

)和基于JS擴充的類Web開發範式(簡稱

JS

), 以下是兩種範式的簡單對比

開發範式名稱	簡介
類Web開發範式	采用經典的HML、CSS、JavaScript三段式開發方式. 使用HML标簽檔案進行布局搭建, 使用CSS檔案進行樣式描述, 使用JavaScript檔案進行邏輯處理.
聲明式開發範式	采用TS語言并進行聲明式UI文法擴充, 從元件、動效和狀态管理三個次元提供了UI繪制能力. 選用有類型标注的TS語言, 引入編譯期的類型校驗.

架構結構

對比JS的類Web開發範式 eTS無需JS Framework進行頁面DOM管理, 渲染更新鍊路更為精簡, 性能更好, 在進行大型應用開發時, 更推薦使用eTS進行開發

TypeScript

TypeScript是在JavaScript的一個超集并支援 ECMAScript 6 标準, 本節會簡單介紹TS和JS的主要不同點, 更多内容可自行前往

TypeScript官網

類型提示

TypeScript 的核心功能是它的類型系統. 在 TypeScript 中, 可以使用類型提示來識别變量或參數的資料類型. 使用類型提示, 可以描述對象的形狀, 這樣可提供更好的文檔, 使 TypeScript能夠驗證代碼是否正常工作。通過靜态類型檢查, TypeScript 在開發初期就能發現 JavaScript 通常直到代碼在浏覽器中運作才會發現的代碼問題.

let name: string = 'Sanmu' // 申明一個String類型的變量name, 初始化值為 'Sanmu'
let isVisible = false // 申明一個布偶類型的變量isVisible, 初始化值為 false

// 聯合類型
function(param: string | number): boolean{
    return true
}

function(param: number): void{
}

// 定義一個枚舉
enum Type {
  WALK,
  SUBWAY,
  CAR
}
           

Class

TS是面對對象語言, 使用

class

關鍵字申明一個類, class内部可以包含變量, 構造和方法, 示例如下

class Person {
  name: string
  private age: number

  constructor(name: string, age: number | string) {
    this.name = name
    if (typeof age === 'string') {
      this.age = Number.parseInt(age)
    } else {
      this.age = age
    }
  }

  sayAge() {
    console.log('Age: ' + this.age)
  }
}
           

三、開發環境搭建

1. 安裝DevEco Studio. IDE 3.0 Beta4支援

   HarmonyOS和OpenHarmonOS應用開發, 且提供了資訊中心InfoCenter

   View->ToolWindows->InfoCenter

   友善快速查閱應用開發資源

   使用IDE Beta4打開舊版本建立的項目存在白屏問題, 推測是因為新版本編譯器版本變更導緻的, 是以僅建議使用Beta4開發新項目

   

2. 配置SDK
3. 配置hdc環境變量, HarmonyOS hdc和OpenHarmony hdc不相容(可選)

四、 使用JS語言開發

1. 建立一個OpenHarmony工程項目, 選擇JS語言, 從下面目錄結構可以看出OpenHarmony應用項目和HarmonyOS應用項目差别不大, 主要有兩個差別:
   1. 建構工具從gradle變為了hvigor, 這個對于我們應用開發基本無影響
   2. OpenHarmony應用項目src/main目錄下沒有了java目錄
   • JS項目目錄結構

   JS.Project.tree
   │  build-profile.json5      # 項目的配置檔案, 申明編譯API版本, 簽名資訊, 包含的module等配置
   │  hvigorfile.js            # 項目級編譯建構任務腳本
   │  local.properties         # 本地配置檔案
   │  package-lock.json
   │  package.json
   ├─.hvigor                   # 編譯建構腳本生成目錄
   ├─entry                     # 主module
   │  │  build-profile.json5
   │  │  hvigorfile.js         # 子產品級編譯建構任務腳本
   │  │  package-lock.json
   │  │  package.json
   │  └─src                    # 源碼目錄
   │      ├─main               # 源碼入口
   │      │  ├─js
   │      │  │  └─MainAbility              # Ability
   │      │  │      │  app.js              # Ability入口
   │      │  │      ├─i18n                 # 國際化語言目錄
   │      │  │      │      en-US.json
   │      │  │      │      zh-CN.json
   │      │  │      └─pages                # jsPage目錄
   │      │  │          └─index            # 首頁
   │      │  │                  index.css
   │      │  │                  index.hml
   │      │  │                  index.js
   │      │  │  config.json    # module配置檔案, 申明Ability的屬性, 使用的隐私權限等配置
   │      │  └─resources       # module資源目錄, 存放config.json中引用的資源檔案
   │      └─ohosTest           # 單元測試
   └─node_modules              # node子產品依賴
              

2. 配置簽名, 打開項目配置頁面, 選擇

   Project->Signing COnfig->OK

   , 完成自動簽名

   

3. 編寫邏輯代碼, JS文法和Web網頁類似, 可參考示例

   

4. 運作調試, 先連接配接裝置(需要先開啟開發者模式), 點選

   Run->Run entry

   将自動編譯安裝啟動hap到裝置上

五、使用eTS語言開發

• eTS項目目錄結構

  eTs.Project.tree
  │  build-profile.json5      # 項目級配置檔案, 申明編譯API版本, 簽名資訊, 包含的module等配置
  │  hvigorfile.js            # 項目級編譯建構任務腳本
  │  local.properties         # 本地配置檔案
  │  package-lock.json
  │  package.json
  ├─.hvigor                   # 編譯建構腳本生成目錄
  ├─AppScope                  # 應用的全局配置資訊
  ├─entry                     # 主module
  │  │  .gitignore
  │  │  build-profile.json5
  │  │  hvigorfile.js         # 子產品級編譯建構任務腳本
  │  │  package-lock.json
  │  │  package.json
  │  └─src                    # 源碼目錄
  │      ├─main               # 源碼入口
  │      │  ├─ets             # ets源碼入口
  │      │  │  ├─Application  # Stage目錄, 一個module僅存在一個
  │      │  │  │      MyAbilityStage.ts   # module運作的入口, 繼承自AbilityStage, 持有AbilityStageContext對象 
  │      │  │  ├─MainAbility  # Ability目錄
  │      │  │  │      MainAbility.ts
  │      │  │  └─pages        # Ability包含的頁面
  │      │  │         index.ets  # 具體的頁面
  │      │  │  module.json5   # module配置檔案, 同HarmonyOS FA項目config.json檔案, 申明Ability的屬性, 使用的隐私權限等配置
  │      │  └─resources       # module資源目錄, 存放圖檔 顔色 字元串等資源
  │      └─ohosTest       # 單元測試
  └─node_modules          # node子產品依賴
             

UI元件生命周期

UI元件的生命周期, 通常包括建立 銷毀 可見 不可見,為滿足UI開發需求, UI架構會在頁面的建立和銷毀前通過回調函數将事件通知給UI元件 eTS UI元件生命周期函數如下

回調函數	描述
aboutToAppear	建立UI元件時回調, 一般在此函數下初始化資料
build	申明UI結構, 函數會在初始渲染時執行, 此外, 當元件中的狀态發生變化時, build方法會再次執行.
aboutToDisappear	UI元件銷毀前調用, 常再次函數下處理資源釋放
onPageShow	頁面顯示回調, 僅@Entry修飾的元件有效
onPageHide	頁面不可見回調, 僅@Entry修飾的元件有效
onBackPress	當點選系統的傳回鍵時, 會回調此函數, 僅@Entry修飾的元件有效

裝飾器

裝飾器	作用對象	描述
@Component	struct	表示該結構體具有UI元件化能力, 申明了該裝飾器必須實作build方法, 以描述UI效果
@Entry	UI元件	表示頁面入口
@Extend	UI内置元件	Extend裝飾器将新的屬性函數添加到内置元件上
@State	UI元件内的變量	修飾的對象資料發生改變時, 會觸發所在元件回調build方法進行重新整理
@Link	UI元件内的變量	子元件依賴其父元件的某些屬性, 支援雙向綁定
@Prop	UI元件内的變量	與@Link作用相同, 但不支援雙向綁定, 且僅支援基本資料類型

UI元件

UI元件是組成頁面布局的基本機關, 通過對不同僚件的響 應來完成和使用者的互動或元件之間的互動. 元件分為容器元件和非容器類元件兩大類. 下面将介紹常見的UI元件

本節示例源碼參見D01_Components

容器

• Flex 彈性布局
  • Column 垂直彈性布局
  • Row 水準彈性布局
• List 清單
• Stack 堆疊容器

元件

• Text 文本
• TextInput 文字輸入
• Image 圖檔
• Button 按鈕

參考

• OpenHarmony Gitee文檔
• HarmonyOS Developer

更多原創内容請關注：中軟國際 HarmonyOS 技術團隊

入門到精通、技巧到案例，系統化分享HarmonyOS開發技術，歡迎投稿和訂閱，讓我們一起攜手前行共建鴻蒙生态。

本文作者：中軟國際HarmonyOS