華為鴻蒙系統(tǒng)（HarmonyOS）作為一款面向全場(chǎng)景的分布式操作系統(tǒng)，正吸引著越來(lái)越多的開發(fā)者加入其應(yīng)用生態(tài)建設(shè)。對(duì)于初學(xué)者而言，掌握鴻蒙應(yīng)用開發(fā)的基礎(chǔ)知識(shí)和環(huán)境搭建是邁向成功的第一步。本文將以JavaScript（JS）為主要開發(fā)語(yǔ)言，為您提供一份詳實(shí)的鴻蒙應(yīng)用開發(fā)入門指南。
一、鴻蒙應(yīng)用開發(fā)概述
鴻蒙應(yīng)用開發(fā)主要支持兩種語(yǔ)言：Java和JavaScript。對(duì)于Web前端開發(fā)者或新手而言，使用JavaScript進(jìn)行開發(fā)門檻較低，更容易上手。鴻蒙的JS框架提供了一套類Web的開發(fā)范式，開發(fā)者可以通過(guò)熟悉的HTML/CSS/JS技術(shù)棧來(lái)構(gòu)建應(yīng)用的UI界面和基礎(chǔ)邏輯。
二、開發(fā)環(huán)境搭建
這是開啟鴻蒙應(yīng)用開發(fā)之旅的首要步驟。
1. 安裝Node.js
鴻蒙的JS開發(fā)工具鏈依賴于Node.js，請(qǐng)確保您的電腦已安裝Node.js（建議版本12.0.0及以上）。您可以從Node.js官網(wǎng)下載并安裝。
2. 下載并安裝DevEco Studio
DevEco Studio是華為官方推出的鴻蒙應(yīng)用集成開發(fā)環(huán)境（IDE），基于IntelliJ IDEA Community開源版本打造。
- 下載地址：訪問(wèn)華為開發(fā)者聯(lián)盟官網(wǎng)，在“開發(fā)”板塊找到HarmonyOS專區(qū)，即可下載對(duì)應(yīng)操作系統(tǒng)的DevEco Studio安裝包。
- 安裝流程：運(yùn)行安裝包，基本按照向?qū)崾尽跋乱徊健奔纯伞０惭b過(guò)程中，請(qǐng)務(wù)必勾選安裝HarmonyOS SDK。
3. 配置SDK和工具
首次啟動(dòng)DevEco Studio后，IDE會(huì)引導(dǎo)您進(jìn)行SDK和工具的配置。
- 選擇SDK存儲(chǔ)路徑。
- 在SDK管理界面，確保安裝了必要的SDK版本（如API Version 5+）和JS Toolchains（JS工具鏈）。
- 如果需要使用模擬器，還需下載并安裝對(duì)應(yīng)的本地模擬器資源包。
三、創(chuàng)建第一個(gè)JS鴻蒙應(yīng)用
環(huán)境配置完成后，讓我們創(chuàng)建一個(gè)簡(jiǎn)單的“Hello World”應(yīng)用。
- 新建項(xiàng)目：打開DevEco Studio，點(diǎn)擊“Create HarmonyOS Project”。
- 選擇模板：在項(xiàng)目模板中，選擇“Empty Ability (JS)”，點(diǎn)擊“Next”。
- 配置項(xiàng)目：填寫項(xiàng)目名稱（如
MyFirstApp）、項(xiàng)目存儲(chǔ)路徑，選擇項(xiàng)目類型為“Application”，UI語(yǔ)法選擇“JS”，設(shè)備類型按需選擇（如Phone），并選擇兼容的API版本，最后點(diǎn)擊“Finish”。 - 項(xiàng)目結(jié)構(gòu)解析：項(xiàng)目創(chuàng)建成功后，主要目錄結(jié)構(gòu)如下：
entry: 應(yīng)用的主模塊。
src > main > js > default: 存放JS代碼的核心目錄。
pages/index: 應(yīng)用的首頁(yè)。這里包含index.js（頁(yè)面邏輯）、index.css（頁(yè)面樣式）和index.hml（頁(yè)面結(jié)構(gòu)，類HTML）。
src > main > config.json: 應(yīng)用的全局配置文件，聲明權(quán)限、應(yīng)用信息、設(shè)備支持等。
build-profile.json5: 模塊的編譯構(gòu)建配置。
5. 編寫代碼：打開index.hml文件，您會(huì)看到類似HTML的代碼。我們可以稍作修改：
`html
{{ $t('strings.hello') }} 鴻蒙！
`打開
index.js文件，添加按鈕的點(diǎn)擊響應(yīng)函數(shù)：`javascript// index.js
export default {
data: {
// 可以定義數(shù)據(jù)
},
clickAction() {
// 彈出提示框
prompt.showToast({
message: '歡迎來(lái)到鴻蒙世界！'
});
}
}
`您也可以在
index.css中為title類添加一些樣式，例如改變字體顏色和大小。
- 預(yù)覽與運(yùn)行
- 預(yù)覽器（Previewer）：在編輯窗口右側(cè)，可以打開預(yù)覽器，實(shí)時(shí)查看UI效果。這是開發(fā)UI時(shí)非常高效的工具。
- 運(yùn)行到模擬器或真機(jī)：
- 模擬器：在DevEco Studio的“Tools > Device Manager”中創(chuàng)建并啟動(dòng)一個(gè)手機(jī)模擬器。然后在工具欄選擇該模擬器，點(diǎn)擊綠色的運(yùn)行按鈕。
- 真機(jī)：需要將手機(jī)開啟“開發(fā)者模式”并通過(guò)USB連接電腦，在IDE中選擇您的設(shè)備后運(yùn)行。首次真機(jī)運(yùn)行需要為項(xiàng)目簽名（IDE會(huì)引導(dǎo)生成臨時(shí)簽名）。
四、基礎(chǔ)概念與核心能力
- Ability：鴻蒙應(yīng)用的基本組成單元，分為兩種主要類型：
- Page Ability（FA）：提供用戶交互界面，我們創(chuàng)建的頁(yè)面就屬于此類。
- Service Ability（PA）：在后臺(tái)運(yùn)行，提供計(jì)算或數(shù)據(jù)處理能力，無(wú)UI界面。
- HML、CSS、JS的協(xié)作：
- HML：用于描述頁(yè)面結(jié)構(gòu)，支持類似HTML的標(biāo)簽（如
<div>,<text>,<image>），并通過(guò){{}}語(yǔ)法進(jìn)行數(shù)據(jù)綁定。
- CSS：用于描述頁(yè)面樣式，語(yǔ)法與Web CSS高度相似，同時(shí)鴻蒙擴(kuò)展了一些系統(tǒng)能力。
- JS：用于處理頁(yè)面邏輯、用戶交互、數(shù)據(jù)請(qǐng)求等。
- 組件與事件：鴻蒙提供了豐富的內(nèi)置UI組件（如按鈕、列表、輸入框等），每個(gè)組件都有其屬性和事件（如
onclick）。通過(guò)JS中定義的方法來(lái)響應(yīng)這些事件。
五、下一步學(xué)習(xí)建議
- 深入學(xué)習(xí)官方文檔：華為開發(fā)者官網(wǎng)的HarmonyOS應(yīng)用開發(fā)文檔是最權(quán)威、最全面的學(xué)習(xí)資料。
- 研究示例代碼：DevEco Studio內(nèi)置了大量的Sample工程，通過(guò)閱讀和運(yùn)行這些代碼可以快速學(xué)習(xí)各種組件的用法和API的調(diào)用。
- 理解分布式特性：嘗試學(xué)習(xí)如何開發(fā)跨設(shè)備協(xié)同的應(yīng)用，這是鴻蒙系統(tǒng)的核心優(yōu)勢(shì)之一。
- 關(guān)注社區(qū)：加入華為開發(fā)者社區(qū)、相關(guān)技術(shù)論壇，與其他開發(fā)者交流經(jīng)驗(yàn)，解決問(wèn)題。
###
通過(guò)完成開發(fā)環(huán)境搭建、創(chuàng)建第一個(gè)JS應(yīng)用，您已經(jīng)成功踏入了鴻蒙應(yīng)用開發(fā)的大門。鴻蒙的JS開發(fā)方式對(duì)Web開發(fā)者非常友好，但其背后強(qiáng)大的分布式能力和原生性能優(yōu)化則需要我們持續(xù)探索。保持實(shí)踐，從簡(jiǎn)單的應(yīng)用開始，逐步深入，您將能夠構(gòu)建出體驗(yàn)出色的全場(chǎng)景鴻蒙應(yīng)用。
