HarmonyOS 鸿蒙Next #线上Codelabs挑战赛#【第二期】三方库拓展的魅力

一、序

第一期刚刚结束，HarmonyOS线上Codelabs系列挑战赛第二期又来了~~这一期的主题是：调用三方库，制作酷炫的视觉效果。

二、程序展示

1、首页

2、产品图库

3、产品详情

重点代码：

this.animateItem = lottie.loadAnimation({
      container: this.renderingContext,
      renderer: 'canvas',
      loop: 1,
      autoplay: true,
      name: this.animateName,
      path: 'common/lottie/data.json'
    });
    this.animateItem.setSegment(0,55);

4、我的

三、知识点

1、HAR包

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

2、官方demo小问题

参考官方文档《库的调用（ArkTS）》编写代码，运行Codelabs，在有openharmonySDK的情况下提示报错，调试一下发现需要在local.properties里添加：

sdk.dir=C:/Users/Administrator/AppData/Local/Huawei/Sdk/openharmony

刚刚发现官方demo里有提示这个问题：

官方demo效果如下：

四、开发HarmonyOS共享包步骤

详细操作可以看官方文档《开发HarmonyOS共享包（API 8）》，这里也简单分享一下：

1、创建HarmonyOS npm模块

在工程上 New>Module

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

2、编译HarmonyOS npm模块

菜单栏的Build > Make Module ${libraryName}进行编译构建，生成HarmonyOS npm包。

3、发布HarmonyOS npm包

将打包的HarmonyOS npm包发布至npm仓，可供其他开发者安装和引用。npm包的发布，既可以发布到npm官方中心仓，也可以将其发布到DevEco Marketplace提供的HarmonyOS npm专用仓。

五、引用HarmonyOS npm包文件和资源

1、引用HarmonyOS npm三方包，包括从HarmonyOS npm仓库进行安装和从本地HarmonyOS npm模块中进行安装两种方式

引用npm仓中的HarmonyOS npm包，首先需要设置HarmonyOS npm三方包的仓库信息

2、在引用HarmonyOS npm包时，请注意以下事项：

• 当前只支持在模块和工程下的package.json文件中声明dependencies依赖，才会被当做HarmonyOS依赖使用，并在编译构建过程中进行相应的处理。
• 引用的模块的compileSdkVersion不能低于其依赖的HarmonyOS npm三方包（可在node_modules目录下，找到引用的npm包的src > main > module.json中查看）。

3、以引用@ohos/lottieETS为例子：

在Terminal窗口中

首先需要设置HarmonyOS npm三方包的仓库信息

npm config set [@ohos](/user/ohos):registry=https://repo.harmonyos.com/npm/

执行如下命令安装HarmonyOS npm三方包

npm install [@ohos](/user/ohos)/lottieETS --save

依赖设置完成后，需要执行npm install命令安装依赖包

npm install

工程里引用

import lottie from '[@ohos](/user/ohos)/lottieETS';

六、总结

这次挑战赛主要是完成调用第三方库，所以在原来程序 #HarmonyOS线上Codelabs挑战赛第一期——AtomLabShopping 上直接叠加了@ohos/lottieETS 的动画库，来完成收藏的动画效果。整体难度不大。期待第三期挑战赛的到来~~