想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO 開源基礎(chǔ)軟件社區(qū)

https://ost.51cto.com

前言

本篇將開啟OpenHarmony北向探索，搭建開發(fā)環(huán)境，安裝SDK

開發(fā)工具介紹

既然是做開發(fā)，開發(fā)工具少不了，OpenHarmony和HarmonyOS的北向開發(fā)使用的是同一個(gè)工具：HUAWEI DevEco Studio 支持一站式的分布式應(yīng)用開發(fā)，支持分布式多段開發(fā)，分布式多段調(diào)試，多段模擬仿真。

作為一款開發(fā)工具，除了具有基本的代碼開發(fā)、編譯構(gòu)建及調(diào)測(cè)等功能外，DevEco Studio還具有如下特點(diǎn)：

• 高效智能代碼編輯：支持ArkTS、JS、C/C++等語(yǔ)言的代碼高亮、代碼智能補(bǔ)齊、代碼錯(cuò)誤檢查、代碼自動(dòng)跳轉(zhuǎn)、代碼格式化、代碼查找等功能，提升代碼編寫效率。
• 低代碼可視化開發(fā)：豐富的UI界面編輯能力，支持自由拖拽組件和可視化數(shù)據(jù)綁定，可快速預(yù)覽效果，所見即所得；同時(shí)支持卡片的零代碼開發(fā)，降低開發(fā)門檻和提升界面開發(fā)效率。
• 多端雙向?qū)崟r(shí)預(yù)覽：支持UI界面代碼的雙向預(yù)覽、實(shí)時(shí)預(yù)覽、動(dòng)態(tài)預(yù)覽、組件預(yù)覽以及多端設(shè)備預(yù)覽，便于快速查看代碼運(yùn)行效果。
• 多端設(shè)備模擬仿真：提供HarmonyOS本地模擬器，支持手機(jī)等設(shè)備的模擬仿真，便捷獲取調(diào)試環(huán)境。

總體看上去這個(gè)開發(fā)工具還是很不錯(cuò)的，看了這張圖，是不是又有很強(qiáng)烈的親切感，和IntelliJ IDEA不能說(shuō)很像，只能說(shuō)是一摸一樣，當(dāng)然現(xiàn)在IntelliJ IDEA推出了新的UI界面。其實(shí)DevEco Studio就是基于IntelliJ IDEA Community開源版本打造的，為運(yùn)行在HarmonyOS和OpenHarmony系統(tǒng)上的應(yīng)用和服務(wù)一站式開發(fā)平臺(tái)。

應(yīng)用開發(fā)流程

應(yīng)用開發(fā)流程一般分為以下四個(gè)步驟，本篇接下來(lái)會(huì)具體演示開發(fā)準(zhǔn)備這一環(huán)節(jié)。

搭建開發(fā)環(huán)境流程

和我們南向開發(fā)使用到的DevEco Device Tool 再系統(tǒng)的支持上面有所不同。

Tool 支持的是windows 與 Linux。

studio支持的是window與mac。

正當(dāng)我以為我塵封許久的mac Air可以派上用場(chǎng)的時(shí)候…

好吧，大概是真的塵封久了，不太愿意為我服務(wù)，所以大家得勤勞一些，總不會(huì)有什么壞處。回歸正題，下面我們就來(lái)在Windows系統(tǒng)上搭建我們的開發(fā)環(huán)境。具體的流程如下：

安裝開發(fā)工具

官網(wǎng)鏈接：HUAWEI DevEco Studio Download。

根據(jù)你的系統(tǒng)及芯片架構(gòu)選擇對(duì)應(yīng)的開發(fā)工具，點(diǎn)擊Download。

打開下載完成的程序，下面就是一些基本的安裝軟件流程。

下面就是等待安裝即可。

點(diǎn)擊Finish，完成安裝。

打開軟件，就開始到了我們環(huán)境的搭建。

如果你這個(gè)時(shí)候不小心關(guān)閉了這個(gè)界面，你就會(huì)直接跳過(guò)環(huán)境的搭建，并且在之后打開開發(fā)環(huán)境都不會(huì)出現(xiàn)環(huán)境搭建的界面。

這個(gè)情況下我們可以點(diǎn)擊Setting中的Restore。

點(diǎn)擊ReStore and Restart 后關(guān)閉開發(fā)工具，自己再手動(dòng)打開就發(fā)現(xiàn)，環(huán)境搭建的界面又出現(xiàn)了。

配置開發(fā)環(huán)境

首先是Basic Setup。

需要添加Node.js 和 Ohpm。

Node.js應(yīng)該不陌生，比如說(shuō)在前端開發(fā)Vue框架的使用中就需要先預(yù)裝Node.js。

比較尷尬的就是，如果你當(dāng)時(shí)裝過(guò)，且是在官網(wǎng)裝的，很可能裝的就是18.16.0這個(gè)長(zhǎng)期支持版本。而我們這個(gè)開發(fā)工具支持的Node.js 必須是v14.19.1及以上，且低于v17.0.0。

如果你忘了你的電腦Node.js版本或者不記得裝沒(méi)裝了，可以打開終端輸入以下命令進(jìn)行查看。

node -v

我裝的版本顯然就過(guò)高了，所以需要重新裝，如果你的Node.js裝的比較早，版本剛好符合要求，就可以直接把Node.js所在目錄引用上去。

ohmp的話是一個(gè)包管理器，類似于npm。如果是首次接觸鴻蒙的話，應(yīng)該是沒(méi)裝過(guò)的。

還有一個(gè)需要注意的是，即將進(jìn)行的安裝過(guò)程是通過(guò)npm給我們安裝的，npm的版本要求為6.14.16及以上。

可以通過(guò)以下命令查看npm的版本

npm -v

也可以用以下命令安裝指定版本的npm。

npm i npm@6.14.16 -g

SDK安裝。

我們先點(diǎn)擊Next，直接跳入下一頁(yè)。

選擇Accept即可。

Summary：

這是一個(gè)總結(jié)，你可以看到所有你需要安裝的環(huán)境。

點(diǎn)擊Next等待他安裝即可。

報(bào)錯(cuò)分享

在安裝的過(guò)程中也難免會(huì)出些意外，比如我出現(xiàn)了ArkTS安裝的錯(cuò)誤，也導(dǎo)致后面的SDK都沒(méi)有進(jìn)行安裝，整個(gè)配置流程都中斷了，還是挺頭疼的。

其中報(bào)錯(cuò)信息指出，沒(méi)有找到指定版本的@babel/parser v7.22.5，這個(gè)就是npm源的問(wèn)題，我也在網(wǎng)上查詢了相關(guān)的SDK安裝失敗的問(wèn)題，大部分都是網(wǎng)絡(luò)代理問(wèn)題，包括官網(wǎng)也給出了JS SDK的解決方案：環(huán)境準(zhǔn)備-DevEco Studio常見問(wèn)題-常見問(wèn)題-HarmonyOS應(yīng)用開發(fā) 我這個(gè)恰好也不屬于網(wǎng)絡(luò)問(wèn)題。最多就是給npm換源吧，我想著用用華為的，我其實(shí)一開始也不知道，IDE好像自帶的華為源。

所以我既便手動(dòng)換了，但是這個(gè)問(wèn)題還是搞不定。我用了命令去查詢了一下這個(gè)@babel/parser，發(fā)現(xiàn)他的最新版本只有7.22.3。

npm view @babel/parser

但是npm官網(wǎng)中，的確存在v7.22.5的這個(gè)版本。這個(gè)可能就是華為官方的鏡像源沒(méi)有更新了。

我索性就把鏡像源的配置文件給刪掉了，用了npm官方自己的源，也是成功看到了V7.22.5的存在，并且下載了下來(lái)。

最后，換回了npm的官方源，ArkTS的sdk也解決了。后面所有的SDK安裝也迎刃而解了。

下面是最終的解決方法：

切換源：

npm config set registry https://registry.npmjs.org/

清理緩存：

npm cache clean --force

打開Setting中的SDK，選擇OpenHarmony，點(diǎn)擊Edit。

最后完成SDK后，我們來(lái)檢測(cè)一下環(huán)境的搭建。

診斷開發(fā)環(huán)境

DevEco Studio也自帶基礎(chǔ)環(huán)境檢測(cè)功能。

至此我們開發(fā)環(huán)境的搭建就完成了。

Hello,World

創(chuàng)建工程

熟悉的UI，回想起了剛剛學(xué)習(xí)JAVA的那個(gè)時(shí)候…

運(yùn)行工程

我們先使用虛擬機(jī)，設(shè)置一下運(yùn)行的Devices。

啟動(dòng)我們的虛擬手機(jī)。

這個(gè)時(shí)候我們返回IDE，運(yùn)行工程。

觀察我們的虛擬手機(jī)。

程序就在這里。

初次體驗(yàn)這個(gè)虛擬手機(jī)，感覺還是挺有趣的。

結(jié)束語(yǔ)

本篇介紹了環(huán)境的搭建，包括一個(gè)bug分享，一般家庭網(wǎng)絡(luò)中不會(huì)出現(xiàn)網(wǎng)絡(luò)上的bug，如果你也遇到了軟件包版本的問(wèn)題，希望能夠幫到大家。后面也會(huì)講解詳細(xì)的北向代碼，感謝支持！

想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO 開源基礎(chǔ)軟件社區(qū)

https://ost.51cto.com