無需DevEco Studio就能編譯OHOS應用
在2022年3月31日發布了最新的IDE工具DevEco Studio 3.0 Beta3,仔細閱讀文檔后發現最新OpenHarmony應用的編譯構建過程已經公開,對應官方文檔:編譯構建概述
出于好奇,就對著文檔一步一步,一個文件一個文件的開始手動建立,最后編譯成功,分享一下構建過程。
成果
工具準備
Node.js:v14.19.1+
最新OpenHarmonySDK包,并解壓到一個文件夾中,??SDK下載地址??。
SDK目錄結構。
|---ets
| \---3.1.5.5
| +---api
| +---build-tools
| | +---ets-loader
| \---component
\---toolchains
\---3.1.5.5
+---configcheck
+---lib
\---syscapcheck
在創建好該目錄結構后還需要在ets/js下的./3.1.5.5/build-tools/ets-loader/目錄下執行npm install命令
創建工程
1、創建工程目錄
為了演示我重新在E盤創建一個新的工程文件夾 BuildTest,然后借助vscode工具創建build-profile.json5、hvigofile.js、package.json這三個配置文件。
build-profile.json5:
注意SDK版本及srcPath配置,簽名信息略想看相應配置參考上述官方文檔。
{
"app": {
"signingConfigs": [ //工程的簽名信息,可包含多個簽名信息
],
"compileSdkVersion": 8, //指定OpenHarmony應用/服務編譯時的SDK版本
"compatibleSdkVersion": 8, //指定OpenHarmony應用/服務兼容的最低SDK版本
"products": [ //定義構建的產品品類,如通用默認版、付費版、免費版等
{
"name": "default", //定義產品的名稱,由開發者自定義
"signingConfig": "debug", //指定當前產品品類對應的簽名信息,簽名信息需要在signingConfigs中進行定義
}
]
},
"modules": [
{
"name": "entry", //模塊名稱
"srcPath": "./entry", //標明src目錄相對工程根目錄的相對路徑
"targets": [ //定義構建的產物,由product和各模塊定義的targets共同定義
{
"name": "default", //target名稱,由各個模塊的build-profile.json5中的targets字段定義
"applyToProducts": [ //產品品類名稱,由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": "example description",
"repository": {},
"license": "ISC",
"dependencies": { //依賴項
"hypium": "^1.0.0",
"@ohos/hvigor": "1.0.6",
"@ohos/hvigor-ohos-plugin": "1.0.6"
}
}
配置完工程后,我們創建我們的第一個模塊entry。
2、創建模塊
在工程目錄創建文件夾entry(于上述build-profile.json5的module配置的srcPath保持一致),并添加模塊配置文件:build-profile.json5、hvigorfile.js、package.json以及和HarmonyOS一樣的src模塊目錄。
build-profile.json5:
此處省略了Cpp配置,Cpp相關配置參考官方文檔。
{
"apiType": 'faMode', //API類型,API 8為FA模型,API 9為Stage模型,不需要修改
"showInServiceCenter": true, //是否在服務中心露出
"buildOption": {
"arkEnable": true, //是否使用方舟編譯器進行編譯
},
"targets": [ //模塊對應的產物配置
{
"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": "example description",
"repository": {},
"version": "1.0.0",
"dependencies": {}
}
再在src目錄下建立src/main/config.json、src/main/ets/app.ets、src/main/ets/pages/index.ets、src/resources/…等對應文件。此處省略,具體參考對應文件結構及文件。
3、構建
(1)添加npm源
必須先添加harmonyOS的npm源,否則執行npm install 會報404錯誤。
npm config set @ohos:registry=https://repo.harmonyos.com/npm/
(2)在工程目錄安裝依賴
在工程目錄(根目錄)下安裝依賴。
npm install
(3)執行構建命令
在工程目錄執行構建命令。
構建是通過node.js調用hvigor工具進行打包構建。
確保node已添加在系統環境變量中。
node ./node_modules/@ohos/hvigor/bin/hvigor.js -m module assembleHap
不出意外會出現以下錯誤:
PS E:\BuildTest> node ./node_modules/@ohos/hvigor/bin/hvigor.js -m module assembleHap
> hvigor ERROR: A problem occurred in root module:
ERROR: Cause: Can not find sdk.dir or OHOS_SDK_HOME in System Environment Path
at E:\BuildTest\local.properties:1:1
PS E:\BuildTest>
以上原因是我們沒有配置SDK路徑。
處理方式為:
在項目根路徑創建 local.properties文件 或者在系統環境變量中配置OHOS_SDK_HOME,注意是系統環境變量不是用戶環境變量。
local.properties:
sdk.dir= //sdk所在文件夾
nodejs.dir=//nodejs所在文件夾
復制配置好后再重新執行構建命令就能看到我們構建成功的結果了。
結語
做了這么多步驟,那么有什么實際意義尼?
1.目前openharmony和HarmonyOS在UI上是共通的,只是API上不同。那么就能將HarmonyOS的UI直接拿到Openharmony上使用,直接打包構建openharmony的HAP
2.再加工一下可以像vue-cli那樣直接創建出項目目錄,如果能再實現preview功能,就可以實現無需依賴IDE就能開發打包HAP。
3.有機會自己自定義一個IDE出來,將上述過程黑盒化,想自己做IDE的朋友這一步肯定不能少。