网站导航
> 文档中心 > harmonyos1

harmonyos1

网友: 文档中心 2022-06-17 17:05:08

OpenHarmony 整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开，在多设备部署场景下，支持根据实际需求裁剪某些非必要的组件，前端领域的发力点核心在于应用层「拓展应用、三方应用」构建服务。

1.1开发环境

（1）项目开发步骤

PS：在 Views 可以快速设置编辑器主题，以及对应的开发设置。

  • 第一步：启动应用后，提示是否创建启动程序脚本，方便后续模板选择。

  • 第二步：使用华为云 npm 包管理工具。

  • 第三步：创建 or 导入项目。

  • 第四步：选择项目类型及模板。

    为了满足应用在多设备上运行的开发需求，DevEco Studio 2.1 Release 在原有单设备工程模板的基础上，新增了 11 个跨设备工程模板。开发者可根据工程向导，依次挑选模板和设备类型，轻松创建跨设备工程，自动生成示例代码和相关资源。

  • 第五步：创建工程项目。

  • 第六步：查阅并关闭开发简易提示。

  • 第七步：项目自动下载对应的依赖及文件，这一步直接点击运行则会有错误提示。

  • 第八步：在 DevEco Studio 菜单栏，点击Tools > SDK Manager 配置对应的 SDK 版本。

  • 第九步：点击右上角 sign in 登陆华为账号，请输入已实名认证的华为帐号的用户名和密码进行登录，在网页中登陆成功后，完成授权。

  • 第十步：进入到 src/main/js/default/pages/index 页面，打开 view -> Tool Windows -> Previewer 进行预览。

  • 第十一步：进入 Tools -> Devices Manager 看到模拟器管理页面，这一步必须要实名认证的华为账号进行登录后，即可选择对应的设备，然后启动设备。

  • 第十二步：启动设备后，再次点击 绿色运行按钮，即可在仿真设备上运行该项目。

 1.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）

  1. 每个应用可以在 app.js 自定义应用级生命周期的实现逻辑，包括：
  • onCreate：在应用生成时被调用的生命周期函数。
  • onDestory：在应用销毁时被调用的生命周期函数。

1.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
画布组件 canva

1.4使用image-animator组件构建多帧动画

image-animator 图片帧动画播放器，多图帧动画的构建能力一直以来都是基于 Android 安卓系统使用 Java or C#语言进行开发的，而华为鸿蒙系统将「图片帧动画播放器」引入到了 JS 前端开发领域，这无疑是一次巨大的突破，这也代表着华为鸿蒙系统对其图片渲染能力的巨大自信。

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

    Ablity 是应用所具备能力的抽象，也是应用程序的重要组成部分。Ablity 由一个或多个 FA（Feature Ability）或 PA（Particle Ability）组成。其中，FA 有 UI 界面，提供与用户交互的能力；而 PA 无 UI 界面，提供后台运行任务的能力以及统一的数据访问抽象。

  2. 配置 Ability 对应的基础参数

  3. 打开 pages.index.index.hml 启动预览器，对页面进行预览，输出基础 "你好 世界" 页面。

  4. 在阿里图标库内下载 5 张心形图片，5 张图片需要注意对应不同的大小。

  5. 在 index.hml 文件中导入对应的页面结构代码

  6. 导入 css 样式文件

  7. 设置图片文件 data model 并 export 出来 common.datas.imgs.js

  8. 在 index.js 文件中导入图片模块，并写入相应逻辑，需要注意的是使用 $ref 获取到当前动画的节点对象。然后调用其对应的方法。

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

  10. 图片动画并未出现，为什么呢？因为图片的渲染机制是直接更改到对应的大小，所以，我们需要保证心形在图片中占有的位置，使用截图工具截图后，终于出现了心形跳动的结果。

1.5TODOlist应用构建

 （1）页面构建注意事项

  1. 页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。
  2. 文本内容放在标签中才能呈现，否则不会呈现文本内容。
  3. 可以直接调用 鸿蒙 JS 封装好的 组件，这里我们使用的是 switch 组件。

坏心知识社区

网络标签：

相关问题