1.系统简介
OpenHarmony应用层介绍：应用由一个或多个 FA（Feature Ability）或 PA（Particle Ability）组成。其中，FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象。
2.开发环境搭建与HelloWorld体验
应用开发目录：common:用来存放图片和json基础数据，比如：媒体资源和 JS 文件。
components:自定义组件 i18n:多语言配置，比如：应用文本词条，图片路径等资源， i18n 是开发保留文件夹，不可重命名。
pages.index:页面 app.js:配置应用生命周期 config.json:配置路由权限
开发框架中绝对路径以 "/" 开头，相对路径以 "./" 或 "../"
引用代码文件，需使用相对路径，比如：../common/utils.js。
引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。
如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。
如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。
- app.js 标签中包含了实例名称、页面路由信息。
- 每个应用可以在 app.js 自定义应用级生命周期的实现逻辑，包括：onCreate：在应用生成时被调用的生命周期函数。onDestory：在应用销毁时被调用的生命周期函数。
3.基础组件介绍及chart组件使用
- 每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。
- 创建 pages.chart 文件夹，包含 chart.hml、chart.js、chart.css 三个文件。
- 配置路由，在 config.json 这个文件里面。
- 预览页面时，务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件。
- 切换页面进行预览，不需要重新启动预览器，直接点击右上角刷新按钮即可，出现错误提示。
- pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。
- 绝对路径输入没有路径自动补全提示，可以使用「相对路径」选择到对应的文件，然后，在去掉前面的相对路径引入。
- ES6 Model 数据文件 import 导入只能使用相对路径，不能使用绝对路径，使用绝对路径会报错。
- 模拟器不支持热更新，预览器预览会输出编译后文件，支持热更新
- 调整 chart 组件的相关参数，需要注意 xAxis 的 axisTick 参数设置过小，会出现数据丢失情况。
4.使用Image-animator组件进行多图帧图画的创建
创建一个新的 Ablity ，新起一个抽象能力的应用服务，不同的 Ablity 之间可以通过 PA 进行调用。
FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象
图片无法正常显示，相对路径无法查找到文件位置，是因为 index.js 引入模块后，相对路径发生了变化，修改对应的路径。
5.TodoList应用创建
- 页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。
- 文本内容放在
<text>标签中才能呈现，否则不会呈现文本内容。 - 可以直接调用鸿蒙 JS 封装好的 组件，这里我们使用的是 switch组件
- 弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
- 鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和我们传统的 CSS 写法有很大的差异
- 第三方 JSON 数据导入，注意使用相对路径
- 数据绑定，js 变量放在 data 中
- tid 属性指定数组中每个元素的唯一标识，默认值为 id，用于加速for循环的重渲染。
- index代表元素索引，value代表数组元素。
- 事件绑定中，js放在data之后，js中的函数与data同级
- Prview 预览模拟器在 MAC 上无法接收键盘输入的内容，但是在真机模拟器上是正常的。我们使用一个日期选择器来模拟输入，在鸿蒙 JS 系统上没有 双向数据绑定，需要我们自行实现双向数据绑定。
6.页面样式布局以及多终端运行TodoList
弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
JS UI框架中手机和智慧屏中的 px 指逻辑像素
使用 @media 来引入查询语句，对媒体功能和媒体类型进行判断
我们常用类型来进行判断，按照 phone、tv、wearable 顺序输出不同响应式的页面布局
7.接口功能简介及使用storage实现数据存储
应用层表示开发者使用JS UI框架开发的FA应用，这里的FA应用特指JS FA应用
前端框架层主要完成前端页面解析，以及提供MVVM（Model-View-ViewModel）开发模式、页面路由机制和自定义组件等能力。
引擎层主要提供动画解析、DOM（Document Object Model）树构建、布局计算、渲染命令构建与绘制、事件管理等能力。
适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台
Framwork API:应用上下文、日志打印、页面路由、弹窗、应用配置、定时器
利用API的数据存储能力实现应用刷新后的状态保存
8.网络 数据请求
a.fetch-API接口使用
- 导入鸿蒙系统 API 接口模块
- 配置网络访问允许的权限列表
- 使用
fetch.fetch(OBJECT)获取网络数据
b.config.json文件
应用的每个 HAP 的根目录下都存在一个「config.json」，config.json 由 app、deviceConfig和module三个部分组成，缺一不可。
配置文件「config.json」采用 JSON 文件格式，其中包含了一系列配置项，每个配置项由属性和值两部分构成：
每个属性的值为JSON的基本数据类型（数值、字符串、布尔值、数组、对象或者null类型
编辑 config.json 文件的方式，在 config.json 的编辑窗口中，可在右上角切换代码编辑视图或可视化编辑视图。
9.自定义组件使用
3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验
使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」
导入 tabbarItem 数据，并设置对应 data ，同时设置点击事件 动态设置点击对应 icon 选中
设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」
自定义组件通过element引入到宿主页面
- 事件绑定：自定义组件中绑定子组件事件使用 (on|@)child1 语法，子组件中通过 this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值，父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。
10.父子组件通信功能实现
添加默认值，子组件可以通过固定值 default 设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下 props 属性必须为对象形式，不能用数组形式。
数据单向性，父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将 props 传入的值用 data 接收后作为默认值，再对 data 的值进行修改。
Props 自定义组件可以通过 props 声明属性，父组件通过设置属性向子组件传递参数
父组件通过slot向子组件分发内容
子组件通过自定义事件改变父组件的状态
- 子组件向上传递参数text，父组件接收时通过 e.detail 来获取参数。
- 需要注意的是 父组件中自定义的事件名因为 hml 限制，对大小写不敏感，需要使用 - 进行拼接，但是，在子组件中调用则需要使用「驼峰式」进行 $emit 调用。
12.路由功能实现
在 Pages 文件夹下面新建一个文件夹代表需要的路由，当然，我们也可以新建一个 Ablity 体验
快捷方式，可以选择到对应的 Ability Pages 文件夹下面，然后 new page 直接添加页面，并会自动注册好路由，这是比较方便的
- router.push(OBJECT)，跳转到应用内的指定页面。
- router.replace(OBJECT)，用应用内的某个页面替换当前页面，并销毁被替换的页面。
- router.back(OBJECT)，返回上一页面或指定的页面。
- router.clear()，清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
- router.getLength()，获取当前在页面栈内的页面数量。
- router.getState()，获取当前页面的状态信息。
- 页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。
