鸿蒙应用开发第一次作业

DevEco Studio开发环境搭建

1. JavaScript 项目开发依赖 Node.js 环境，下载链接：

   Node.js： Node.js

2. 鸿蒙系统专用 IDE 开发环境 「 DevEco Studio 」，下载链接：DevEco Studio： HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

 HelloWorld 应用体验

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 看到模拟器管理页面，这一步必须要实名认证的华为账号进行登录后，即可选择对应的设备，然后启动设备。

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

应用开发目录介绍

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

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

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

各个文件夹的作用：

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

文件使用规则

1. 文件访问规则

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

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

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

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

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

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

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

1. 媒体文件格式

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

1. 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 等。

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

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

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，否则的话会出现预览错误。

1. 出现预览错误修改后，刷新无效，必须重新启动预览器才能正常显示，点击右侧收起再展开即可。

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

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

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

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

1. 使用模拟器进行模拟的时候，编辑器工具会自动打包输出 hap 文件，模拟器直接加载运行该文件，模拟器不支持热更新，预览器预览会输出编译后文件，支持热更新，也支持多设备同时预览。

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