OpenHarmony - 應用開發入門指南

作者：余香鑫 2022-11-04 14:58:59

系統 OpenHarmony

OpenHarmony是由開放原子開源基金會(OpenAtom Foundation)孵化及運營的開源項目, 目標是面向全場景、全連接、全智能時代, 搭建一個智能終端設備操作系統的框架和平臺, 促進萬物互聯產業的繁榮發展。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

前言

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

一、了解OpenHarmony

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

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

和HarmonyOS有什么關系

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

#打卡不停更# OpenHarmony - 應用開發入門指南-開源基礎軟件社區

二、ArkUI框架

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

框架提供了基于TS擴展的聲明式開發范式(簡稱eTS)和基于JS擴展的類Web開發范式(簡稱JS), 以下是兩種范式的簡單對比。

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

框架結構

#打卡不停更# OpenHarmony - 應用開發入門指南-開源基礎軟件社區

對比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)
  }
}

三、開發環境搭建

安裝DevEco Studio. IDE 3.0 Beta4支持HarmonyOS和OpenHarmonOS應用開發, 且提供了信息中心InfoCenterView->ToolWindows->InfoCenter方便快速查閱應用開發資源使用IDE Beta4打開舊版本創建的項目存在白屏問題, 推測是因為新版本編譯器版本變更導致的, 所以僅建議使用Beta4開發新項目。

??配置SDK。

配置hdc環境變量, HarmonyOS hdc和OpenHarmony hdc不兼容(可選)。

四、使用JS語言開發

創建一個OpenHarmony工程項目, 選擇JS語言, 從下面目錄結構可以看出OpenHarmony應用項目和HarmonyOS應用項目差別不大, 主要有兩個區別：

構建工具從gradle變為了hvigor, 這個對于我們應用開發基本無影響。
OpenHarmony應用項目src/main目錄下沒有了java目錄。

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模塊依賴

配置簽名, 打開項目配置頁面, 選擇Project->Signing COnfig->OK, 完成自動簽名。

編寫邏輯代碼, JS語法和Web網頁類似, 可??參考示例??。

運行調試, 先連接設備(需要先開啟開發者模式), 點擊Run->Run entry將自動編譯安裝啟動hap到設備上。

五、使用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 按鈕