1.配置OpenHarmony npm包依赖
引用OpenHarmony npm三方包,包括从OpenHarmony npm仓库进行安装和从本地OpenHarmony npm模块中进行安装两种方式。
- 引用npm仓中的OpenHarmony npm包,首先需要设置OpenHarmony npm三方包的仓库信息,请在DevEco Studio的Terminal窗口执行如下命令进行设置:
npm config set @ohos:registry=https://repo.harmonyos.com/npm/
然后通过如下两种方式设置OpenHarmony npm三方包依赖信息:
- 方式一:在Terminal窗口中,执行如下命令安装OpenHarmony npm三方包,DevEco Studio会自动在工程的package.json中自动添加三方包依赖。
npm install @ohos/vcard --save
方式二:在工程的package.json中设置OpenHarmony npm三方包依赖,配置示例如下:
"dependencies": {
"@ohos/vcard": "^2.1.0"
}
依赖设置完成后,需要执行npm install命令安装依赖包,依赖包会存储在工程的node_modules目录下。
npm install
引用本地OpenHarmony npm模块的文件和资源,有如下两种方式:
方式一:在Terminal窗口中,执行如下命令进行安装,并会在package.json中自动添加依赖。
npm install ../library --save
方式二:在工程的package.json中设置OpenHarmony npm三方包依赖,配置示例如下:
"dependencies": {
"@ohos/library": "file:../library"
}
依赖设置完成后,需要执行npm install命令安装依赖包,依赖包会存储在工程的node_modules目录下。
npm install
在引用OpenHarmony npm包时,请注意以下事项:
- 当前只支持在模块和工程下的package.json文件中声明dependencies依赖,才会被当做OpenHarmony依赖使用,并在编译构建过程中进行相应的处理。
- 引用的模块的compileSdkVersion不能低于其依赖的OpenHarmony npm三方包(可在node_modules目录下,找到引用的npm包的src > main > module.json中查看)。
引用OpenHarmony npm包JS组件
在JS工程范式中,组件功能由hml承载,开发者可以在JS工程的hml页面通过<element>标签来引入OpenHarmony npm包中的共享JS组件,示例如下:
<element name="comp" src="@ohos/library/src/main/js/components/index/index.hml"></element>
引用OpenHarmony npm包eTS组件
eTS是TypeScript的扩展,因此导出和引入的语法与TypeScript一致。在OpenHarmony npm模块中,可以通过export导出eTS组件,示例如下:
// 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%')
}
}
然后在其它模块中通过import引入导出的eTS组件,示例如下所示:
// 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 npm包内ts/js方法
ts/js方法的导出和引用,与eTS页面的引用相同,即在OpenHarmony npm模块中,可以通过export导出ts/js方法,示例如下所示:
// library/index.js
export function func() {
return "[npm] func1";
}
ts/js方法的导出和引用,与eTS页面的引用相同,即在OpenHarmony npm模块中,可以通过export导出ts/js方法,示例如下所示:
// library/index.js
export function func() {
return "[npm] func1";
}
然后在其它的ts/js页面中,通过import引入导出的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 npm包内资源
支持在OpenHarmony npm模块和依赖OpenHarmony npm的模块中引用OpenHarmony npm模块内的资源。例如在OpenHarmony npm模块的scr/main/resources里添加字符串资源(在string.json中定义,name:hello_npm)和图片资源(icon_npm.png),然后在Entry模块中引用该字符串资源和图片资源的示例如下:
// 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_npm")) // 字符串资源
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
.width('50%')
Image($r("app.media.icon_npm")) // 图片资源
}
.height('100%')
}
}
在编译构建HAP中,DevEco Studio会从HAP模块及依赖的模块中收集资源文件,如果不同模块下的资源文件出现重名冲突时,DevEco Studio会按照以下优先级进行覆盖(优先级由高到低):
- AppScope(仅API9的Stage模型支持)
- HAP包自身模块
- 依赖的OpenHarmony npm模块