第 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 一次開(kāi)發(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 安裝開(kāi)發(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 打開(kāi)預(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語(yǔ)法規(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 章 在畫(huà)布中繪制圖形 5.1 canvas元素 ………………………………………………………………………………… 70 5.1.1 修改 .hml文件 …………………………………………………………………………………………70 5.1.2 修改 .css文件 …………………………………………………………………………………………71 5.2 繪制方形 ……………………………………………………………………………………… 72 5.2.1 創(chuàng)建畫(huà)布對(duì)象 …………………………………………………………………………………………72 5.2.2 繪制方塊 ………………………………………………………………………………………………72 5.2.3 繪制方框 ………………………………………………………………………………………………74 5.2.4 繪制國(guó)際象棋棋盤(pán) ……………………………………………………………………………………76 5.3 繪制線段與弧線 ……………………………………………………………………………… 82 5.3.1 繪制線段 ………………………………………………………………………………………………83 5.3.2 填充路徑 ………………………………………………………………………………………………84 5.3.3 繪制弧線 ………………………………………………………………………………………………84 5.3.4 繪制圍棋棋盤(pán) …………………………………………………………………………………………86 5.4 彈球動(dòng)畫(huà) ……………………………………………………………………………………… 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 繪制棋盤(pán) …………………………………………………………………………………………… 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