OpenHarmony js/ts三方庫(kù)使用的是OpenHarmony靜態(tài)共享包,即HAR(Harmony Archive),可以包含js/ts代碼、c++庫(kù)、資源和配置文件。通過(guò)HAR,可以實(shí)現(xiàn)多個(gè)模塊或者多個(gè)工程共享ArkUI組件、資源等相關(guān)代碼。HAR不同于HAP,不能獨(dú)立安裝運(yùn)行在設(shè)備上,只能作為應(yīng)用模塊的依賴(lài)項(xiàng)被引用。
如何安裝OpenHarmony HAR
引用三方HAR,包括從倉(cāng)庫(kù)進(jìn)行安裝和從本地庫(kù)模塊中進(jìn)行安裝兩種方式。
引用倉(cāng)庫(kù)安裝的HAR:
引用ohpm倉(cāng)中的HAR,首先需要設(shè)置三方HAR的倉(cāng)庫(kù)信息,DevEco Studio默認(rèn)倉(cāng)庫(kù)地址是[ohpm],如果您想設(shè)置自定義倉(cāng)庫(kù),請(qǐng)?jiān)贒evEco Studio的Terminal窗口執(zhí)行如下命令進(jìn)行設(shè)置(執(zhí)行命令前,請(qǐng)確保將DevEco Studio中ohpm安裝地址配置在“環(huán)境變量-系統(tǒng)變量-PATH”中):
ohpm config set registry=your_registry1,your_registry2
說(shuō)明:ohpm支持多個(gè)倉(cāng)庫(kù)地址,采用英文逗號(hào)分隔。 然后通過(guò)如下兩種方式設(shè)置三方包依賴(lài)信息:
- 方式一:在Terminal窗口中,執(zhí)行如下命令安裝三方包,DevEco Studio會(huì)自動(dòng)在工程的oh-package.json5中自動(dòng)添加三方包依賴(lài)。
ohpm install @ohos/lottie
- 方式二:在工程的oh-package.json5中設(shè)置三方包依賴(lài),配置示例如下:
"dependencies": { "@ohos/lottie": "^2.0.0"}
依賴(lài)設(shè)置完成后,需要執(zhí)行ohpm install命令安裝依賴(lài)包,依賴(lài)包會(huì)存儲(chǔ)在工程的oh_modules目錄下。
ohpm install
引用本地庫(kù)模塊的文件和資源:
- 方式一:在Terminal窗口中,執(zhí)行如下命令進(jìn)行安裝,并會(huì)在oh-package5.json中自動(dòng)添加依賴(lài)。
ohpm install ../library
- 方式二:在工程的oh-package.json5中設(shè)置三方包依賴(lài),配置示例如下:
"dependencies": {
"@ohos/library": "file:../library"
}
依賴(lài)設(shè)置完成后,需要執(zhí)行ohpm install命令安裝依賴(lài)包,依賴(lài)包會(huì)存儲(chǔ)在工程的oh_modules目錄下。
ohpm install
在引用OpenHarmony HAR時(shí),請(qǐng)注意以下事項(xiàng):
- 當(dāng)前只支持在模塊和工程下的oh-package.json5文件中聲明dependencies依賴(lài),才會(huì)被當(dāng)做OpenHarmony依賴(lài)使用,并在編譯構(gòu)建過(guò)程中進(jìn)行相應(yīng)的處理。
- 引用的模塊的compileSdkVersion不能低于其依賴(lài)的OpenHarmony ohpm三方包(可在oh_modules目錄下,找到引用的ohpm包的src > main > module.json5 中查看)。
引用OpenHarmony HAR hml頁(yè)面
在JS工程范式中,組件功能由hml承載,開(kāi)發(fā)者可以在JS工程的hml頁(yè)面通過(guò)標(biāo)簽來(lái)引入OpenHarmony HAR中的共享hml頁(yè)面,示例如下:
< element name="comp" src="http://m.xsypw.cn/images/chaijie_default.png" >< /element >
其中,@ohos/library為OpenHarmony HAR的包名,hml頁(yè)面的路徑為OpenHarmony HAR中的相對(duì)路徑。
隨后便可以通過(guò)設(shè)置的name來(lái)使用該element元素,以引用OpenHarmony HAR中的hml頁(yè)面,示例如下:
< element name="comp" src="http://m.xsypw.cn/images/chaijie_default.png" >< /element >
< div class="container" >
< comp >< /comp >
< text class="title" >
{{ $t('strings.hello') }} {{ title }}
< /text >
< /div >
引用OpenHarmony HAR ArkTS頁(yè)面
ArkTS是TypeScript的擴(kuò)展,因此導(dǎo)出和引入的語(yǔ)法與TypeScript一致。在OpenHarmony ohpm模塊中,可以通過(guò)export導(dǎo)出ArkTS頁(yè)面,示例如下:
// library/src/main/ets/components/MainPage/MainPage.ets
@Entry
@Component
export struct MainPage {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
} .height('100%')
}
}
然后在其它模塊中通過(guò)import引入導(dǎo)出的ArkTS頁(yè)面,示例如下所示:
// entry/MainAbility/pages/index.ets
import { MainPage } from "@ohos/library"
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column() {
MainPage()
Row() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('10%')
}
}
引用OpenHarmony HAR內(nèi)ts/js方法ts/js方法的導(dǎo)出和引用,與ArkTS頁(yè)面的引用相同,即在OpenHarmony ohpm模塊中,可以通過(guò)export導(dǎo)出ts/js方法,示例如下所示:
// library/index.js
export function func() {
return "[ohpm] func1";
}
然后在其它的ts/js頁(yè)面中,通過(guò)import引入導(dǎo)出的ts/js方法,示例如下所示:
// entry/src/main/js/MainAbility/pages/index/index.js
import {func} from "@ohos/library"
export default {
data: {
title: ""
},
onInit() {
this.title = func();
}
}
引用OpenHarmony HAR內(nèi)資源支持在OpenHarmony ohpm模塊和依賴(lài)OpenHarmony ohpm的模塊中引用OpenHarmony ohpm模塊內(nèi)的資源。例如在OpenHarmony ohpm模塊的scr/main/resources里添加字符串資源(在string.json中定義,name:hello_ohpm)和圖片資源(icon_ohpm.png)。然后在Entry模塊中引用該字符串資源和圖片資源的示例如下: 當(dāng)前暫不支持類(lèi)Web范式引用i18n文件中的國(guó)際化資源。
// entry/src/main/ets/MainAbility/pages/index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column() {
Row() {
Text($r("app.string.hello_ohpm")) // 字符串資源
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
.width('50%')
Image($r("app.media.icon_ohpm")) // 圖片資源
}
.height('100%')
}
}
在編譯構(gòu)建HAP中,DevEco Studio會(huì)從HAP模塊及依賴(lài)的模塊中收集資源文件,如果不同模塊的相同限定詞目錄下的資源文件出現(xiàn)重名沖突時(shí),DevEco Studio會(huì)按照以下優(yōu)先級(jí)進(jìn)行覆蓋(優(yōu)先級(jí)由高到低):
- AppScope(僅API 9的Stage模型支持)
- HAP包自身模塊
- 依賴(lài)的OpenHarmonyHarmony ohpm模塊
審核編輯 黃宇
-
鴻蒙
+關(guān)注
關(guān)注
59文章
2545瀏覽量
43842 -
OpenHarmony
+關(guān)注
關(guān)注
28文章
3841瀏覽量
18269
發(fā)布評(píng)論請(qǐng)先 登錄
鴻蒙開(kāi)發(fā)OpenHarmony組件復(fù)用案例
鴻蒙不再兼容安卓,那么鴻蒙開(kāi)發(fā)者是否會(huì)大增?
鴻蒙實(shí)戰(zhàn)項(xiàng)目開(kāi)發(fā):【短信服務(wù)】
鴻蒙OpenHarmony南向/北向快速開(kāi)發(fā)教程-迅為RK3568開(kāi)發(fā)板
鴻蒙Flutter實(shí)戰(zhàn):07混合開(kāi)發(fā)
開(kāi)發(fā)者如何快速加入鴻蒙生態(tài)?(學(xué)習(xí)方法+職業(yè)定位)
openharmony和鴻蒙有什么關(guān)系
華為openharmony鴻蒙 2.0
openharmony和鴻蒙的區(qū)別是什么
如何在開(kāi)源鴻蒙OpenHarmony開(kāi)啟SELinux模式?RK3566鴻蒙開(kāi)發(fā)板演示

OpenHarmony怎么修改DPI密度值?觸覺(jué)智能RK3566鴻蒙開(kāi)發(fā)板演示

OpenHarmony源碼編譯后燒錄鏡像教程,RK3566鴻蒙開(kāi)發(fā)板演示

鴻蒙北向開(kāi)發(fā)OpenHarmony4.1 DevEco Studio開(kāi)發(fā)工具安裝與配置

鴻蒙北向開(kāi)發(fā)OpenHarmony5.0 DevEco Studio開(kāi)發(fā)工具安裝與配置

開(kāi)源鴻蒙開(kāi)發(fā)必備!OpenHarmony替換Full SDK全攻略

評(píng)論