HarmonyOS應用開發實戰（JavaScript版）

本書詳細講解HarmonyOS ArkUI（方舟開發框架）的兩大UI框架：ArkUI JS（類Web範式框架）和ArkUI ETS（聲明式UI範式框架）。通過大量案例帶領開發者深入掌握HarmonyOS輕應用（ArkUI JS）、富應用（ArkUI ETS）、和智能家居（OpenHarmony 3.0 LTS）方向應用開發。 本書共6篇20個章節。第一篇為開發準備篇，共2章，介紹HarmonyOS的系統特性，架構和應用開發環境搭建；第二篇為類Web範式框架篇，共4章，深入淺出介紹ArkUI JS框架、內置組件、服務接口等，第5章通過一個分佈式游戲案例深入講解鴻蒙分佈式應用開發的技巧，第6章深入講解原子化服務和服務卡片的開發；第三篇為接口篇，共5章，深入講解ArkUI JavaScript API；第四篇為聲明式UI範式篇，共3章，深入講解ArkUI聲明式UI框架（ArkUI ETS），本篇第12章系統講解ArkUI聲明式框架的開發語言TypeScript,本篇第14章通過深入介紹ArkUI ETS實戰：華為商城APP開發；第五篇為OpenHarmony篇，共3章，分別介紹OpenHarmony 3.0LTS的源碼下載、編譯、燒錄和北向和南向應用開發；第六篇為提高篇，共3章，分別介紹輕鴻蒙端JavaScript框架和富鴻蒙端JavaScript框架的原理，最後一章詳細介紹如何給開發一個類Web範式的組件，並提交給Gitee OpenHarmony倉庫。 學習本書內容，需要具備一定的HTML、CSS、JS基礎知識，希望本書能夠對讀者學習使用鴻蒙開發者框架構建美觀，快速，跨終端的移動應用程序有所幫助。

目錄

第一篇開發準備篇

第1章HarmonyOS系統簡介

1.1HarmonyOS的設計目標

1.1.15G萬物互聯時代

1.1.2物聯網操作系統碎片化

1.1.3下一代操作系統的發展方向

1.2HarmonyOS技術特性

1.2.1分佈式架構

1.2.2操作系統可裁剪

1.2.3一套代碼多端運行

1.3HarmonyOS技術架構

1.3.1內核層

1.3.2系統服務層

1.3.3架構層

1.3.4應用層

1.4HarmonyOS與LiteOS

1.4.1LiteOSA 簡介

1.4.2LiteOSM 簡介

1.5OpenHarmony生態

1.5.1Android與AOSP

1.5.2HarmonyOS與OpenHarmony

1.6HarmonyOS與Fuchsia OS

1.6.1Fuchsia OS系統架構

1.6.2Fuchsia OS與產業

1.7本章小結

第2章開發環境搭建

2.1鴻蒙應用開發環境搭建

2.1.1下載和安裝Node.js

2.1.2下載和安裝DevEco Studio

2.1.3運行Hello World

2.2鴻蒙應用程序運行調試

2.2.1在遠程模擬器中運行應用

2.2.2在Simulator中運行應用

2.3使用真機設備運行應用

2.3.1手動真機簽名流程

2.3.2自動化真機簽名流程

2.4本章小結

第二篇ArkUI JS UI篇

第3章ArkUI JS框架詳細講解

3.1ArkUI JS框架介紹

3.1.1ArkUI JS框架的特徵

3.1.2ArkUI JS架構介紹

3.1.3ArkUI JS運行流程

3.2創建一個ArkUI JS項目

3.2.1新建ArkUI JavaScript項目

3.2.2編寫界面佈局

3.2.3編寫界面邏輯代碼

3.2.4通過模擬器預覽效果

3.3項目目錄結構

3.3.1項目整體結構

3.3.2項目的配置文件

3.3.3資源文件的使用方式

3.4頁面佈局

3.4.1Flexbox佈局

3.4.2Grid網格佈局

3.5語法詳細講解

3.5.1HML語法

3.5.2CSS語法

3.5.3JS邏輯

3.5.4多語言支持

3.6內置組件

3.6.1容器組件

3.6.2基礎組件

3.6.3媒體組件

3.6.4畫布組件

3.7自定義組件

3.7.1自定義組件定義

3.7.2自定義組件事件與交互

3.8本章小結

第4章ArkUI JS與Java混合開發

4.1JavaScript調用Service Ability

4.1.1JS端調用遠端Service Ability

4.1.2JS端訂閱遠端Service Ability

4.2JS端調用音樂播放Service Ability

4.2.1申請分佈式使用權限

4.2.2創建Java端Service Ability

4.2.3音樂播放器前端的UI

4.2.4封裝JS前端調用Service Ability的方法

4.2.5JS端調用Service Ability的方法

4.2.6音樂播放器遙控UI

4.2.7音樂播放器遙控邏輯實現

4.2.8通過實體音量鍵控制遠程設備音量

4.2.9JS端訂閱Service Ability中的播放狀態

4.2.10本節小結

4.3JavaScript項目混合Java UI開發

4.3.1JS Ability和Java Ability跳轉

4.3.2JS端調用相機拍照功能

第5章ArkUI JS游戲開發案例

5.1飛機大戰游戲介紹

5.2飛機大戰游戲分析

5.2.1游戲性能問題分析

5.2.2游戲角色分析

5.3飛機大戰核心算法

5.3.1碰撞檢測算法

5.3.2子彈飛行算法

5.4飛機大戰游戲界面實現

5.4.1游戲主界面

5.4.2游戲控制手柄界面

5.5飛機大戰核心代碼實現——單機篇

5.5.1加載游戲資源

5.5.2太空背景動畫

5.5.3游戲動畫入口

5.5.4繪制游戲主角

5.5.5繪制游戲敵機

5.5.6繪制子彈對象

5.5.7繪制爆炸效果

5.5.8操作主角飛機

5.6飛機大戰核心代碼實現——鴻蒙篇

5.6.1多設備間游戲流轉

5.6.2實現游戲遠程控制

5.7本章小結

第6章原子化服務和服務卡片開發

6.1什麽是原子化服務

6.1.1原子化服務特徵

6.1.2原子化服務與傳統應用的區別

6.1.3原子化服務上架流程

6.1.4原子化服務開發要求

6.1.5原子化服務開發流程

6.2什麽是服務卡片(Service Widget)

6.2.1服務卡片定義

6.2.2服務卡片的三大特徵

6.2.3服務卡片的設計規範

6.2.4服務卡片的整體架構

6.3服務卡片開發詳細講解

6.3.1創建JavaScript服務卡片

6.3.2服務卡片界面實現

6.3.3服務卡片數據綁定

6.3.4服務卡片數據更新

6.3.5服務卡片跳轉事件和消息事件

第三篇JavaScript API篇

第7章基本功能接口

7.1頁面路由

7.1.1頁面路由用法

7.1.2頁面路由動畫

7.2應用上下文

7.3日誌打印

7.4應用配置

7.5窗口

7.6彈框

7.7動畫

7.8剪貼板

第8章網絡與媒體接口

8.1網絡訪問

8.2WebSocket

8.3上傳和下載

8.4媒體

第9章分佈式能力接口

9.1分佈式遷移

9.1.1申請分佈式遷移權限

9.1.2通過FeatureAbility發起遷移

9.2分佈式拉起

9.2.1申請分佈式遷移權限

9.2.2允許以顯式的方式拉起遠程或本地的FA

9.2.3拉起遠程帶返回值的FA

9.2.4分佈式API在FA中的生命周期

9.3文件數據管理

9.3.1輕量級存儲

9.3.2文件管理

第10章系統設備接口

10.1消息通知

10.2地理位置

10.3設備信息

10.4應用管理

10.5媒體查詢

10.6振動

第11章多實例管理

11.1多實例接口

11.1.1多Ability實例管理

11.1.2多Ability之間跳轉

11.2使用NPM安裝JavaScript模塊

第四篇ArkUI ETS UI篇

第12章ArkUI ETS開發語言入門

12.1ArkUI TypeScript介紹

12.2etsloader編譯ETS

12.3TypeScript基礎數據類型

12.3.1布爾值

12.3.2數字

12.3.3字符串

12.3.4數組

12.3.5元組

12.3.6枚舉

12.3.7any

12.3.8void

12.3.9null和undefined

12.3.10never

12.4TypeScript高級數據類型

12.4.1泛型

12.4.2交叉類型

12.4.3聯合類型

12.5TypeScript面向對象特性

12.5.1類

12.5.2接口

12.6TypeScript裝飾器

12.6.1屬性裝飾器

12.6.2方法裝飾器

12.6.3參數裝飾器

12.6.4類裝飾器

12.7TypeScript模塊與命名空間

12.7.1模塊

12.7.2命名空間

第13章ArkUI ETS框架詳細講解

13.1框架特點

13.2組件化設計

13.2.1組件裝飾器@Component

13.2.2組件的內部私有狀態@State

13.2.3組件的輸入和輸出屬性

13.2.4單向同步父組件狀態@Prop

13.2.5雙向同步狀態@Link

13.2.6自定義組件的生命周期函數

13.2.7跨組件數據傳遞@Consume和@Provide

13.2.8監聽變量狀態變更@Watch

13.2.9自定義組件方法@Builder

13.2.10統一組件樣式@Extend

13.3狀態管理倉庫

13.3.1持久化數據管理

13.3.2環境變量Environment

13.3.3AppStorage與組件同步

13.4渲染控制語法

13.4.1條件渲染if...else...

13.4.2循環渲染ForEach

13.5動畫效果

13.5.1屬性動畫

13.5.2顯式動畫

13.5.3轉場動畫

13.5.4手勢處理

13.6框架結構詳細講解

13.6.1文件組織

13.6.2JS標簽配置

13.6.3app.ets

13.6.4資源訪問

13.6.5像素單位

13.7界面佈局

13.7.1Flex佈局

13.7.2Grid佈局

13.7.3堆疊佈局

13.7.4柵格佈局

13.8基礎組件

13.8.1Text組件

13.8.2Button組件

13.8.3Image組件

13.8.4List組件

13.8.5Swiper組件

13.8.6Tabs組件

13.8.7Scroll組件

13.8.8AlertDialog組件

13.8.9自定義彈框

第14章ArkUI ETS UI開發案例

14.1華為商城框架封裝

14.1.1公共組件封裝

14.1.2公共數據接口封裝

14.2商城首頁實現

14.2.1頭部組件

14.2.2頭部滾動

14.2.3輪播廣告

14.2.4導航菜單

14.2.5限時購

14.3商城商品分類頁實現

14.3.1中間左側分類區

14.3.2中間右側商品區

14.4商品詳情頁實現

14.4.1頭部商品圖片輪播區

14.4.2商品價格展示欄

14.4.3商品底部購買欄

第五篇OpenHarmony篇

第15章OpenHarmony基礎

15.1OpenHarmony介紹

15.2OpenHarmony 3.0 LTS編譯與燒錄

15.2.1編譯環境搭建

15.2.2標準系統編譯和燒錄

第16章OpenHarmony應用開發詳細講解

16.1配置OpenHarmony SDK

16.2創建OpenHarmony工程

16.2.1選擇項目模板

16.2.2創建ArkUI JS項目

16.3配置OpenHarmony應用簽名信息

16.3.1生成密鑰和證書請求文件

16.3.2生成應用證書文件

16.3.3生成應用Profile文件

16.3.4配置應用簽名信息

16.4推送並將HAP安裝到開發板/設備

16.4.1OpenHarmony命令行啟動hdcd

16.4.2下載hdc_std工具

16.4.3配置環境變量(Windows)

16.4.4使用hdc_std安裝HAP

16.4.5Hi3516DV300的運行

16.4.6hdc_std連接不到設備

第17章OpenHarmony “HiSpark智能賽車”

17.1鴻蒙HiSpark智能賽車游戲介紹

17.2HiSpark智能賽車端實現

17.2.1HiSpark賽車配置WiFi網絡

17.2.2HiSpark賽車電機驅動

17.2.3HiSpark賽車操作控制

17.3將賽車控制模塊添加到鴻蒙源碼並編譯

17.3.1添加賽車控制模塊代碼

17.3.2編譯OpenHarmony源碼

17.3.3燒錄OpenHarmony

17.4鴻蒙HAP端控制賽車實現

17.4.1賽車控制手柄界面實現

17.4.2將賽車控制手柄設置為橫屏模式

17.4.3Java端通過Service Ability發送指令

17.4.4賽車控制手柄界面邏輯實現

17.5本章小結

第六篇提高篇

第18章輕鴻蒙端JavaScript框架

18.1JerryScript輕量級引擎

18.1.1編譯JerryScript

18.1.2運行JerryScript

18.2輕量級JS核心開發框架

18.2.1JS Framework

18.2.2組件綁定實現

18.2.3路由實現

18.2.4圖形繪制層

18.2.5渲染流程

第19章富鴻蒙端JavaScript框架

19.1QuickJS引擎

19.1.1安裝基礎編譯環境

19.1.2通過Git下載QuickJS源碼

19.1.3編譯QuickJS

19.1.4編譯驗證JS

19.2Google V8引擎

19.3ArkUI JS Engine框架

19.4新方舟編譯器(ArkCompiler 3.0)

第20章類Web範式組件設計與開發

20.1JavaScript端組件設計

20.1.1前端組件效果

20.1.2組件的詳細設計

20.2JS的界面解析

20.2.1在dom_type中增加新組件的屬性定義

20.2.2新增DOMMyCircle類

20.3後端的佈局和繪制

20.3.1新增MyCircleComponent類

20.3.2新增MyCircleElement類

20.3.3新增RenderMyCircle類

20.3.4新增FlutterRenderMyCircle類