2022 年 3 月 31 日發(fā)布了最新的 IDE 工具 DevEco Studio 3.0 Beta3，仔細閱讀文檔后發(fā)現(xiàn)最新 OpenHarmony 應用的編譯構(gòu)建過程已經(jīng)公開。

對應官方文檔：《編譯構(gòu)建概述》

复制https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-building-overview-0000001263360495

出于好奇，就對著文檔一步一步，一個文件一個文件的開始手動建立，最后編譯成功，分享一下構(gòu)建過程。

成果

如下圖：

工具準備

Node.js:v14.19.1+

最新 OpenHarmonySDK 包，并解壓到一個文件夾中，SDK下載地址：

复制https://gitee.com/link?target=https%3A%2F%2Frepo.huaweicloud.com%2Fharmonyos%2Fos%2F3.1-Release%2Fohos-sdk.tar.gz

SDK 目錄結(jié)構(gòu)：

复制|---ets
|---3.1.5.5
|+---api
|+---build-tools
||+---ets-loader
|---component
---toolchains
---3.1.5.5
+---configcheck
+---lib
---syscapcheck

在創(chuàng)建好該目錄結(jié)構(gòu)后還需要在 ets/js 下的 ./3.1.5.5/build-tools/ets-loader/ 目錄下執(zhí)行 npm install 命令。

創(chuàng)建工程

①創(chuàng)建工程目錄

為了演示我重新在E盤創(chuàng)建一個新的工程文件夾 BuildTest，然后借助 vscode 工具創(chuàng)建 build-profile.json5、hvigofile.js、package.json 這三個配置文件。

build-profile.json5：注意 SDK 版本及 srcPath 配置，簽名信息略想看相應配置參考上述官方文檔。

复制{
"app":{
"signingConfigs":[//工程的簽名信息，可包含多個簽名信息
],
"compileSdkVersion":8,//指定OpenHarmony應用/服務編譯時的SDK版本
"compatibleSdkVersion":8,//指定OpenHarmony應用/服務兼容的最低SDK版本
"products":[//定義構(gòu)建的產(chǎn)品品類，如通用默認版、付費版、免費版等
{
"name":"default",//定義產(chǎn)品的名稱，由開發(fā)者自定義
"signingConfig":"debug",//指定當前產(chǎn)品品類對應的簽名信息，簽名信息需要在signingConfigs中進行定義
}
]
},
"modules":[
{
"name":"entry",//模塊名稱
"srcPath":"./entry",//標明src目錄相對工程根目錄的相對路徑
"targets":[//定義構(gòu)建的產(chǎn)物，由product和各模塊定義的targets共同定義
{
"name":"default",//target名稱，由各個模塊的build-profile.json5中的targets字段定義
"applyToProducts":[//產(chǎn)品品類名稱，由products字段進行定義
"default"
]
}
]
}
]
}

hvigorfile.js：

复制module.exports=require('@ohos/hvigor-ohos-plugin').legacyAppTasks

package.json：熟悉 npm 框架的都應該了解，package.json 是 npm 依賴相的配置文件，我們看看在工程目錄下的配置項。

复制{
"name":"buildtest",//工程名稱
"version":"1.0.0",//版本
"ohos":{//ohos
"org":"huawei",
"buildTool":"hvigor",
"directoryLevel":"project"
},
"description":"exampledescription",
"repository":{},
"license":"ISC",
"dependencies":{//依賴項
"hypium":"^1.0.0",
"@ohos/hvigor":"1.0.6",
"@ohos/hvigor-ohos-plugin":"1.0.6"
}
}

配置完工程后，我們創(chuàng)建我們的第一個模塊 entry。

②創(chuàng)建模塊

在工程目錄創(chuàng)建文件夾 entry（于上述 build-profile.json5 的 module 配置的 srcPath 保持一致）。

并添加模塊配置文件：build-profile.json5、hvigorfile.js、package.json以及和 HarmonyOS 一樣的 src 模塊目錄。

build-profile.json5：此處省略了 Cpp 配置，Cpp 相關配置參考官方文檔。

复制{
"apiType":'faMode',//API類型，API8為FA模型，API9為Stage模型，不需要修改
"showInServiceCenter":true,//是否在服務中心露出
"buildOption":{
"arkEnable":true,//是否使用方舟編譯器進行編譯
},
"targets":[//模塊對應的產(chǎn)物配置
{
"name":"default",
}
]
}

hvigorfile.js：

复制module.exports=require('@ohos/hvigor-ohos-plugin').legacyHapTasks

大家來找茬，此處配置乍一看和工程下的 hvigorfile.js 一個樣，其實 require 引入的模塊卻不相同。

工程目錄是 legacyAppTasks，此處是 legacyHapTasks（工程是 AppTasks 模塊是 HapTasks）。我就因為此處配置問題浪費了十幾分鐘。

package.json：此處的 npm 配置文件則是模塊中引用第三方組件/插件配置處。

复制{
"license":"ISC",
"name":"entry",
"ohos":{
"org":"huawei",
"directoryLevel":"module",
"buildTool":"hvigor"
},
"description":"exampledescription",
"repository":{},
"version":"1.0.0",
"dependencies":{}
}

再在 src 目錄下建立 src/main/config.json、src/main/ets/app.ets、src/main/ets/pages/index.ets、src/resources/…等對應文件。此處省略，具體參考對應文件結(jié)構(gòu)及文件。

③構(gòu)建

添加 npm 源：必須先添加 HarmonyOS 的 npm 源，否則執(zhí)行 npm install 會報 404 錯誤。

复制npmconfigset@ohos:registry=https://repo.harmonyos.com/npm/

在工程目錄安裝依賴：在工程目錄（根目錄）下安裝依賴。

复制npminstall

執(zhí)行構(gòu)建命令：在工程目錄執(zhí)行構(gòu)建命令，構(gòu)建是通過 node.js 調(diào)用 hvigor 工具進行打包構(gòu)建，確保 node 已添加在系統(tǒng)環(huán)境變量中。

复制node./node_modules/@ohos/hvigor/bin/hvigor.js-mmoduleassembleHap

不出意外會出現(xiàn)以下錯誤：

复制PSE:BuildTest>node./node_modules/@ohos/hvigor/bin/hvigor.js-mmoduleassembleHap
>hvigorERROR:Aproblemoccurredinrootmodule:
ERROR:Cause:Cannotfindsdk.dirorOHOS_SDK_HOMEinSystemEnvironmentPath
atE:BuildTestlocal.properties:1:1
PSE:BuildTest>

以上原因是我們沒有配置 SDK 路徑。

處理方式為：在項目根路徑創(chuàng)建 local.properties 文件或者在系統(tǒng)環(huán)境變量中配置 OHOS_SDK_HOME，注意是系統(tǒng)環(huán)境變量不是用戶環(huán)境變量。

local.properties：

复制sdk.dir=//sdk所在文件夾
nodejs.dir=//nodejs所在文件夾

配置好后再重新執(zhí)行構(gòu)建命令就能看到我們構(gòu)建成功的結(jié)果了。

結(jié)語

做了這么多步驟，那么有什么實際意義尼？

①目前 OpenHarmony 和 HarmonyOS 在 UI 上是共通的，只是 API 上不同。那么就能將 HarmonyOS 的 UI 直接拿到 Openharmony 上使用，直接打包構(gòu)建 OpenHarmony 的 HAP。

②再加工一下可以像 vue-cli 那樣直接創(chuàng)建出項目目錄，如果能再實現(xiàn) preview 功能，就可以實現(xiàn)無需依賴 IDE 就能開發(fā)打包 HAP。

③有機會自己自定義一個 IDE 出來，將上述過程黑盒化，想自己做 IDE 的朋友這一步肯定不能少。