第 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)建項目 ……………………………………………………………………………………… 14 2.1.1 創(chuàng)建新項目 ……………………………………………………………………………………………14 2.1.2 導(dǎo)入模板 ………………………………………………………………………………………………16 2.2 項目預(yù)覽 ……………………………………………………………………………………… 16 2.2.1 打開預(yù)覽窗口 …………………………………………………………………………………………16 2.2.2 切換設(shè)備 ………………………………………………………………………………………………17 2.3 項目分析 ……………………………………………………………………………………… 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 章 頁面設(shè)計 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)先級 …………………………………………………………………………………………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 章 頁面跳轉(zhuǎn) 4.1 創(chuàng)建新頁面 …………………………………………………………………………………… 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 調(diào)整按鈕位置及樣式 …………………………………………………………………………………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 創(chuàng)建畫布對象 …………………………………………………………………………………………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 章 圍棋定式助記應(yīng)用 6.1 項目功能描述 ………………………………………………………………………………… 97 6.1.1 定式選擇 ………………………………………………………………………………………………97 6.1.2 定式展示 ………………………………………………………………………………………………98 6.2 定式選擇頁面布局 …………………………………………………………………………… 99 6.2.1 創(chuàng)建新項目 ……………………………………………………………………………………………99 6.2.2 頁面布局分析 ……………………………………………………………………………………… 100 6.2.3 頁面布局規(guī)劃 ……………………………………………………………………………………… 103 6.3 定式選擇頁面功能實現(xiàn) …………………………………………………………………… 110 6.3.1 繪制棋盤 …………………………………………………………………………………………… 110 6.3.2 顯示定式 …………………………………………………………………………………………… 111 6.3.3 頁面中顯示的文本 ………………………………………………………………………………… 115 6.4 定式展示頁面 ……………………………………………………………………………… 121 6.4.1 新建新頁面 ………………………………………………………………………………………… 121 6.4.2 頁面路由及傳遞參數(shù) ……………………………………………………………………………… 123 6.4.3 逐步顯示棋子 ……………………………………………………………………………………… 125 6.4.4 重置按鈕 …………………………………………………………………………………………… 127