鸿蒙应用开发入门 华为鸿蒙应用开发环境搭建与JS基础开发教程

华为鸿蒙系统（HarmonyOS）作为一款面向全场景的分布式操作系统，正吸引着越来越多的开发者加入其应用生态建设。对于初学者而言，掌握鸿蒙应用开发的基础知识和环境搭建是迈向成功的第一步。本文将以JavaScript（JS）为主要开发语言，为您提供一份详实的鸿蒙应用开发入门指南。

一、鸿蒙应用开发概述

鸿蒙应用开发主要支持两种语言：Java和JavaScript。对于Web前端开发者或新手而言，使用JavaScript进行开发门槛较低，更容易上手。鸿蒙的JS框架提供了一套类Web的开发范式，开发者可以通过熟悉的HTML/CSS/JS技术栈来构建应用的UI界面和基础逻辑。

二、开发环境搭建

这是开启鸿蒙应用开发之旅的首要步骤。

1. 安装Node.js
鸿蒙的JS开发工具链依赖于Node.js，请确保您的电脑已安装Node.js（建议版本12.0.0及以上）。您可以从Node.js官网下载并安装。

2. 下载并安装DevEco Studio
DevEco Studio是华为官方推出的鸿蒙应用集成开发环境（IDE），基于IntelliJ IDEA Community开源版本打造。

• 下载地址：访问华为开发者联盟官网，在“开发”板块找到HarmonyOS专区，即可下载对应操作系统的DevEco Studio安装包。

• 安装流程：运行安装包，基本按照向导提示“下一步”即可。安装过程中，请务必勾选安装HarmonyOS SDK。

3. 配置SDK和工具
首次启动DevEco Studio后，IDE会引导您进行SDK和工具的配置。

• 选择SDK存储路径。

• 在SDK管理界面，确保安装了必要的SDK版本（如API Version 5+）和JS Toolchains（JS工具链）。

• 如果需要使用模拟器，还需下载并安装对应的本地模拟器资源包。

三、创建第一个JS鸿蒙应用

环境配置完成后，让我们创建一个简单的“Hello World”应用。

1. 新建项目：打开DevEco Studio，点击“Create HarmonyOS Project”。
2. 选择模板：在项目模板中，选择“Empty Ability (JS)”，点击“Next”。
3. 配置项目：填写项目名称（如MyFirstApp）、项目存储路径，选择项目类型为“Application”，UI语法选择“JS”，设备类型按需选择（如Phone），并选择兼容的API版本，最后点击“Finish”。
4. 项目结构解析：项目创建成功后，主要目录结构如下：

• entry: 应用的主模块。

• src > main > js > default: 存放JS代码的核心目录。

• pages/index: 应用的首页。这里包含index.js（页面逻辑）、index.css（页面样式）和index.hml（页面结构，类HTML）。

• src > main > config.json: 应用的全局配置文件，声明权限、应用信息、设备支持等。

• build-profile.json5: 模块的编译构建配置。

5. 编写代码：打开index.hml文件，您会看到类似HTML的代码。我们可以稍作修改：
`html

`
打开index.js文件，添加按钮的点击响应函数：
`javascript
// index.js
export default {
data: {
// 可以定义数据
},
clickAction() {
// 弹出提示框
prompt.showToast({
message: '欢迎来到鸿蒙世界！'
});
}
}
`
您也可以在index.css中为title类添加一些样式，例如改变字体颜色和大小。

1. 预览与运行

• 预览器（Previewer）：在编辑窗口右侧，可以打开预览器，实时查看UI效果。这是开发UI时非常高效的工具。

• 运行到模拟器或真机：

• 模拟器：在DevEco Studio的“Tools > Device Manager”中创建并启动一个手机模拟器。然后在工具栏选择该模拟器，点击绿色的运行按钮。

• 真机：需要将手机开启“开发者模式”并通过USB连接电脑，在IDE中选择您的设备后运行。首次真机运行需要为项目签名（IDE会引导生成临时签名）。

四、基础概念与核心能力

1. Ability：鸿蒙应用的基本组成单元，分为两种主要类型：

• Page Ability（FA）：提供用户交互界面，我们创建的页面就属于此类。

• Service Ability（PA）：在后台运行，提供计算或数据处理能力，无UI界面。

1. HML、CSS、JS的协作：

• HML：用于描述页面结构，支持类似HTML的标签（如<div>, <text>, <image>），并通过{{}}语法进行数据绑定。

• CSS：用于描述页面样式，语法与Web CSS高度相似，同时鸿蒙扩展了一些系统能力。

• JS：用于处理页面逻辑、用户交互、数据请求等。

1. 组件与事件：鸿蒙提供了丰富的内置UI组件（如按钮、列表、输入框等），每个组件都有其属性和事件（如onclick）。通过JS中定义的方法来响应这些事件。

五、下一步学习建议

• 深入学习官方文档：华为开发者官网的HarmonyOS应用开发文档是最权威、最全面的学习资料。
• 研究示例代码：DevEco Studio内置了大量的Sample工程，通过阅读和运行这些代码可以快速学习各种组件的用法和API的调用。
• 理解分布式特性：尝试学习如何开发跨设备协同的应用，这是鸿蒙系统的核心优势之一。
• 关注社区：加入华为开发者社区、相关技术论坛，与其他开发者交流经验，解决问题。

###

通过完成开发环境搭建、创建第一个JS应用，您已经成功踏入了鸿蒙应用开发的大门。鸿蒙的JS开发方式对Web开发者非常友好，但其背后强大的分布式能力和原生性能优化则需要我们持续探索。保持实践，从简单的应用开始，逐步深入，您将能够构建出体验出色的全场景鸿蒙应用。