> 文档中心 > 鸿蒙应用开发第一次作业

鸿蒙应用开发第一次作业

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 参数设置过小,会出现数据丢失情况。

 

笑话娱乐网站