OpenHarmony JS和TS三方组件介绍

OpenHarmony JS和TS三方组件应用的是OpenHarmony动态共享包，即HAR(Harmony Archive)，能够蕴含js/ts代码、c++库、资源和配置文件。通过HAR，能够实现多个模块或者多个工程共享ArkUI组件、资源等相干代码。HAR不同于HAP，不能独立装置运行在设施上，只能作为利用模块的依赖项被援用。

查找OpenHarmony JS和TS三方组件

1.关注Gitee官网OpenHarmony-TPC三方组件资源汇总我的项目，依据目录索引即可找到对应分类下的具体组件。

2.拜访OpenHarmony官网，通过类型，分类，以及关键字搜寻须要的三方组件。

装置并应用OpenHarmony JS和TS语言的三方组件

援用三方HAR，包含从仓库进行装置和从本地库模块中进行装置两种形式。

援用仓库装置的HAR

援用ohpm仓中的HAR，首先须要设置三方HAR的仓库信息，DevEco Studio默认仓库地址是"https://repo.harmonyos.com/ohpm/"，如果您想设置自定义仓库，请在DevEco Studio的Terminal窗口执行如下命令进行设置（执行命令前，请确保将DevEco Studio中ohpm装置地址配置在“环境变量-零碎变量-PATH”中）：

ohpm config set registry=your_registry1,your_registry2

阐明：ohpm反对多个仓库地址，采纳英文逗号分隔。 而后通过如下两种形式设置三方包依赖信息：

  • 形式一：在Terminal窗口中，执行如下命令装置三方包，DevEco
    Studio会主动在工程的oh-package.json5中主动增加三方包依赖。
ohpm install @ohos/lottie
  • 形式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：
"dependencies": { "@ohos/lottie": "^2.0.0"}

依赖设置实现后，须要执行ohpm install命令装置依赖包，依赖包会存储在工程的oh_modules目录下。

ohpm install

援用本地库模块的文件和资源

  • 形式一：在Terminal窗口中，执行如下命令进行装置，并会在oh-package5.json中主动增加依赖。
ohpm install ../library

形式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": {   "library": "file:../library"}

依赖设置实现后，须要执行ohpm install命令装置依赖包，依赖包会存储在工程的oh_modules目录下。

ohpm install

阐明：

在援用OpenHarmony HAR时，请留神以下事项

  • 以后只反对在模块和工程下的oh-package.json5文件中申明dependencies依赖，才会被当做OpenHarmony依赖应用，并在编译构建过程中进行相应的解决。
  • 援用的模块的compileSdkVersion不能低于其依赖的OpenHarmony
    ohpm三方包（可在oh_modules目录下，找到援用的ohpm包的src > main > module.json5 中查看）。

援用OpenHarmony HAR hml页面

在JS工程范式中，组件性能由hml承载，开发者能够在JS工程的hml页面通过标签来引入OpenHarmony HAR中的共享hml页面，示例如下：

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

其中，library为OpenHarmony HAR的包名，hml页面的门路为OpenHarmony HAR中的相对路径。
随后便能够通过设置的name来应用该element元素，以援用OpenHarmony HAR中的hml页面，示例如下：

<element name="comp" src="library/src/main/js/components/index/index.hml"></element><div class="container">   <comp></comp>   <text class="title">      {{ $t('strings.hello') }} {{ title }}   </text></div>

援用OpenHarmony HAR ArkTS页面

ArkTS是TypeScript的扩大，因而导出和引入的语法与TypeScript统一。在OpenHarmony ohpm模块中，能够通过export导出ArkTS页面，示例如下：

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

// entry/MainAbility/pages/index.etsimport { MainPage } from "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 HAR内ts/js办法ts/js办法的导出和援用，与ArkTS页面的援用雷同，即在OpenHarmony ohpm模块中，能够通过export导出ts/js办法，示例如下所示：

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

而后在其它的ts/js页面中，通过import引入导出的ts/js办法，示例如下所示：

// entry/src/main/js/MainAbility/pages/index/index.jsimport {func} from "library"export default {   data: {      title: ""   },   onInit() {      this.title = func();   }}

援用OpenHarmony HAR内资源反对在OpenHarmony ohpm模块和依赖OpenHarmony ohpm的模块中援用OpenHarmony ohpm模块内的资源。例如在OpenHarmony ohpm模块的scr/main/resources里增加字符串资源（在string.json中定义，name：hello_ohpm）和图片资源（icon_ohpm.png）。而后在Entry模块中援用该字符串资源和图片资源的示例如下： 以后暂不反对类Web范式援用i18n文件中的国际化资源。

// entry/src/main/ets/MainAbility/pages/index.ets@Entry@Componentstruct Index {   @State message: string = 'Hello World'   build() {      Column() {         Row() {            Text($r("app.string.hello_ohpm")) // 字符串资源              .fontSize(40)              .fontWeight(FontWeight.Bold)         }         .width('50%')         Image($r("app.media.icon_ohpm")) // 图片资源      }      .height('100%')   }}

在编译构建HAP中，DevEco Studio会从HAP模块及依赖的模块中收集资源文件，如果不同模块的雷同限定词目录下的资源文件呈现重名抵触时，DevEco Studio会依照以下优先级进行笼罩（优先级由高到低）：

  • AppScope（仅API 9的Stage模型反对）
  • HAP包本身模块
  • 依赖的OpenHarmonyHarmony ohpm模块

作为一名合格一线开发程序员，大家心里必定会有很多疑难！鸿蒙零碎这么弱小~~

为了可能让大家跟上互联网时代的技术迭代，在这里跟大家分享一下我本人近期学习心得以及参考网上材料整顿出的一份最新版的鸿蒙学习晋升材料，有须要的小伙伴自行支付，限时开源，先到先得~~~~

支付以下高清学习路线原图请点击→《鸿蒙根底入门学习指南》纯血鸿蒙HarmonyOS根底技能学习路线图


支付以上残缺高清学习路线图，请点击→《鸿蒙开发学习之利用模型》小编本人整顿的局部学习材料（蕴含有高清视频、开发文档、电子书籍等）

以上分享的学习路线都适宜哪些人跟着学习？

  • -应届生/计算机专业通过学习鸿蒙新兴技术，入行互联网，将来高起点待业。
  • -0根底转行提前布局新方向，抓住风口，自我晋升，取得更多就业机会。
  • -技术晋升/进阶跳槽倒退瓶颈期，晋升职场竞争力，疾速把握鸿蒙技术，享受蓝海红利。

最初

鸿蒙开发学习是一个系统化的过程，从基础知识的学习到实战技能的锻炼，再到对前沿技术的摸索，每一环节都至关重要。心愿这份教程材料能帮忙您疾速入门并在鸿蒙开发之路上步步攀升，成就一番事业。让咱们一起乘风破浪，拥抱鸿蒙生态的广大将来！

如果你感觉这篇内容对你有帮忙，我想麻烦大家动动小手给我：点赞，转发，有你们的 『点赞和评论』，才是我发明的能源。

关注我，同时能够期待后续文章ing，不定期分享原创常识。

想要获取更多残缺鸿蒙最新VIP学习材料，请点击→《鸿蒙全套学习指南》