OpenHarmony DevEco Studio使用指南-工程管理

导入Sample工程

DevEco Studio支持Sample工程的导入功能，通过对接Gitee开源社区中的Sample资源，可一键导入Sample工程到DevEco Studio中。

下面介绍导入OpenHarmony Sample的方法。

1. 在DevEco Studio的欢迎页，进入Configure （或图标） > Settings > Version Control > Git界面，单击Test按钮检测是否安装Git工具。

• 已安装，请根据​​2​​开始导入Sample。

• 未安装，请单击Download and Install，DevEco Studio会自动下载并安装。安装完成后，请根据​​2​​开始导入Sample。

2. 在DevEco Studio的欢迎页，单击Import Sample按钮，导入Sample工程。

说明

在打开工程的情况下，可以点击File > New > Import… > Import Sample来进行导入 。

3. 在OpenHarmony页签下选择需要导入的Sample工程，然后单击Next。
4. 设置Project name和Project location，然后单击Finish，等待Sample工程导入完成。

5. 导入Sample后，等待工程同步完成即可。

说明

如果网络受限，导入时会提示“Failed to connect to gitee.com port 443: Time out”连接超时错误，请​​配置Git代理信息​​。

添加/删除Module

Module是OpenHarmony应用/服务的基本功能单元，包含了源代码、资源文件、第三方库及应用/服务配置文件，每一个Module都可以独立进行编译和运行。一个OpenHarmony应用/服务通常会包含一个或多个Module，因此，可以在工程中，创建多个Module，每个Module分为Ability和Library两种类型。

在工程中添加Module

创建新的Module

1. 通过如下两种方法，在工程中添加新的Module。

• 方法1：鼠标移到工程目录顶部，单击鼠标右键，选择New > Module...，开始创建新的Module。
• 方法2：选中模块（如entry模块）下的任意文件，在菜单栏选择File > New > Module...，开始创建新的Module。

2. 在Choose Your Ability Template界面中，选择模板，单击Next。

3. 在Module配置页面，设置新增Module的基本信息。

• Module类型为Ability时，请根据如下内容进行设置，然后单击Next。

     ○  Module name：新增模块的名称。

     ○  Module type：仅在Ability模板存在，可以选择feature和entry类型，在一个工程中，同一个类型的设备，有且只有一个entry模块。

     ○  Enable Super Visual：选择开发模式，支持低代码开发，可选择打开该开关。

     ○  Language：选择该Module的UI开发语言。

     ○  Device type：选择模块的设备类型，如果新建模块的Module type为“feature”，则只能选择该工程原有的设备类型；如果Module type为“entry”，可以选择该Module支持的其他设备类型。

     ○  Show in service center：是否在服务中心展示，仅在Ability模板存在。

• Module类型为Library时，请根据如下内容进行设置，然后单击Finish完成创建。

     ○  Module name：新增模块的名称。

     ○  Language：选择该Module的开发语言。

     ○  Device type：选择模块的设备类型。

     ○  Enable native：是否创建一个用于调用C++代码的OpenHarmony npm共享模块。

4. 如果步骤​​3​​中Module的模板类型为Ability，需要设置新增Ability的Ability name和Visible参数，表示该Ability是否可以被其它应用/服务所调用。
5. 单击Finish，等待创建完成后，可以在工程目录中查看和编辑新增的Module。

导入Module

OpenHarmony工程支持导入其它OpenHarmony工程的模块。当前仅支持FA模型的模块导入到FA模型，Stage模型的模块导入到Stage模型，不支持FA模型的模块导入到Stage模型或Stage模型的模块导入到FA模型。

1. 在主菜单栏单击File > New > Import... > Import Module。

2. 在指定路径下，选择导入的模块，单击OK。导入的模块可以为文件夹，也可以为zip格式。

删除Module

要删除Module，先在工程目录下选中要删除的模块，单击右键，单击Delete...，在弹出的确认删除对话框中，再单击Delete，即删除了选中模块。

开发OpenHarmony npm包

OpenHarmony npm包是在传统的npm三方包的基础上，定义了OpenHarmony npm共享包特定的工程结构和配置文件，支持OpenHarmony页面组件、相关API、资源的调用。通过OpenHarmony npm包，您可以实现多个模块或者多个工程共享OpenHarmony页面、资源等相关代码。

OpenHarmony npm共享包的实现依赖于npm，因此您需要了解和掌握npm的基础功能和机制，可通过​​npm官方文档​​进行了解。

接下来，将简单为大家介绍OpenHarmony npm模块的工程结构，如下图所示：

相关字段的描述如下，其余字段与Entry或Feature模块相关字段相同，可参考​​OpenHarmony工程介绍​​。

• libs：用于存放.so文件。
• src > main > cpp > types：用于存放C++ API描述文件，子目录按照so维度进行划分。
• src > main > cpp > types > liblibrary > index.d.ts：描述C++接口的方法名、入参、返回参数等信息。
• src > main > cpp > types > liblibrary > package.json：描述so三方包声明文件入口和so包名信息。
• src > main > cpp > CMakeLists.txt：CMake配置文件，提供CMake构建脚本
• src > main > cpp > npmlib.cpp：OpenHarmony npm包C++代码源文件。
• index.ets：OpenHarmony npm包导出声明的入口。

本文将介绍如何创建OpenHarmony npm模块、如何编译OpenHarmony npm共享包、如何引用HarmonyOS npm包资源，以及如何将OpenHarmony npm共享包发布到npm仓。

创建OpenHarmony npm模块

1. 通过如下两种方法，在OpenHarmony工程中添加OpenHarmony npm包模块。

• 方法1：鼠标移到工程目录顶部，单击鼠标右键，选择New>Module。
• 方法2：在菜单栏选择File > New > Module。

2. 在Choose Your Ability Template界面中，选择Ohos Library，并单击Next。

3. 在Configure the New Module界面中，设置新添加的模块信息，设置完成后，单击Finish完成创建。

• ​Module name：新增模块的名称。
• ​Language：选择开发OpenHarmony npm包的语言。
• Device type：选择OpenHarmony npm包支持的设备类型。
• Enable Native：是否创建一个用于调用C++代码的OpenHarmony npm共享模块。​

创建完成后，会在工程目录中生成OpenHarmony npm共享模块及相关文件。

如果选择的是JS语言，生成的文件如下：

在开发OpenHarmony npm模块时，请注意以下事项：

• OpenHarmony npm模块的package.json中，必须包含ohos闭包。
• OpenHarmony npm模块暂不支持配置Ability。
• FA模型与Stage模型的OpenHarmony npm模块暂不支持互相引用。
• 在Stage模型中开发OpenHarmony npm共享包时，不推荐引用AppScope内的内容。原因是在编译构建时不会将AppScope中的内容打包到OpenHarmony npm共享包中，将导致资源引用失败。
• 模块JS组件的图片资源只能存放于common文件夹中，同时在本模块中必须通过绝对路径，而非相对路径引用图片资源。例如：

// library/src/main/js/components/index/index.hml
<div class="container">
    <image src="/common/images/Wallpaper.png"></image>
</div>

编译OpenHarmony npm模块

开发完OpenHarmony npm模块后，选中模块名，然后通过DevEco Studio菜单栏的Build > Make Module ${libraryName}进行编译构建，生成OpenHarmony npm包。OpenHarmony npm包可用于工程其它模块的引用，或将OpenHarmony npm包上传至npm仓库，供其他开发者下载使用。

编译构建的OpenHarmony npm包可在模块下的build目录下获取，包格式为*.tgz。

在编译构建OpenHarmony npm包时，请注意以下事项：

• 在编译构建OpenHarmony npm包的过程中，DevEco Studio不会将模块中的C++代码打包进.tgz文件中，而是将C++代码编译成动态依赖库.so文件，并放置在libs目录下。原因是C++的编译构建任务只会在工程的模块下被执行。
• 在编译构建OpenHarmony npm包的过程中，会生成资源文件ResourceTable.txt，以便编辑器可以对OpenHarmony npm包中的资源文件进行联想。因此，如果不使用DevEco Studio对OpenHarmony npm进行构建，则DevEco Studio的编辑器会无法联想OpenHarmony npm包中的资源。

发布OpenHarmony npm包

将打包的OpenHarmony npm包发布至npm仓，可供其他开发者安装和引用。npm包的发布，既可以发布到npm官方中心仓，也可以将其发布到DevEco Marketplace提供的OpenHarmony npm专用仓，接下来将重点介绍如何发布到OpenHarmony npm专用仓。关于发布到npm官方中心仓请参考​​npm官方文档​​。

1. 在OpenHarmony npm模块中（与src文件夹同一级目录下），添加如下文件：

• 新建README.md文件：在README.md文件中必须包含包的介绍和引用方式，还可以根据包的内容添加更详细介绍。
• 新建CHANGELOG.md文件：填写OpenHarmony npm包的版本更新记录。
• 添加LICENSE文件：LICENSE许可文件。

2. 重新​​编译OpenHarmony npm模块​​，生成*.tgz文件。
3. 登录​​DevEco Marketplace​​，单击主页右上角的个人中心 > 安全 > AccessToken，在AccessToken页签下，单击“生成新令牌”。

说明

发布OpenHarmony npm包需注册华为开发者帐号，并完成实名认证，具体请参考​​帐号注册和实名认证​​。

生成的令牌将会在发布OpenHarmony npm包时使用，请单击令牌末尾的复制按钮复制并保存令牌信息。

4. 打开命令行工具执行如下命令设置新的scope：ohos。

npm config set @ohos:registry=https://repo.harmonyos.com/npm/

5. 执行如下命令，设置令牌信息，<authToken>请修改为步骤3中获取的Access Token。

npm config set //repo.harmonyos.com/npm/:_authToken <authToken>

6. 执行如下命令发布OpenHarmony npm包，<OpenHarmony npm包名称>请根据实际进行修改。

npm publish <OpenHarmony npm包名称>

引用OpenHarmony npm包文件和资源

配置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.json5 中查看）。

引用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>

其中，@ohos/library为OpenHarmony npm包的包名，hml页面的路径为OpenHarmony npm包中的相对路径。

随后便可以通过设置的name来使用该element元素，以引用OpenHarmony npm包中的JS组件，示例如下：

<element name="comp" src="@ohos/library/src/main/js/components/index/index.hml"></element>

<div class="container">
    <comp></comp>
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
</div>

引用OpenHarmony npm包ArkTS组件

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

// 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引入导出的ArkTS组件，示例如下所示：

// 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方法的导出和引用，与ArkTS页面的引用相同，即在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模块

文章转载自：​​https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ohos-development-npm-package-0000001222578434-V3​​