工作室第1次HarmonyOS培训笔记
目录
一、目录结构中文件分类如下:
二、文件访问规则
三、组件的试例运用
四、image-animator图片帧动画播放器实现
五、数据渲染与事件绑定
一、目录结构中文件分类如下:
- .hml 结尾的 HML 模板文件,这个文件用来描述当前页面的文件布局结构。
- .css 结尾的 CSS 样式文件,这个文件用于描述页面样式。
- .js 结尾的 JS 文件,这个文件用于处理页面和用户的交互。
各个文件夹的作用:
- app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。
- pages 目录用于存放所有组件页面。
- common 目录用于存放公共资源文件,比如:媒体资源和 JS 文件。
- i18n 目录用于配置不同语言场景资源内容,比如:应用文本词条,图片路径等资源,注意 i18n 是开发保留文件夹,不可重命名。
二、文件访问规则
应用资源可通过绝对路径或相对路径的方式进行访问,本开发框架中绝对路径以 "/" 开头,相对路径以 "./" 或 "../" ,具体访问规则如下:
-
引用代码文件,需使用相对路径,比如:../common/utils.js。
-
引用资源文件,推荐使用绝对路径。比如:/common/xxx.png。
-
公共代码文件和资源文件推荐放在 common 下,通过以上两条规则进行访问。
三、组件的试例运用
鸿蒙系统组件相较于其他前端组件仓库,给咱们专门封装了一个 chart 组件,图表组件,用于呈现线形图、柱状图、量规图界面。
官方文档地址
使用 chart 组件进行体验,具体执行步骤如下:
- 创建 pages.chart 文件夹,包含 chart.hml、chart.js、chart.css 三个文件。
- 配置路由,在 config.json 这个文件里面
-
ES6 Model 数据文件 import 导入只能使用相对路径,不能使用绝对路径,使用绝对路径会报错。
四、image-animator图片帧动画播放器实现
-
创建一个新的 Ablity ,新起一个抽象能力的应用服务,不同的 Ablity 之间可以通过 PA 进行调用。
Ablity 是应用所具备能力的抽象,也是应用程序的重要组成部分。Ablity 由一个或多个 FA(Feature Ability)或 PA(Particle Ability)组成。其中,FA 有 UI 界面,提供与用户交互的能力;而 PA 无 UI 界面,提供后台运行任务的能力以及统一的数据访问抽象。
2、配置 Ability 对应的基础参数
3、打开 pages.index.index.hml 启动预览器,对页面进行预览,输出基础 "你好 世界" 页面。
五、数据渲染与事件绑定
1、第三方 JSON 数据导入,注意使用相对路径
2、数据绑定
与vue用法类似
hml {{ 变量名 }}
js 变量放在 data 中
3、列表渲染(for)
tid 属性指定数组中每个元素的唯一标识,默认值为 id,用于加速for循环的重渲染。
写法1(都不指定):
,$idx代表元素索引,$item代表数组元素
写法2(指定元素名称):
,$idx 代表元素索引,value 代表数组元素
写法3(指定索引和元素名称):
,index代表元素索引,value代表数组元素。
4、事件绑定
类似 v-on,在 js 中绑定的函数和 data 同级
hml:
或
js: 放在 data 后:
5、使用计算属性 computed 和 Vue 中的用法一样,依赖 data 中的数据进行计算,return 返回计算的结果。
PS:需要注意的是 Prview 预览模拟器在 MAC 上无法接收键盘输入的内容,但是在真机模拟器上是正常的。我们使用一个日期选择器来模拟输入,在鸿蒙 JS 系统上没有 双向数据绑定,需要我们自行实现双向数据绑定。