OpenHarmony - 應(yīng)用開發(fā)入門指南
??想了解更多關(guān)于開源的內(nèi)容,請訪問:??
前言
- 了解OpenHarmony
- 能夠開發(fā)一些簡單的OpenHarmony應(yīng)用
一、了解OpenHarmony
OpenHarmony是由開放原子開源基金會(OpenAtom Foundation)孵化及運營的開源項目, 目標(biāo)是面向全場景、全連接、全智能時代, 搭建一個智能終端設(shè)備操作系統(tǒng)的框架和平臺, 促進(jìn)萬物互聯(lián)產(chǎn)業(yè)的繁榮發(fā)展。
- 開放原子開源基金會:
由阿里巴巴、百度、華為、浪潮、360、騰訊、招商銀行聯(lián)合發(fā)起, 于 2020 年 6 月成立的非營利機(jī)構(gòu). 為各類開源項目提供各種支持
開放原子開源基金會是中國內(nèi)地首個開源領(lǐng)域的基金會, 成立于2020年6月, 由阿里巴巴、百度、華為、浪潮、360、騰訊、招商銀行等企業(yè)聯(lián)合發(fā)起, 是在中華人民共和國民政部注冊的非營利性獨立法人機(jī)構(gòu). 基金會涵蓋OpenHarmony、TecentOS Tiny、AliOShings、UBLM、TKEstack、XuperChain等項目. )
和HarmonyOS有什么關(guān)系
華為的說法HarmonyOS是基于OpenHarmony開發(fā)的商用版本, 如下方右圖所示
二、ArkUI框架
ArkUI框架也稱方舟開發(fā)框架, 框架提供了應(yīng)用UI開發(fā)所必需的能力,如多種組件、布局計算、動畫能力、UI交互、繪制等。
框架提供了基于TS擴(kuò)展的聲明式開發(fā)范式(簡稱eTS)和基于JS擴(kuò)展的類Web開發(fā)范式(簡稱JS), 以下是兩種范式的簡單對比。
開發(fā)范式名稱 | 簡介 |
類Web開發(fā)范式 | 采用經(jīng)典的HML、CSS、JavaScript三段式開發(fā)方式. 使用HML標(biāo)簽文件進(jìn)行布局搭建, 使用CSS文件進(jìn)行樣式描述, 使用JavaScript文件進(jìn)行邏輯處理. |
聲明式開發(fā)范式 | 采用TS語言并進(jìn)行聲明式UI語法擴(kuò)展, 從組件、動效和狀態(tài)管理三個維度提供了UI繪制能力. 選用有類型標(biāo)注的TS語言, 引入編譯期的類型校驗. |
框架結(jié)構(gòu)
對比JS的類Web開發(fā)范式 eTS無需JS Framework進(jìn)行頁面DOM管理, 渲染更新鏈路更為精簡, 性能更好, 在進(jìn)行大型應(yīng)用開發(fā)時, 更推薦使用eTS進(jìn)行開發(fā)。
TypeScript
TypeScript是在JavaScript的一個超集并支持 ECMAScript 6 標(biāo)準(zhǔn), 本節(jié)會簡單介紹TS和JS的主要不同點, 更多內(nèi)容可自行前往:
???TypeScript官網(wǎng)??。
類型提示
TypeScript 的核心功能是它的類型系統(tǒng). 在 TypeScript 中, 可以使用類型提示來識別變量或參數(shù)的數(shù)據(jù)類型. 使用類型提示, 可以描述對象的形狀, 這樣可提供更好的文檔, 使 TypeScript能夠驗證代碼是否正常工作。通過靜態(tài)類型檢查, TypeScript 在開發(fā)初期就能發(fā)現(xiàn) JavaScript 通常直到代碼在瀏覽器中運行才會發(fā)現(xiàn)的代碼問題。
Class
TS是面對對象語言, 使用class關(guān)鍵字申明一個類, class內(nèi)部可以包含變量, 構(gòu)造和方法, 示例如下:
三、開發(fā)環(huán)境搭建
安裝DevEco Studio. IDE 3.0 Beta4支持HarmonyOS和OpenHarmonOS應(yīng)用開發(fā), 且提供了信息中心InfoCenterView->ToolWindows->InfoCenter方便快速查閱應(yīng)用開發(fā)資源使用IDE Beta4打開舊版本創(chuàng)建的項目存在白屏問題, 推測是因為新版本編譯器版本變更導(dǎo)致的, 所以僅建議使用Beta4開發(fā)新項目。
??配置SDK。
配置hdc環(huán)境變量, HarmonyOS hdc和OpenHarmony hdc不兼容(可選)。
四、 使用JS語言開發(fā)
創(chuàng)建一個OpenHarmony工程項目, 選擇JS語言, 從下面目錄結(jié)構(gòu)可以看出OpenHarmony應(yīng)用項目和HarmonyOS應(yīng)用項目差別不大, 主要有兩個區(qū)別:
- 構(gòu)建工具從gradle變?yōu)榱薶vigor, 這個對于我們應(yīng)用開發(fā)基本無影響。
- OpenHarmony應(yīng)用項目src/main目錄下沒有了java目錄。
- JS項目目錄結(jié)構(gòu)
配置簽名, 打開項目配置頁面, 選擇Project->Signing COnfig->OK, 完成自動簽名。
編寫邏輯代碼, JS語法和Web網(wǎng)頁類似, 可??參考示例??。
運行調(diào)試, 先連接設(shè)備(需要先開啟開發(fā)者模式), 點擊Run->Run entry將自動編譯安裝啟動hap到設(shè)備上。
五、使用eTS語言開發(fā)
- eTS項目目錄結(jié)構(gòu)
UI組件生命周期
UI組件的生命周期, 通常包括創(chuàng)建 銷毀 可見 不可見,為滿足UI開發(fā)需求, UI框架會在頁面的創(chuàng)建和銷毀前通過回調(diào)函數(shù)將事件通知給UI組件 eTS UI組件生命周期函數(shù)如下
回調(diào)函數(shù) | 描述 |
aboutToAppear | 創(chuàng)建UI組件時回調(diào), 一般在此函數(shù)下初始化數(shù)據(jù) |
build | 申明UI結(jié)構(gòu), 函數(shù)會在初始渲染時執(zhí)行, 此外, 當(dāng)組件中的狀態(tài)發(fā)生變化時, build方法會再次執(zhí)行. |
aboutToDisappear | UI組件銷毀前調(diào)用, 常再次函數(shù)下處理資源釋放 |
onPageShow | 頁面顯示回調(diào), 僅@Entry修飾的組件有效 |
onPageHide | 頁面不可見回調(diào), 僅@Entry修飾的組件有效 |
onBackPress | 當(dāng)點擊系統(tǒng)的返回鍵時, 會回調(diào)此函數(shù), 僅@Entry修飾的組件有效 |
裝飾器
裝飾器 | 作用對象 | 描述 |
@Component | struct | 表示該結(jié)構(gòu)體具有UI組件化能力, 申明了該裝飾器必須實現(xiàn)build方法, 以描述UI效果 |
@Entry | UI組件 | 表示頁面入口 |
@Extend | UI內(nèi)置組件 | Extend裝飾器將新的屬性函數(shù)添加到內(nèi)置組件上 |
@State | UI組件內(nèi)的變量 | 修飾的對象數(shù)據(jù)發(fā)生改變時, 會觸發(fā)所在組件回調(diào)build方法進(jìn)行刷新 |
@Link | UI組件內(nèi)的變量 | 子組件依賴其父組件的某些屬性, 支持雙向綁定 |
@Prop | UI組件內(nèi)的變量 | 與@Link作用相同, 但不支持雙向綁定, 且僅支持基本數(shù)據(jù)類型 |
UI組件
UI組件是組成頁面布局的基本單位, 通過對不同事件的響 應(yīng)來完成和用戶的交互或組件之間的交互. 組件分為容器組件和非容器類組件兩大類. 下面將介紹常見的UI組件
本節(jié)示例源碼參見??D01_Components??。
容器
- Flex 彈性布局
- Column 垂直彈性布局
- Row 水平彈性布局
- List 列表
- Stack 堆疊容器
組件
- Text 文本
- TextInput 文字輸入
- Image 圖片
- Button 按鈕