> 文档中心 > 工作室第1次HarmonyOS培训笔记

工作室第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 组件进行体验,具体执行步骤如下:

  1. 创建 pages.chart 文件夹,包含 chart.hml、chart.js、chart.css 三个文件。
  2. 配置路由,在 config.json 这个文件里面

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

四、image-animator图片帧动画播放器实现

  1. 创建一个新的 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 系统上没有 双向数据绑定,需要我们自行实现双向数据绑定。