鸿蒙应用开发入门（修订版）

鸿蒙系统是一款面向未来、面向全场景的分布式操作系统。在传统的单设备系统能力的基础上，鸿蒙系统提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持多种终端设备。 本书共 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