OpenHarmony JS 前端开发

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引用资源文件时必须使用绝对路径。

1. app.js 标签中包含了实例名称、页面路由信息。
2. 每个应用可以在 app.js 自定义应用级生命周期的实现逻辑，包括：onCreate：在应用生成时被调用的生命周期函数。onDestory：在应用销毁时被调用的生命周期函数。

3.基础组件介绍及chart组件使用

1. 每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。

2. 创建 pages.chart 文件夹，包含 chart.hml、chart.js、chart.css 三个文件。
3. 配置路由，在 config.json 这个文件里面。
4. 预览页面时，务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件。
5. 切换页面进行预览，不需要重新启动预览器，直接点击右上角刷新按钮即可，出现错误提示。
6. pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。
7. 绝对路径输入没有路径自动补全提示，可以使用「相对路径」选择到对应的文件，然后，在去掉前面的相对路径引入。

8. ES6 Model 数据文件 import 导入只能使用相对路径，不能使用绝对路径，使用绝对路径会报错。

9. 模拟器不支持热更新，预览器预览会输出编译后文件，支持热更新

10. 调整 chart 组件的相关参数，需要注意 xAxis 的 axisTick 参数设置过小，会出现数据丢失情况。

4.使用Image-animator组件进行多图帧图画的创建

创建一个新的 Ablity ，新起一个抽象能力的应用服务，不同的 Ablity 之间可以通过 PA 进行调用。

FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象

图片无法正常显示，相对路径无法查找到文件位置，是因为 index.js 引入模块后，相对路径发生了变化，修改对应的路径。

5.TodoList应用创建 

1. 页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。
2. 文本内容放在标签中才能呈现，否则不会呈现文本内容。
3. 可以直接调用鸿蒙 JS 封装好的 组件，这里我们使用的是 switch组件
4. 弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
5. 鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和我们传统的 CSS 写法有很大的差异
6. 第三方 JSON 数据导入，注意使用相对路径

7. 数据绑定，js 变量放在 data 中

8. tid 属性指定数组中每个元素的唯一标识，默认值为 id，用于加速for循环的重渲染。

9. index代表元素索引，value代表数组元素。

10. 事件绑定中，js放在data之后，js中的函数与data同级

11. 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接口使用

1. 导入鸿蒙系统 API 接口模块
2. 配置网络访问允许的权限列表

3. 使用 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引入到宿主页面

1. 事件绑定：自定义组件中绑定子组件事件使用 (on|@)child1 语法，子组件中通过 this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值，父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。

10.父子组件通信功能实现

  添加默认值，子组件可以通过固定值 default 设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下 props 属性必须为对象形式，不能用数组形式。

  数据单向性，父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将 props 传入的值用 data 接收后作为默认值，再对 data 的值进行修改。

    Props 自定义组件可以通过 props 声明属性，父组件通过设置属性向子组件传递参数 

父组件通过slot向子组件分发内容

子组件通过自定义事件改变父组件的状态

1. 子组件向上传递参数text，父组件接收时通过 e.detail 来获取参数。
2. 需要注意的是 父组件中自定义的事件名因为 hml 限制，对大小写不敏感，需要使用 - 进行拼接，但是，在子组件中调用则需要使用「驼峰式」进行 $emit 调用。

12.路由功能实现

在 Pages 文件夹下面新建一个文件夹代表需要的路由，当然，我们也可以新建一个 Ablity 体验

快捷方式，可以选择到对应的 Ability Pages 文件夹下面，然后 new page 直接添加页面，并会自动注册好路由，这是比较方便的 

1. router.push(OBJECT)，跳转到应用内的指定页面。
2. router.replace(OBJECT)，用应用内的某个页面替换当前页面，并销毁被替换的页面。
3. router.back(OBJECT)，返回上一页面或指定的页面。
4. router.clear()，清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
5. router.getLength()，获取当前在页面栈内的页面数量。
6. router.getState()，获取当前页面的状态信息。
7. 页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。