• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# OpenHarmony JS和TS三方组件使用指导
2## OpenHarmony JS和TS三方组件介绍
3
4OpenHarmony JS和TS三方组件使用的是OpenHarmony静态共享包，即HAR(Harmony Archive)，可以包含js/ts代码、c++库、资源和配置文件。通过HAR，可以实现多个模块或者多个工程共享ArkUI组件、资源等相关代码。HAR不同于HAP，不能独立安装运行在设备上，只能作为应用模块的依赖项被引用。
5
6
7
8## 查找OpenHarmony JS和TS三方组件
9
101. 关注Gitee官网OpenHarmony-TPC[三方组件资源汇总](https://gitee.com/openharmony-tpc/tpc_resource)项目，根据目录索引即可找到对应分类下的具体组件。
11
12
13
142. 访问[OpenHarmony官网](https://growing.openharmony.cn/mainPlay/tpc)，通过类型，分类，以及关键字搜索需要的三方组件。
15   ![official-website.png](official-website.png)
16
17
18
19## 安装并使用OpenHarmony JS和TS语言的三方组件
20
21引用三方HAR，包括从仓库进行安装和从本地库模块中进行安装两种方式。
22
23**引用仓库安装的HAR**
24
25引用ohpm仓中的HAR，首先需要设置三方HAR的仓库信息，DevEco Studio默认仓库地址是"https://repo.harmonyos.com/ohpm/"，如果您想设置自定义仓库，请在DevEco Studio的Terminal窗口执行如下命令进行设置（执行命令前，请确保将DevEco Studio中ohpm安装地址配置在“环境变量-系统变量-PATH”中）：
26```
27ohpm config set registry=your_registry1,your_registry2
28```
29说明：ohpm支持多个仓库地址，采用英文逗号分隔。
30然后通过如下两种方式设置三方包依赖信息：
31   -  方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
32```
33ohpm install @ohos/lottie
34```
35   - 方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：
36```
37"dependencies": { "@ohos/lottie": "^2.0.0"}
38```
39依赖设置完成后，需要执行ohpm install命令安装依赖包，依赖包会存储在工程的oh_modules目录下。
40```
41ohpm install
42```
43
44**引用本地库模块的文件和资源**
45
46- 方式一：在Terminal窗口中，执行如下命令进行安装，并会在oh-package5.json中自动添加依赖。
47```
48ohpm install ../library
49```
50- 方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：
51```
52"dependencies": {
53   "@ohos/library": "file:../library"
54}
55```
56依赖设置完成后，需要执行ohpm install命令安装依赖包，依赖包会存储在工程的oh_modules目录下。
57```
58ohpm install
59```
60
61> **说明：**
62>
63> 在引用OpenHarmony HAR时，请注意以下事项
64>- 当前只支持在模块和工程下的oh-package.json5文件中声明dependencies依赖，才会被当做OpenHarmony依赖使用，并在编译构建过程中进行相应的处理。
65>- 引用的模块的compileSdkVersion不能低于其依赖的OpenHarmony ohpm三方包（可在oh_modules目录下，找到引用的ohpm包的src > main > module.json5 中查看）。
66
67
68
69### 引用OpenHarmony HAR hml页面
70在JS工程范式中，组件功能由hml承载，开发者可以在JS工程的hml页面通过<element>标签来引入OpenHarmony HAR中的共享hml页面，示例如下：
71```
72<element name="comp" src="@ohos/library/src/main/js/components/index/index.hml"></element>
73```
74其中，@ohos/library为OpenHarmony HAR的包名，hml页面的路径为OpenHarmony HAR中的相对路径。
75随后便可以通过设置的name来使用该element元素，以引用OpenHarmony HAR中的hml页面，示例如下：
76```typescript
77<element name="comp" src="@ohos/library/src/main/js/components/index/index.hml"></element>
78
79<div class="container">
80   <comp></comp>
81   <text class="title">
82      {{ $t('strings.hello') }} {{ title }}
83   </text>
84</div>
85```
86### 引用OpenHarmony HAR ArkTS页面
87ArkTS是TypeScript的扩展，因此导出和引入的语法与TypeScript一致。在OpenHarmony ohpm模块中，可以通过export导出ArkTS页面，示例如下：
88```typescript
89// library/src/main/ets/components/MainPage/MainPage.ets
90@Entry
91@Component
92export struct MainPage {
93   @State message: string = 'Hello World'
94   build() {
95      Row() {
96         Column() {
97            Text(this.message)
98            .fontSize(50)
99            .fontWeight(FontWeight.Bold)
100         }
101         .width('100%')
102      } .height('100%')
103   }
104}
105```
106然后在其它模块中通过import引入导出的ArkTS页面，示例如下所示：
107```typescript
108// entry/MainAbility/pages/index.ets
109
110import { MainPage } from "@ohos/library"
111@Entry
112@Component
113struct Index {
114   @State message: string = 'Hello World'
115   build() {
116      Column() {
117         MainPage()
118         Row() {
119            Text(this.message)
120            .fontSize(50)
121            .fontWeight(FontWeight.Bold)
122         }
123         .width('100%')
124      }
125      .height('10%')
126   }
127}
128```
129引用OpenHarmony HAR内ts/js方法ts/js方法的导出和引用，与ArkTS页面的引用相同，即在OpenHarmony ohpm模块中，可以通过export导出ts/js方法，示例如下所示：
130```typescript
131// library/index.js
132export function func() {
133   return "[ohpm] func1";
134}
135```
136然后在其它的ts/js页面中，通过import引入导出的ts/js方法，示例如下所示：
137```typescript
138// entry/src/main/js/MainAbility/pages/index/index.js
139import {func} from "@ohos/library"
140export default {
141   data: {
142      title: ""
143   },
144   onInit() {
145      this.title = func();
146   }
147}
148```
149引用OpenHarmony HAR内资源支持在OpenHarmony ohpm模块和依赖OpenHarmony ohpm的模块中引用OpenHarmony ohpm模块内的资源。例如在OpenHarmony ohpm模块的scr/main/resources里添加字符串资源（在string.json中定义，name：hello_ohpm）和图片资源（icon_ohpm.png）。然后在Entry模块中引用该字符串资源和图片资源的示例如下：
150当前暂不支持类Web范式引用i18n文件中的国际化资源。
151```typescript
152// entry/src/main/ets/MainAbility/pages/index.ets
153@Entry
154@Component
155struct Index {
156   @State message: string = 'Hello World'
157   build() {
158      Column() {
159         Row() {
160            Text($r("app.string.hello_ohpm")) // 字符串资源
161              .fontSize(40)
162              .fontWeight(FontWeight.Bold)
163         }
164         .width('50%')
165         Image($r("app.media.icon_ohpm")) // 图片资源
166      }
167      .height('100%')
168   }
169}
170```
171在编译构建HAP中，DevEco Studio会从HAP模块及依赖的模块中收集资源文件，如果不同模块的相同限定词目录下的资源文件出现重名冲突时，DevEco Studio会按照以下优先级进行覆盖（优先级由高到低）：
172- AppScope（仅API 9的Stage模型支持）
173- HAP包自身模块
174- 依赖的OpenHarmonyHarmony ohpm模块