网站导航
> 文档中心 > 前端(HarmonyOS)第1周学习笔记总结

前端(HarmonyOS)第1周学习笔记总结

网友: 文档中心 2022-05-06 14:33:48

（1）应用开发目录介绍

JS FA 应用的 JS 模块 (entry/src/main/js/module) 的典型开发目录结构如下：

目录结构中文件分类如下：

  • .hml 结尾的 HML 模板文件，这个文件用来描述当前页面的文件布局结构。
  • .css 结尾的 CSS 样式文件，这个文件用于描述页面样式。
  • .js 结尾的 JS 文件，这个文件用于处理页面和用户的交互。

各个文件夹的作用：

  • app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。
  • pages 目录用于存放所有组件页面。
  • common 目录用于存放公共资源文件，比如：媒体资源和 JS 文件。
  • i18n 目录用于配置不同语言场景资源内容，比如：应用文本词条，图片路径等资源，注意 i18n 是开发保留文件夹，不可重命名。

（2）文件使用规则

  1.  文件访问规则

    应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以 "/" 开头，相对路径以 "./" 或 "../" ，具体访问规则如下：

  • 引用代码文件，需使用相对路径，比如：../common/utils.js。

  • 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。

  • 公共代码文件和资源文件推荐放在 common 下，通过以上两条规则进行访问。

  • CSS 样式文件中通过 url() 函数创建 数据类型，如：url(/common/xxx.png)。

  • 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。

  • 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。

2. 媒体文件格式

格式 支持版本 支持的文件类型
BMP API Version 3+ .bmp
JPEG API Version 3+ .jpg
PNG API Version 3+ .png

3. app.js 标签中包含了实例名称、页面路由信息。

标签 类型 默认值 必填 描述
name string default 是 标识JS实例的名字。
pages Array - 是 路由信息，详见“pages”。

name、pages 标签配置需在配置文件中的 js 标签中完成设置。pages 定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：

{  ...  "pages": [    "pages/index/index",    "pages/detail/detail"  ]  ...}

说明

  • 应用首页固定为 "pages/index/index"。
  • 页面文件名不能使用组件名称，比如：text.hml、button.hml 等。

4. 每个应用可以在 app.js 自定义应用级生命周期的实现逻辑，包括：

  • onCreate：在应用生成时被调用的生命周期函数。
  • onDestory：在应用销毁时被调用的生命周期函数。

（3）鸿蒙系统组件介绍

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

  2. 鸿蒙 JS API 提供了完善的组件介绍，详细情况我们去查阅一下官方文档： 组件 - 官方介绍

  3. 根据组件的功能，可以分为以下四大类：

组件类型 主要组件
基础组件 text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart
容器组件 div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog
媒体组件 video
画布组件 canvas

（2）chart 组件体验使用

鸿蒙系统组件相较于其他前端组件仓库，给咱们专门封装了一个 chart 组件，图表组件，用于呈现线形图、柱状图、量规图界面。

官方文档地址

使用 chart 组件进行体验，具体执行步骤如下：

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

  1. 预览页面时，务必要注意打开当前需要预览的页面文件夹下 hml、css、js 任意一个文件。
  2. 切换页面进行预览，不需要重新启动预览器，直接点击右上角刷新按钮即可，出现错误提示。

  1. pages.chart 文件夹下面的 hml、css、js 文件必须命名为 index，否则的话会出现预览错误。
  2. 出现预览错误修改后，刷新无效，必须重新启动预览器才能正常显示，点击右侧收起再展开即可。

  1. 图片路径引用失败不会出现文件查找失败错误提示，建议使用绝对路径进行文件路径编码，官方文档介绍在输出 hap 文件后，真机会因为 webpack 打包解析出现找不到文件的问题，不过模拟器是正常的。

    PS：小窍门，绝对路径输入没有路径自动补全提示，可以使用「相对路径」选择到对应的文件，然后，在去掉前面的相对路径引入。

    当然，如果在同一个文件夹内部，官方文档介绍使用相对路径不会出现 webpack 打包解析找不到文件的问题，所以，在同一个文件夹内部引用，使用相对路径即可。

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

  1. 使用模拟器进行模拟的时候，编辑器工具会自动打包输出 hap 文件，模拟器直接加载运行该文件，模拟器不支持热更新，预览器预览会输出编译后文件，支持热更新，也支持多设备同时预览
  2. .调整 chart 组件的相关参数，需要注意 xAxis 的 axisTick 参数设置过小，会出现数据丢失情况。

（4）动画播放（使用截图工具，盒子大小固定）

（5）多终端页面设计规则

  1. JS UI 框架页面样式，系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。

  2. JS UI框架中手机和智慧屏中的 px 指逻辑像素，px 是根据实际屏幕宽度物理像素进行缩放计算的。例如当width 设为 100px 时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。

  3. 需要注意的地方有：

    • 在 TV 上有一个黑色的背景，需要针对性的调整对应的 CSS 样式，颜色需要重点处理反转。
    • 穿戴设备是一个圆形的表盘，需要针对圆形容器特征专门设计对应的样式

  4. 媒体查询

    媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：

    • 针对设备和应用的属性信息，可以设计出相匹配的布局样式。

    • 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。

    使用 @media 来引入查询语句，对媒体功能和媒体类型进行判断，

  5. 我们常用类型来进行判断，按照 phone、tv、wearable 顺序输出不同响应式的页面布局
  6. @media screen and (device-type: phone)  {}@media screen and (device-type: tv)  {}@media screen and (device-type: wearable)  {}

网络标签：

相关问题