OpenHarmony Docs開發(fā)入門
??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??
前言
不管是作為軟件開發(fā)的愛好者還是已經(jīng)從事軟件開發(fā)這個(gè)行業(yè)的從業(yè)者，對于接觸一種全新的系統(tǒng) OpenHarmony。學(xué)習(xí)OpenHarmony，需要清楚OpenHarmony這個(gè)系統(tǒng)是什么，能干什么，今日分享從設(shè)備開發(fā)和應(yīng)用開發(fā)兩個(gè)方向?qū)W習(xí)OpenHarmony/docs文檔。
一、設(shè)備開發(fā)介紹
1、環(huán)境搭建與源碼獲取
- 環(huán)境搭建
搭建OpenHarmony 的系統(tǒng)環(huán)境，需要Windows系統(tǒng)與Ubuntu系統(tǒng)結(jié)合使用。
Windows系統(tǒng)負(fù)責(zé)燒錄、測試、與OpenHarmony在windows系統(tǒng)cmd模式下交互。
Ubuntu系統(tǒng)負(fù)責(zé)源碼管理、閱讀、開發(fā)、編譯。Ubuntu系統(tǒng)，通過在Windows系統(tǒng)安裝虛擬機(jī)，配置初始化虛擬機(jī)（內(nèi)存推薦16GB及以上、CPU推薦4核及以上），虛擬機(jī)運(yùn)行安裝Ubuntu系統(tǒng)。
詳細(xì)請參考：??搭建輕量與小型系統(tǒng)環(huán)境??
- 源碼獲取
Ubuntu環(huán)境下，更新軟件源命令sudo apt-get update。通過sudo apt_get install git git-lfs，安裝git客戶端與git-lfs，命令 git --version 查看git是否成功。 配置git客戶端 。
安裝碼云repo工具，通過mkdir命令，在固定目錄下創(chuàng)建存放repo的文件目錄。通過命令 curl https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 -o 目錄，獲取到repo工具。安裝配置完成之后，通過一下命令步驟進(jìn)行OpenHarmony源碼獲取 。
詳細(xì)請參考：??源碼獲取??
2、HarmonyOs源碼編譯
- 編譯環(huán)境搭建
Ubuntu環(huán)境下，編譯OpenHarmony源碼之前，必須進(jìn)行編譯環(huán)境搭建。通過apt_get和pip3 install命令安裝配置編譯環(huán)境。通過 apt-get update -y 更新軟件源。更新成功之后，通過apt-get命令進(jìn)行OpenHarmony源碼編譯之前安裝配置。
詳情請參考：??環(huán)境配置??
- 編譯命令
成功配置編譯環(huán)境，Ubuntu環(huán)境下，打開CMD命令行窗口，通過cd命令進(jìn)入HarmonyOs目錄下，目錄結(jié)構(gòu)如下。
OpenHarmony源碼根目錄下，通過執(zhí)行命令 bash build/prebuilts_download.sh 腳本進(jìn)行預(yù)編譯，安裝編譯器及二進(jìn)制工具，成功提示。
接著執(zhí)行命令 ./build.sh system_size=standard product_name=harmonyos 編譯OpenHarmony源碼。./build.sh 同時(shí)也支持其他多種參數(shù)。
--source-root-dir=SOURCE_ROOT_DIR # 指定路徑
--product-name=PRODUCT_NAME # 指定產(chǎn)品名
--device-name=DEVICE_NAME # 指定裝置名稱
--target-os=TARGET_OS # 指定操作系統(tǒng)
-T BUILD_TARGET, --build-target=BUILD_TARGET # 指定編譯目標(biāo)，可以指定多個(gè)
OpenHarmony源碼編譯成功，OpenHarmony源碼根目錄下 out/harmonyos/packages/phone/images， Ubuntu環(huán)境的終端顯示。
詳情請參考：??編譯構(gòu)建??
- 編譯出錯(cuò)
編譯OpenHarmony源碼的過程中，可能出現(xiàn)各類問題。以下枚舉一些異常情況。
解決方法，通過執(zhí)行命令 sudo apt install openjdk-11.0.16 修復(fù)這個(gè)問題。
解決方法，通過執(zhí)行命令 sudo apt install libtinfo5 修復(fù)這個(gè)問題。
其它遇到的問題請參考：??常見編譯問題和解決方法??
3、OpenHarmony燒錄簡介
Ubuntu環(huán)境下，編譯OpenHarmony源碼成功，OpenHarmony鏡像文件存放的路徑，OpenHarmony源碼存放路徑/out/harmony/packages/phone/images。Windows環(huán)境下使用燒錄工具瑞芯微開發(fā)工具 v2.84（RKDevTool.exe），燒錄OpenHarmony文件到開發(fā)版3568。
windows環(huán)境下，使用瑞芯微開發(fā)工具之前需要安裝瑞芯微驅(qū)動，打開瑞芯微開發(fā)工具，同時(shí)通電開發(fā)板，插入U(xiǎn)SB。燒錄工具會顯示發(fā)現(xiàn)一個(gè)MASKROM設(shè)備。開發(fā)板MASKROM模式無法成功燒錄系統(tǒng)。開發(fā)板需要進(jìn)入LOADER模式才能成功燒錄OpenHarmony系統(tǒng)。如何進(jìn)入LOADER模式？需要先通過一個(gè)牙簽按住3568開關(guān)，再進(jìn)行通電，通電之后繼續(xù)按住3568開關(guān)。
燒錄工具頁面會顯示發(fā)現(xiàn)一個(gè)LOADER設(shè)備，放開按住3568的開關(guān)。
瑞芯微開發(fā)工具里面選擇編譯成功后生成的OpenHarmony鏡像，每一個(gè)鏡像文件順序都不能有任何的顛倒。一旦選擇鏡像文件出現(xiàn)顛倒，燒錄的時(shí)候很大概率會將3568開發(fā)板直接燒壞，導(dǎo)致3568開發(fā)板無法使用。正確選擇OpenHarmony鏡像文件，執(zhí)行3568開發(fā)板燒錄。燒錄工具會提示燒錄是否成功。
4、OpenHarmony測試用例
OpenHarmony為開發(fā)者提供了一套全面的自測試框架，開發(fā)者可根據(jù)測試需求開發(fā)相關(guān)測試用例。同時(shí)開發(fā)者也能開發(fā)單獨(dú)測試函數(shù)功能的可執(zhí)行程序。
window模塊功能，創(chuàng)建一個(gè)cpp文件，內(nèi)部編寫main函數(shù)。main函數(shù)編寫業(yè)務(wù)邏輯流程。測試用例在源碼路徑（foundation/windowmanager/snapshot）。
編寫B(tài)UILD.gn增加編譯配置。
cpp目錄上層目錄下，bundle.json文件增加需要編譯的模塊。
執(zhí)行如下命令：
./build.sh system_size=standard product_name=harmonyos
生成 snapshot_display，存放目錄 out/harmonyos/window/window_manager。
在 snapshot_display 目錄下，執(zhí)行如下命令：
hdc file send snapshot_display /system/bin
推送開發(fā)板 /system/bin目錄。
出現(xiàn)異常提示 [Fail]Error opening file: read-only file system, path:/system/bin/snapshot_display，權(quán)限不夠。執(zhí)行命令：
hdc shell mount -o remount,rw /
解決權(quán)限問題。
設(shè)置執(zhí)行權(quán)限 ，執(zhí)行命令：
hdc shell chmod a+x /system/bin/snapshot_display
執(zhí)行推送到開發(fā)板程序snapshot_display。
文件存放開發(fā)板的實(shí)際路徑。
更多測試信息請參考：??測試子系統(tǒng)??
5、OpenHarmony源碼閱讀
推薦使用??DevEco Studio??項(xiàng)目管理工具管理OpenHarmony源碼，學(xué)習(xí)OpenHarmony項(xiàng)目工程的整體目錄結(jié)構(gòu)及進(jìn)行代碼閱讀，其他項(xiàng)目管理工具請自行選擇適合的個(gè)人學(xué)習(xí)的工具。
二、應(yīng)用開發(fā)介紹
1、項(xiàng)目說明
通過OpenHarmony提供的Stage模型和ArkUI的eTS聲明式開發(fā)規(guī)范，結(jié)合簡單的Demo，分享學(xué)習(xí)OpenHarmony/docs/application-dev（??應(yīng)用開發(fā)文檔??）。
2、主要功能
- 目錄標(biāo)題展示，目錄列表展示
- 點(diǎn)擊目錄列表，查看列表內(nèi)容
- 點(diǎn)擊目錄標(biāo)題的返回箭頭，返回之前的內(nèi)容
- 頁面內(nèi)容溢出，可上下滑動查看內(nèi)容
3、效果展示
4、開發(fā)環(huán)境搭建
首先需要搭建好開發(fā)環(huán)境。
參閱應(yīng)用開發(fā)文檔—??工具??：
- 下載??HUAWEI DevEco Studio For OpenHarmony??（簡稱DevEco Studio）
- ??配置開發(fā)環(huán)境??
5、創(chuàng)建項(xiàng)目
搭建開發(fā)環(huán)境后，創(chuàng)建項(xiàng)目，了解項(xiàng)目結(jié)構(gòu)。
參閱應(yīng)用開發(fā)文檔—??快速開始??：
- 掌握OpenHarmony應(yīng)用的一些基本概念：
UI框架的簡單說明（方舟開發(fā)框架（ArkUI框架））
——類Web開發(fā)范式（JS）
——聲明式開發(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包含的頁面。
- src > main > resources：用于存放應(yīng)用/服務(wù)所用到的資源文件，如圖形、多媒體、字符串、布局文件等。關(guān)于資源文件，詳見??資源文件的分類??。
- src > main > module.json5：模塊配置文件。主要包含HAP包的配置信息、應(yīng)用/服務(wù)在具體設(shè)備上的配置信息以及應(yīng)用/服務(wù)的全局配置信息。具體的配置文件說明，詳見??應(yīng)用包結(jié)構(gòu)配置文件的說明（Stage模型）??。
- build-profile.json5：當(dāng)前的模塊信息 、編譯信息配置項(xiàng)，包括buildOption、targets配置等。
- hvigorfile.js：模塊級編譯構(gòu)建任務(wù)腳本，開發(fā)者可以自定義相關(guān)任務(wù)和代碼實(shí)現(xiàn)。
- build-profile.json5：應(yīng)用級配置信息，包括簽名、產(chǎn)品配置等。
- hvigorfile.js：應(yīng)用級編譯構(gòu)建任務(wù)腳本。
6、編寫應(yīng)用
本文所編寫的應(yīng)用是特別基礎(chǔ)的內(nèi)容，所以在接下來的內(nèi)容更主要是對開發(fā)的步驟的說明：
- 參閱應(yīng)用開發(fā)文檔—開發(fā)—??UI開發(fā)??。
- 參閱應(yīng)用開發(fā)文檔—API參考—??組件參考（基于TS擴(kuò)展的聲明式開發(fā)范式）??。
（1）定義組件結(jié)構(gòu)
創(chuàng)建好項(xiàng)目后，開始編寫自定義組件，引入需要的文件，定義需要使用的變量，再添加上組件會使用到的生命周期函數(shù)和build方法。
// 引用需要的組件和API
import TitleBar from './components/titleBar'
import router from '@ohos.router';
// @Entry裝飾的自定義組件用作頁面的默認(rèn)入口組件，加載頁面時(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í)，將會調(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() {
}
}
（2）繪制組件UI
組件結(jié)構(gòu)編寫完成，根據(jù)需求開始繪制組件UI界面。
build() {
// Columns沿垂直方向布局的容器
Column() {
// 引入的自定義組件
TitleBar({ title: this.title, isShowReturn: this.isShowReturn })
// List包含一系列相同寬度的列表項(xiàng)。適合連續(xù)、多行呈現(xiàn)同類數(shù)據(jù)
List() {
// ForEach渲染控制語法,循環(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%')
}
（3）添加交互邏輯
界面UI繪制完善后，接下來使用自定義組件的生命周期aboutToAppear回調(diào)函數(shù)，編寫界面數(shù)據(jù)初始化的邏輯，并把界面上的交互邏輯編寫完整。
// 編寫界面數(shù)據(jù)初始化的邏輯，aboutToAppear函數(shù)在創(chuàng)建自定義組件的新實(shí)例后，在執(zhí)行其build函數(shù)之前執(zhí)行
aboutToAppear() {
let routerParams = router.getParams();
// 條件判斷： routerParams==undefined為一級目錄界面
if (routerParams == undefined) {
// 條件判斷： routerParams!==undefined則為二級目錄界面
} else {
}
}
build(){
Row() {
}
// 編寫點(diǎn)擊事件的邏輯
.onClick(() => {
// 條件判斷： each.children === undefined，點(diǎn)擊的目錄列表無子目錄
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
}
})
}
})
}
（4）測試效果
完成應(yīng)用編寫后，利用DevEco Studio 的Previewer提供的預(yù)覽效果，測試應(yīng)用的運(yùn)行效果是否符合預(yù)期效果。
7、項(xiàng)目復(fù)盤
在編寫OpenHarmony應(yīng)用的過程中，踩了一些坑，總結(jié)下來有如下幾點(diǎn)：
- 對eTS聲明式范式開發(fā)自定義組件生疏，編寫應(yīng)用的時(shí)候，梳理清楚邏輯后，難以順暢的編寫成代碼。
- DevEco Studio 的Previewer可能會因?yàn)榫彺嬖斐深A(yù)覽效果出錯(cuò)。
例如：新增了一個(gè)自定義組件，并同時(shí)設(shè)置了點(diǎn)擊跳轉(zhuǎn)到新增自定義組件的事件，但在Previewer中點(diǎn)擊后，無響應(yīng)。
解決方案：
- 在gitee上搜索OpenHarmony應(yīng)用，可檢索到許多開發(fā)者上傳的OpenHarmony應(yīng)用，下載源碼，模仿代碼編寫，
同時(shí)查看文檔，保證理解每一行代碼。 - 檢測代碼是否編寫正確，如果代碼正確，則通過DevEco Studio的Build下的Clean Project清理緩存。
Clean Project示意圖：
項(xiàng)目源碼
https://gitee.com/chucheng42/simple-project。
其他
- third-party-components
第三方庫文件存放目錄。該目錄統(tǒng)一管理第三方庫的文件，例如：頭文件（.h），實(shí)現(xiàn)文件（.cpp），庫鏈接文件（.so）等。針對不同的第三方庫功能創(chuàng)建同名文件夾來實(shí)現(xiàn)單獨(dú)庫功能的管理。OpenHarmony如何將引入的第三方庫，融合，編譯，鏈接。
總結(jié)
- OpenHarmony設(shè)備開發(fā)，保持了C++面向?qū)ο蟮奶匦约罢Z言的特點(diǎn)：
1. 面向?qū)ο笕笤瓌t（封裝、繼承、多態(tài)）。
2. C++語言API（智能指針、lambda、類型推導(dǎo)等）。
熟悉OpenHarmony設(shè)備開發(fā)的整體邏輯和C++語言后，了解進(jìn)程間的通信技術(shù)，遠(yuǎn)程調(diào)用等技術(shù)，可以更容易的上手OpenHarmony的設(shè)備開發(fā)。
- OpenHarmony應(yīng)用開發(fā)，雖然和前端開發(fā)在寫法上有了相當(dāng)大的變化，前端是運(yùn)用（HTML CSS JS），但仍舊有同樣的三個(gè)過程:
1. 搭建頁面結(jié)構(gòu)
2. 繪制頁面樣式
3. 添加事件交互
明白程序開發(fā)的流程后，在熟悉OpenHarmony應(yīng)用開發(fā)的語法和本地API后，能在較短的時(shí)間內(nèi)掌握OpenHarmony的應(yīng)用開發(fā)。
