包邮鸿蒙应用开发入门(修订版)

第 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