鴻蒙系統(tǒng)是一款面向未來、面向全場(chǎng)景的分布式操作系統(tǒng)。在傳統(tǒng)的單設(shè)備系統(tǒng)能力的基礎(chǔ)上，鴻蒙系統(tǒng)提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念，能夠支持多種終端設(shè)備。
本書共 6 章，從鴻蒙系統(tǒng)、技術(shù)特征等相關(guān)基礎(chǔ)知識(shí)開始介紹，通過新建項(xiàng)目，一步步地講解使用 JavaScript 設(shè)計(jì)頁(yè)面的方法、頁(yè)面跳轉(zhuǎn)功能的實(shí)現(xiàn)，內(nèi)容由易到難。本書還巧用圍棋應(yīng)用開發(fā)的全過程，幫助讀者記憶與理解使用 JavaScript 開發(fā)應(yīng)用的方法與相關(guān)知識(shí)。
本書適合對(duì)鴻蒙應(yīng)用開發(fā)感興趣的初學(xué)者閱讀。
（1）鴻蒙是當(dāng)前技術(shù)熱點(diǎn)。鴻蒙系統(tǒng)是我國(guó)自主研發(fā)一款基于微內(nèi)核的全場(chǎng)景分布式的操作系統(tǒng)，能滿足5G在未來應(yīng)用中的需求，將會(huì)得到重點(diǎn)發(fā)展。
（2）圖書特點(diǎn)：涵蓋鴻蒙系統(tǒng)相關(guān)基礎(chǔ)知識(shí)、JavaScript開發(fā)知識(shí)詳解，并巧用開發(fā)圍棋應(yīng)用的案例，幫助讀者記憶使用JavaScript開發(fā)系統(tǒng)的全過程及相關(guān)系統(tǒng)開發(fā)知識(shí)。
（3）目前市場(chǎng)上關(guān)于鴻蒙系統(tǒng)應(yīng)用開發(fā)的圖書還較少，開卷系統(tǒng)僅能跟蹤到5種。本書的策劃，有利于愛好者、相關(guān)從業(yè)者系統(tǒng)地了解鴻蒙系統(tǒng)并開發(fā)應(yīng)用。
（4）作者本身?yè)碛胸S富寫作經(jīng)驗(yàn)，編著、翻譯了幾十本圖書，且在創(chuàng)客圈有名望，擅長(zhǎng)進(jìn)行技術(shù)入門講解、知識(shí)普及，能夠幫助零基礎(chǔ)初學(xué)者快速入門。
程晨，科技作家，自由創(chuàng)客。編著翻譯出版人工智能、物聯(lián)網(wǎng)、開源鴻蒙、3D打印、機(jī)器人領(lǐng)域相關(guān)圖書數(shù)十余本，《無線電》《愛上機(jī)器人》雜志特約作者。致力于推廣信息科技教育的普及，在十多個(gè)國(guó)家開展過科創(chuàng)教育活動(dòng)。榮獲2015年Intel軟件創(chuàng)新大使，2017年ELF全球杰出教育人才，2019年Arduino官方認(rèn)證推廣大使，2022年開放原子基金會(huì)開源大使，2023年中小學(xué)STEAM教育大會(huì)年度創(chuàng)客教育創(chuàng)新人物。
第 1 章 準(zhǔn)備工作
1.1 鴻蒙系統(tǒng)的發(fā)展歷史 ……………………………………………………………………………1
1.1.1 鴻蒙系統(tǒng)的介紹 ……………………………………………………………………………………… 1
1.1.2 鴻蒙系統(tǒng)發(fā)展歷程 …………………………………………………………………………………… 1
1.2 技術(shù)特征 …………………………………………………………………………………………2
1.2.1 分布式軟總線 ………………………………………………………………………………………… 2
1.2.2 分布式設(shè)備虛擬化 …………………………………………………………………………………… 3
1.2.3 分布式數(shù)據(jù)管理 ……………………………………………………………………………………… 3
1.2.4 分布式任務(wù)調(diào)度 ……………………………………………………………………………………… 4
1.2.5 一次開發(fā)，多端部署 ………………………………………………………………………………… 4
1.2.6 彈性部署 ……………………………………………………………………………………………… 5
1.3 技術(shù)框架 …………………………………………………………………………………………5
1.3.1 內(nèi)核層 ………………………………………………………………………………………………… 5
1.3.2 系統(tǒng)服務(wù)層 …………………………………………………………………………………………… 6
1.3.3 框架層 ………………………………………………………………………………………………… 6
1.3.4 應(yīng)用層 ………………………………………………………………………………………………… 6
1.4 安裝開發(fā)環(huán)境 ……………………………………………………………………………………7
1.4.1 下載DevEco Studio ………………………………………………………………………………… 7
1.4.2 安裝DevEco Studio …………………………………………………………………………………10
1.4.3 配置DevEco Studio …………………………………………………………………………………12
第 2 章 牛刀小試
2.1 創(chuàng)建項(xiàng)目 ……………………………………………………………………………………… 14
2.1.1 創(chuàng)建新項(xiàng)目 ……………………………………………………………………………………………14
2.1.2 導(dǎo)入模板 ………………………………………………………………………………………………16
2.2 項(xiàng)目預(yù)覽 ……………………………………………………………………………………… 16
2.2.1 打開預(yù)覽窗口 …………………………………………………………………………………………16
2.2.2 切換設(shè)備 ………………………………………………………………………………………………17
2.3 項(xiàng)目分析 ……………………………………………………………………………………… 20
2.3.1 應(yīng)用工程結(jié)構(gòu) …………………………………………………………………………………………20
2.3.2 目錄中的 js………………………………………………………………………………………………21
2.3.3 顯示內(nèi)容的修改 ………………………………………………………………………………………21
2.3.4 組件 ……………………………………………………………………………………………………28
第 3 章 頁(yè)面設(shè)計(jì)
3.1 CSS基礎(chǔ)……………………………………………………………………………………… 29
3.1.1 什么是CSS ……………………………………………………………………………………………29
3.1.2 CSS語法規(guī)則 …………………………………………………………………………………………29
3.1.3 選擇器 …………………………………………………………………………………………………30
3.1.4 選擇器優(yōu)先級(jí) …………………………………………………………………………………………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 相對(duì)定位 ………………………………………………………………………………………………40
3.3.2 固定定位 ………………………………………………………………………………………………41
3.3.3 絕對(duì)定位 ………………………………………………………………………………………………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 章 頁(yè)面跳轉(zhuǎn)
4.1 創(chuàng)建新頁(yè)面 …………………………………………………………………………………… 51
4.1.1 添加頁(yè)面 ………………………………………………………………………………………………51
4.1.2 新頁(yè)面的 .hml文件 ……………………………………………………………………………………53
4.1.3 新頁(yè)面的 .css文件 ……………………………………………………………………………………55
4.2 添加按鈕 ……………………………………………………………………………………… 56
4.2.1 在 .hml文件中添加按鈕 ………………………………………………………………………………56
4.2.2 調(diào)整按鈕位置及樣式 …………………………………………………………………………………57
4.3 頁(yè)面路由 ……………………………………………………………………………………… 58
4.3.1 配置文件 config.json …………………………………………………………………………………58
4.3.2 修改 .hml文件 …………………………………………………………………………………………59
4.3.3 修改 .js文件 ……………………………………………………………………………………………59
4.3.4 在控制臺(tái)輸出信息 ……………………………………………………………………………………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 創(chuàng)建畫布對(duì)象 …………………………………………………………………………………………72
5.2.2 繪制方塊 ………………………………………………………………………………………………72
5.2.3 繪制方框 ………………………………………………………………………………………………74
5.2.4 繪制國(guó)際象棋棋盤 ……………………………………………………………………………………76
5.3 繪制線段與弧線 ……………………………………………………………………………… 82
5.3.1 繪制線段 ………………………………………………………………………………………………83
5.3.2 填充路徑 ………………………………………………………………………………………………84
5.3.3 繪制弧線 ………………………………………………………………………………………………84
5.3.4 繪制圍棋棋盤 …………………………………………………………………………………………86
5.4 彈球動(dòng)畫 ……………………………………………………………………………………… 92
5.4.1 對(duì)象 ……………………………………………………………………………………………………92
5.4.2 對(duì)象的方法 ……………………………………………………………………………………………92
5.4.3 定時(shí)功能 ………………………………………………………………………………………………93
5.4.4 邊界判斷 ………………………………………………………………………………………………96
第 6 章 圍棋定式助記應(yīng)用
6.1 項(xiàng)目功能描述 ………………………………………………………………………………… 97
6.1.1 定式選擇 ………………………………………………………………………………………………97
6.1.2 定式展示 ………………………………………………………………………………………………98
6.2 定式選擇頁(yè)面布局 …………………………………………………………………………… 99
6.2.1 創(chuàng)建新項(xiàng)目 ……………………………………………………………………………………………99
6.2.2 頁(yè)面布局分析 ……………………………………………………………………………………… 100
6.2.3 頁(yè)面布局規(guī)劃 ……………………………………………………………………………………… 103
6.3 定式選擇頁(yè)面功能實(shí)現(xiàn) …………………………………………………………………… 110
6.3.1 繪制棋盤 …………………………………………………………………………………………… 110
6.3.2 顯示定式 …………………………………………………………………………………………… 111
6.3.3 頁(yè)面中顯示的文本 ………………………………………………………………………………… 115
6.4 定式展示頁(yè)面 ……………………………………………………………………………… 121
6.4.1 新建新頁(yè)面 ………………………………………………………………………………………… 121
6.4.2 頁(yè)面路由及傳遞參數(shù) ……………………………………………………………………………… 123
6.4.3 逐步顯示棋子 ……………………………………………………………………………………… 125
6.4.4 重置按鈕 …………………………………………………………………………………………… 127
新書資訊