鴻蒙移動應用開發項目式教程 (AI助學)(微課版)

王延亮，山東科技職業學院專業主任，主要教授課程包括Java程序設計、Web前端開發基礎、數據庫原理與應用、智能手機應用軟件開發、鴻蒙應用開發》等，編寫的教材有《JSP程序設計》、《C語言程序設計》、《Web前端開發基礎》、《移動端應用開發》。曾擔任金磚國家職業技能大賽、省級職業技能大賽、濰坊市職業技能大賽、山東省“技能興魯”等賽項裁判專家。獲全國職業院校技能大賽一等獎4項，省賽一等獎2項，優秀指導教師獎6項；主持參與教科研項目20余項，其中獲國家級教學成果獎二等獎1項，山東省教學成果獎特等獎1項、二等獎3項，發表論文、軟件著作權多項；多次被評為 “師德標兵”、“最美教師”、“先進個人”、“突出貢獻獎”等榮譽稱號。

目 錄

項目1

人文史哲展示頁——ArkUI（方舟開發框架） 1

知識目標 1

能力目標 1

素質目標 1

【項目背景】 2

【預期目標與成果】 2

任務1-1 創建人文史哲展示頁基本布局 2

【任務分析】 2

【知識儲備】 3

一、淺談HarmonyOS 3

二、HarmonyOS技術架構 3

三、DevEco Studio 5

四、工程創建 8

五、TypeScript基礎語法 12

六、ArkUI中的布局容器 15

【任務實現】 20

任務1-2 創建輪播圖專區 21

【任務分析】 21

【知識儲備】 21

一、Swiper組件概述 21

二、循環播放 21

三、自動輪播 22

四、導航點樣式 22

五、頁面切換方式 22

六、輪播方向 22

【任務實現】 23

任務1-3 創建人文歷史專區 23

【任務分析】 23

【知識儲備】 24

一、網格布局與約束 24

二、設置排列方式 25

三、在網格布局中顯示數據 28

四、設置行、列間距 28

五、構建可滾動的網格布局 29

六、Image組件 30

七、Text組件 31

八、自定義組件 32

九、模塊化開發 33

【任務實現】 35

一、靜態效果制作 35

二、動態跳轉 38

任務1-4 創建高校科普、戲曲文化

專區 40

【任務分析】 40

【知識儲備】 40

一、Scroll組件概述 40

二、Scroll組件的屬性和事件 41

【任務實現】 41

一、高校科普專區 42

二、戲曲文化專區 47

三、為主頁面添加滾動效果 48

【項目拓展 AI助學】 49

【項目小結】 52

【習題】 52

 

項目2

數字雲圖書館展示頁——ArkUI（方舟

開發框架） 54

知識目標 54

能力目標 54

素質目標 54

【項目背景】 54

【預期目標與成果】 55

任務2-1 制作自定義導航欄 55

【任務分析】 55

【知識儲備】 56

一、Tabs組件 56

二、限制導航欄的滑動切換 57

三、滾動導航欄 58

四、自定義導航欄 59

五、切換至指定頁 60

【任務實現】 61

任務2-2 構建數字雲圖書館展示頁 63

【任務分析】 63

【知識儲備】 63

一、Flex布局的相關概念 63

二、布局方向的控制 64

三、布局換行 65

四、主軸方向的對齊方式 65

五、交叉軸方向的對齊方式 66

六、Button組件的使用 66

七、自定義按鈕樣式 68

八、為按鈕添加事件 68

【任務實現】 69

任務2-3 開發“圖書”“熱榜”頁面 74

【任務分析】 74

【知識儲備】 74

一、Router概述 74

二、頁面跳轉 74

三、頁面返回 76

四、動畫概述 77

五、轉場動畫概述及使用 79

【任務實現】 80

【項目拓展 AI助學】 84

【項目小結】 86

【習題】 87

 

項目3

熊貓家園展示頁——ArkTS（方舟

編程語言） 88

知識目標 88

能力目標 88

素質目標 88

【項目背景】 88

【預期目標與成果】 89

任務3-1 開發“熊貓廣場”頁面 89

【任務分析】 89

【知識儲備】 90

一、Stack布局概述 90

二、Stack布局對齊方式 90

三、在Stack布局中使用Z序控制 91

【任務實現】 92

任務3-2 開發“熊貓認養”頁面 95

【任務分析】 95

【知識儲備】 95

一、List組件概述 95

二、List布局與約束 96

三、設計List布局 98

四、渲染控制 99

五、疊代列表內容 100

六、自定義列表樣式 100

七、分組列表 102

八、響應列表項側滑 102

【任務實現】 103

任務3-3 開發 熊貓詳情頁面 107

【任務分析】 107

【知識儲備】 107

一、三元表達式的定義及用法 107

二、數組概述 107

三、數組的操作方法 108

四、頁面的參數傳遞 109

五、接收參數的方式 109

【任務實現】 110

任務3-4 模擬網絡延遲 111

【任務分析】 111

【知識儲備】 111

一、setTimeout()方法的使用 111

二、創建進度條 112

三、配置Progress參數 112

四、設置環形進度條 113

五、設置膠囊形進度條 114

六、設置圓形進度條 115

【任務實現】 115

【項目拓展 AI助學】 116

【項目小結】 118

【習題】 118

 

項目4

自然與科學展示頁——Ability Kit

（程序框架服務） 119

知識目標 119

能力目標 119

素質目標 119

【項目背景】 119

【預期目標與成果】 120

任務4-1 構建自然與科學展示頁 120

【任務分析】 120

【知識儲備】 121

一、Select組件 121

二、onSelect事件的使用 125

三、Stage模型的相關概念 127

【任務實現】 129

任務4-2 開發“機構合作”頁面 131

【任務分析】 131

【知識儲備】 131

一、UIAbility組件 131

二、UIAbility組件的生命周期 132

三、UIAbility組件的啟動模式 135

四、UIAbility組件的基本用法 137

五、UIAbility組件與UI的數據同步 138

六、啟動應用內的UIAbility組件 138

【任務實現】 141

任務4-3 開發“科研傳播”頁面 143

【任務分析】 143

【知識儲備】 143

一、網絡管理開發概述 143

二、從網絡中獲取數據 143

三、使用WebSocket建立連接 145

四、數據庫管理概述 146

【任務實現】 148

一、服務器的搭建 148

二、HTTP請求連接功能的實現 148

【項目拓展 AI助學】 152

【項目小結】 154

【習題】 154

 

項目5

智能融媒展示頁——Multimedia Application（多媒體應用） 156

知識目標 156

能力目標 156

素質目標 156

【項目背景】 156

【預期目標與成果】 157

任務5-1 開發“影視娛樂”頁面 157

【任務分析】 157

【知識儲備】 157

一、基礎布局 157

二、Grid組件進階 158

【任務實現】 161

任務5-2 播放娛樂、航空等宣傳

視頻 163

【任務分析】 163

【知識儲備】 163

一、媒體應用開發概述 163

二、視頻播放 165

【任務實現】 170

一、觀影詳情頁面的實現 170

二、通用工具類的實現 172

三、航天特輯頁面的實現 173

【項目拓展 AI助學】 178

【項目小結】 180

【習題】 180

 

項目6

綜合項目——智學先鋒App制作 181

知識目標 181

能力目標 181

素質目標 181

【項目背景】 181

【預期目標與成果】 182

任務6-1 應用背景分析與Logo

設計 182

【任務分析】 182

【任務實現】 183

一、分析應用背景 183

二、設計Logo 183

三、確認上線 184

任務6-2 為用戶增加安全驗證 184

【任務分析】 184

【知識儲備】 184

一、訪問控制概述 184

二、申請訪問控制授權 184

三、權限類別 187

四、用戶身份認證功能的開發準備 189

五、切換自定義認證 190

【任務實現】 191

任務6-3 創建註冊頁面、登錄頁面 196

【任務分析】 196

【任務實現】 196

一、註冊/登錄工具類 196

二、註冊頁面、登錄頁面 198

任務6-4 應用資源整合 202

【任務分析】 202

【任務實現】 202

一、註冊頁面實現 203

二、登錄頁面實現 204

三、首頁實現 204

四、“書架”頁面實現 210

五、“我的”頁面實現 212

【項目拓展 AI助學】 214

【項目小結】 216

【習題】 216