> 文档中心 > OpenHarmony笔记-----------(一)

OpenHarmony笔记-----------(一)


1.DevEco Studio开发环境搭建

JavaScript 项目开发依赖 Node.js 环境,下载链接:

Node.js

鸿蒙系统专用 IDE 开发环境 「 DevEco Studio 」,下载链接:

 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

2.Hello Word 应用体验

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

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

  • 第三步:创建 或 导入项目。

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

    为了满足应用在多设备上运行的开发需求,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 看到模拟器管理页面,这一步必须要实名认证的华为账号进行登录后,即可选择对应的设备,然后启动设备。

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

ps:在 Views 可以快速设置编辑器主题,以及对应的开发设置 

3.JS 模块开发目录

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

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

各个文件夹的作用:

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

 4.组件

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

海量搞笑GIF动态图片