OpenHarmony npm包文件和资源使用

Posted 2023-02-27 Geek.Fan

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模块