> 文档中心 > OpenHarmony npm包文件和资源使用

OpenHarmony npm包文件和资源使用


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页面通过标签来引入OpenHarmony npm包中的共享JS组件,示例如下:

 

 

引用OpenHarmony npm包eTS组件

        eTS是TypeScript的扩展,因此导出和引入的语法与TypeScript一致。在OpenHarmony npm模块中,可以通过export导出eTS组件,示例如下:

// library/src/main/ets/components/MainPage/MainPage.ets@Entry@Componentexport 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.etsimport { MainPage } from "@ohos/library"@Entry@Componentstruct 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.jsexport function func() {  return "[npm] func1";}

        ts/js方法的导出和引用,与eTS页面的引用相同,即在OpenHarmony npm模块中,可以通过export导出ts/js方法,示例如下所示:

// library/index.jsexport function func() {  return "[npm] func1";}

         然后在其它的ts/js页面中,通过import引入导出的ts/js方法,示例如下所示:

// entry/src/main/js/MainAbility/pages/index/index.jsimport {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@Componentstruct 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模块

 

虫部落快搜