想了解更多關(guān)于開源的內(nèi)容，請訪問：

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

https://ost.51cto.com

前言

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

開發(fā)工具介紹

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

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

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

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

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

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

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

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

Tool 支持的是windows 與 Linux。

studio支持的是window與mac。

正當我以為我塵封許久的mac Air可以派上用場的時候…

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

安裝開發(fā)工具

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

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

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

下面就是等待安裝即可。

點擊Finish，完成安裝。

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

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

這個情況下我們可以點擊Setting中的Restore。

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

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

首先是Basic Setup。

需要添加Node.js 和 Ohpm。

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

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

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

node -v

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

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

還有一個需要注意的是，即將進行的安裝過程是通過npm給我們安裝的，npm的版本要求為6.14.16及以上。

可以通過以下命令查看npm的版本

npm -v

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

npm i npm@6.14.16 -g

SDK安裝。

我們先點擊Next，直接跳入下一頁。

選擇Accept即可。

Summary：

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

點擊Next等待他安裝即可。

報錯分享

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

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

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

npm view @babel/parser

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

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

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

下面是最終的解決方法：

切換源：

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

清理緩存：

npm cache clean --force

打開Setting中的SDK，選擇OpenHarmony，點擊Edit。

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

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

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

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

Hello,World

創(chuàng)建工程

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

運行工程

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

啟動我們的虛擬手機。

這個時候我們返回IDE，運行工程。

觀察我們的虛擬手機。

程序就在這里。

初次體驗這個虛擬手機，感覺還是挺有趣的。

結(jié)束語

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

想了解更多關(guān)于開源的內(nèi)容，請訪問：

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

https://ost.51cto.com