鴻蒙應用開發入門（修訂版）
程晨
商品描述
鴻蒙系統是一款面向未來、面向全場景的分佈式操作系統。在傳統的單設備系統能力的基礎上，鴻蒙系統提出了基於同一套系統能力、適配多種終端形態的分佈式理念，能夠支持多種終端設備。
本書共 6 章，從鴻蒙系統、技術特徵等相關基礎知識開始介紹，通過新建項目，一步步地講解使用 JavaScript 設計頁面的方法、頁面跳轉功能的實現，內容由易到難。本書還巧用圍棋應用開發的全過程，幫助讀者記憶與理解使用 JavaScript 開發應用的方法與相關知識。
本書適合對鴻蒙應用開發感興趣的初學者閱讀。
作者簡介
程晨，科技作家，自由创客。编著翻译出版人工智能、物联网、开源鸿蒙、3D打印、机器人领域相关图书数十余本，《无线电》《爱上机器人》杂志特约作者。致力于推广信息科技教育的普及，在十多个国家开展过科创教育活动。荣获2015年Intel软件创新大使，2017年ELF全球杰出教育人才，2019年Arduino官方认证推广大使，2022年开放原子基金会开源大使，2023年中小学STEAM教育大会年度创客教育创新人物。
目錄大綱
第 1 章 準備工作
1.1 鴻蒙系統的發展歷史 ……………………………………………………………………………1
1.1.1 鴻蒙系統的介紹 ……………………………………………………………………………………… 1
1.1.2 鴻蒙系統發展歷程 …………………………………………………………………………………… 1
1.2 技術特徵 …………………………………………………………………………………………2
1.2.1 分佈式軟總線 ………………………………………………………………………………………… 2
1.2.2 分佈式設備虛擬化 …………………………………………………………………………………… 3
1.2.3 分佈式數據管理 ……………………………………………………………………………………… 3
1.2.4 分佈式任務調度 ……………………………………………………………………………………… 4
1.2.5 一次開發，多端部署 ………………………………………………………………………………… 4
1.2.6 彈性部署 ……………………………………………………………………………………………… 5
1.3 技術框架 …………………………………………………………………………………………5
1.3.1 內核層 ………………………………………………………………………………………………… 5
1.3.2 系統服務層 …………………………………………………………………………………………… 6
1.3.3 框架層 ………………………………………………………………………………………………… 6
1.3.4 應用層 ………………………………………………………………………………………………… 6
1.4 安裝開發環境 ……………………………………………………………………………………7
1.4.1 下載DevEco Studio ………………………………………………………………………………… 7
1.4.2 安裝DevEco Studio …………………………………………………………………………………10
1.4.3 配置DevEco Studio …………………………………………………………………………………12
第 2 章 牛刀小試
2.1 創建項目 ……………………………………………………………………………………… 14
2.1.1 創建新項目 ……………………………………………………………………………………………14
2.1.2 導入模板 ………………………………………………………………………………………………16
2.2 項目預覽 ……………………………………………………………………………………… 16
2.2.1 打開預覽窗口 …………………………………………………………………………………………16
2.2.2 切換設備 ………………………………………………………………………………………………17
2.3 項目分析 ……………………………………………………………………………………… 20
2.3.1 應用工程結構 …………………………………………………………………………………………20
2.3.2 目錄中的 js………………………………………………………………………………………………21
2.3.3 顯示內容的修改 ………………………………………………………………………………………21
2.3.4 組件 ……………………………………………………………………………………………………28
第 3 章 頁面設計
3.1 CSS基礎……………………………………………………………………………………… 29
3.1.1 什麽是CSS ……………………………………………………………………………………………29
3.1.2 CSS語法規則 …………………………………………………………………………………………29
3.1.3 選擇器 …………………………………………………………………………………………………30
3.1.4 選擇器優先級 …………………………………………………………………………………………33
3.2 盒子模型 ……………………………………………………………………………………… 33
3.2.1 什麽是盒子模型 ………………………………………………………………………………………33
3.2.2 盒子的寬度和高度 ……………………………………………………………………………………35
3.2.3 填充和邊沿屬性 ………………………………………………………………………………………36
3.2.4 盒體屬性 ………………………………………………………………………………………………38
3.3 定位 …………………………………………………………………………………………… 40
3.3.1 相對定位 ………………………………………………………………………………………………40
3.3.2 固定定位 ………………………………………………………………………………………………41
3.3.3 絕對定位 ………………………………………………………………………………………………42
3.4 顯示與佈局 …………………………………………………………………………………… 43
3.4.1 flex-direction …………………………………………………………………………………………43
3.4.2 flex-wrap ……………………………………………………………………………………………43
3.4.3 justify-content ………………………………………………………………………………………43
3.4.4 align-items ……………………………………………………………………………………………45
3.4.5 align-content …………………………………………………………………………………………47
3.4.6 隱藏 ……………………………………………………………………………………………………47
3.5 背景 …………………………………………………………………………………………… 47
3.5.1 背景顏色 ………………………………………………………………………………………………47
3.5.2 背景圖像 ………………………………………………………………………………………………47
3.6 文本和字體 …………………………………………………………………………………… 49
3.6.1 字體屬性 ………………………………………………………………………………………………49
3.6.2 文本屬性 ………………………………………………………………………………………………49
第 4 章 頁面跳轉
4.1 創建新頁面 …………………………………………………………………………………… 51
4.1.1 添加頁面 ………………………………………………………………………………………………51
4.1.2 新頁面的 .hml文件 ……………………………………………………………………………………53
4.1.3 新頁面的 .css文件 ……………………………………………………………………………………55
4.2 添加按鈕 ……………………………………………………………………………………… 56
4.2.1 在 .hml文件中添加按鈕 ………………………………………………………………………………56
4.2.2 調整按鈕位置及樣式 …………………………………………………………………………………57
4.3 頁面路由 ……………………………………………………………………………………… 58
4.3.1 配置文件 config.json …………………………………………………………………………………58
4.3.2 修改 .hml文件 …………………………………………………………………………………………59
4.3.3 修改 .js文件 ……………………………………………………………………………………………59
4.3.4 在控制台輸出信息 ……………………………………………………………………………………60
4.4 配置文件詳解 ………………………………………………………………………………… 62
4.4.1 “app”部分 ……………………………………………………………………………………………63
4.4.2 “deviceConfig”部分…………………………………………………………………………………63
4.4.3 “module”部分 ………………………………………………………………………………………65
第 5 章 在畫布中繪制圖形
5.1 canvas元素 ………………………………………………………………………………… 70
5.1.1 修改 .hml文件 …………………………………………………………………………………………70
5.1.2 修改 .css文件 …………………………………………………………………………………………71
5.2 繪制方形 ……………………………………………………………………………………… 72
5.2.1 創建畫布對象 …………………………………………………………………………………………72
5.2.2 繪制方塊 ………………………………………………………………………………………………72
5.2.3 繪制方框 ………………………………………………………………………………………………74
5.2.4 繪制國際象棋棋盤 ……………………………………………………………………………………76
5.3 繪制線段與弧線 ……………………………………………………………………………… 82
5.3.1 繪制線段 ………………………………………………………………………………………………83
5.3.2 填充路徑 ………………………………………………………………………………………………84
5.3.3 繪制弧線 ………………………………………………………………………………………………84
5.3.4 繪制圍棋棋盤 …………………………………………………………………………………………86
5.4 彈球動畫 ……………………………………………………………………………………… 92
5.4.1 對象 ……………………………………………………………………………………………………92
5.4.2 對象的方法 ……………………………………………………………………………………………92
5.4.3 定時功能 ………………………………………………………………………………………………93
5.4.4 邊界判斷 ………………………………………………………………………………………………96
第 6 章 圍棋定式助記應用
6.1 項目功能描述 ………………………………………………………………………………… 97
6.1.1 定式選擇 ………………………………………………………………………………………………97
6.1.2 定式展示 ………………………………………………………………………………………………98
6.2 定式選擇頁面佈局 …………………………………………………………………………… 99
6.2.1 創建新項目 ……………………………………………………………………………………………99
6.2.2 頁面佈局分析 ……………………………………………………………………………………… 100
6.2.3 頁面佈局規劃 ……………………………………………………………………………………… 103
6.3 定式選擇頁面功能實現 …………………………………………………………………… 110
6.3.1 繪制棋盤 …………………………………………………………………………………………… 110
6.3.2 顯示定式 …………………………………………………………………………………………… 111
6.3.3 頁面中顯示的文本 ………………………………………………………………………………… 115
6.4 定式展示頁面 ……………………………………………………………………………… 121
6.4.1 新建新頁面 ………………………………………………………………………………………… 121
6.4.2 頁面路由及傳遞參數 ……………………………………………………………………………… 123
6.4.3 逐步顯示棋子 ……………………………………………………………………………………… 125
6.4.4 重置按鈕 …………………………………………………………………………………………… 127
