HarmonyOS鸿蒙Next基础- 详细剖析引入第三方库案例篇

前言

刚刷完codelabs的引入第三方库的案例，目前引入方式是使用根据npm改造的鸿蒙自己ohpm。目前只能使用OpenHarmony三方库中心。三方库中心的目前不多。还处于开始阶段，后续开发后需要更多开发者贡献。现在常用的三方库可以分为UI、动画、网络、图片、多媒体、数据存储、安全、工具等。

这里记录两种方式：

• 创建本地项目库方法
• 使用第三方库方法，这里我们使用[@ohos](/user/ohos)/lottie，[@ohos](/user/ohos)/axios常用库；

创建本地库

本地库主要是指未上架到ohpm中心且在项目组内共享使用的库文件，这类库需要开发者在项目中创建并开发新的Library模块，创建步骤如下：

• 鼠标移到工程目录顶部，单击鼠标右键，选择New>Module。
• 在Choose Your Ability Template界面中，选择Static Library，并单击Next。
• 在Configure the New Module界面中，设置新添加的模块信息，设置完成后，单击Finish完成创建。
  • Module name：新增模块的名称。
  • Language：选择开发HarmonyOS ohpm包的语言。
  • Device type：选择HarmonyOS ohpm包支持的设备类型。
  • Enable Native：是否创建一个用于调用C++代码的HarmonyOS ohpm共享模块。
• 创建完成后，会在工程目录中生成HarmonyOS ohpm共享模块及相关文件。

引入本地库

两种方式：

• 方式一：在Terminal窗口中，执行如下命令进行安装，并会在oh-package.json5中自动添加依赖。

  ohpm install ../library 
  

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

  "dependencies": {
    "[@ohos](/user/ohos)/library": "file:../library"
  }
  

手动编写依赖设置完成后，执行ohpm install命令安装依赖包，依赖包会存储在工程的oh_modules目录下，这个跟我们前端拉新项目下来安装依赖包相似

下面是本地库NewButton代码：

import ButtonViewModel from '../../viewmodel/ButtonsViewModel';
@Component
export struct Buttons {
  @Prop buttonText: string;
  @Prop stateEffect: boolean;
  @Prop buttonShape: string;
  @Prop buttonType: string;
  @Prop fontColor: string;

  build() {
    Row() {
      Column() {
        Button({
          type: ButtonViewModel.fetchType(this.buttonShape),
          stateEffect: this.stateEffect
        }) {
          Text(this.buttonText)
            .fontSize('16vp')
            .fontColor(this.fontColor || '#FFFFFF')
        }
        .width('100vp')
        .height('35vp')
        .backgroundColor(ButtonViewModel.fetchBackgroundColor(this.buttonType))
      }
    }
  }
}

在完成上述步骤后，我们继续完成inner页面的开发，在inner页面中我们通过import的方式引入开发的本地库，并通过循环传入不同的参数展示不同的button。

import { Buttons } from '[@ohos](/user/ohos)/library';
import InnerViewModel from '../viewmodel/InnerViewModel';
import { ButtonList } from '../viewModel/ButtonList';

@Component export struct Inner {
  @State buttonList: ButtonList[] = InnerViewModel.getButtonListData();
  scroller: Scroller = new Scroller();

  build(){
    Scroll(this.scroller) {
      Column({ space: 12 }) {
        ForEach(this.buttonList, (item: ButtonList) => {
          Column() {
            Flex({
              direction: FlexDirection.Column,
              justifyContent: FlexAlign.SpaceBetween,
              alignItems: ItemAlign.Start
            }){
              ...
              Column() {
                Buttons({
                  buttonText: item.buttonText,
                  buttonShape: item.buttonShape,
                  buttonType: item.buttonType,
                  stateEffect: item.stateEffect,
                  fontColor: item.fontColor
                })
                  .alignSelf(ItemAlign.Center)
                  .margin({ bottom: '21vp' })
              }
              ...
            }
        })
      }
      ...
    }
    ...
  }
}

社区库调用

社区库是指已经由贡献者上架到ohpm中心供其他开发者下载使用的库，调用这类库的方法如下： 通过如下两种方式设置HarmonyOS ohpm三方包依赖信息,这里推荐第一种。前端也是常用第一种方式。（下面步骤以[@ohos](/user/ohos)/lottie三方库为例，其他库替换对应库的名字及版本号即可）：

• 方式一：在Terminal窗口中，执行如下命令安装HarmonyOS ohpm三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

  ohpm install [@ohos](/user/ohos)/lottie
  

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

  "dependencies":{
    "[@ohos](/user/ohos)/lottie": "^2.0.0"
  }
  

跟上面一样，需要执行ohpm install命令安装依赖包，依赖包会存储在工程的oh_modules目录下。

在完成上述步骤后，我们继续完成outer页面的开发，在outer页面中我们通过import的方式引入配置的社区库，并实现对社区库动画的调用。

import lottie, { AnimationItem } from '[@ohos](/user/ohos)/lottie';
import Logger from '../common/utils/log/Logger';

@Component
export struct Outer {
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
  private animateName: string = 'data';
  private animateItem: AnimationItem | null = null;
  @State canvasTitle: string | undefined = undefined;

  build(){
    Flex({
      direction: FlexDirection.Column,
      justifyContent: FlexAlign.SpaceBetween
    }){
      Column(){
        Canvas(this.renderingContext)
          .width('100%')
          .aspectRatio(1.76)
          .backgroundImage($r('app.media.canvasBg'))
          .backgroundImageSize(ImageSize.Cover)
          .onDisAppear(() => {
            lottie.destroy(this.animateName);
          })
        Text(this.canvasTitle)
          .width('100%')
          .fontSize('14fp')
          .textAlign(TextAlign.Center)
          .fontWeight(FontWeight.Bold)
          .fontColor('#182431')
          .opacity(0.4)
      }
      .margin({
        top: '10vp',
        left: '10vp',
        right: '10vp'
      })

      Column({ space: 12 }){
        Button(){
          Text('加载动画')
            .fontSize('16fp')
            .fontColor('#007DFF')
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .height('41vp')
        .backgroundColor('#dedbdb')
        .onClick(() => {
          if (this.animateItem != null) {
            this.animateItem.destroy();
            this.animateItem = null;
          }

          this.canvasTitle = '加载动画';

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

        Button() {
          Text('结束并回到第0帧')
            .fontSize('16fp')
            .fontColor('#007DFF')
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .height('40vp')
        .backgroundColor('#dedbdb')
        .onClick(() => {
          if (this.animateItem === null) return;
          this.canvasTitle = '结束并回到第0帧';
          this.animateItem.goToAndPlay(0, true);
        })

        Flex({ justifyContent: FlexAlign.SpaceBetween }){
          Button(){
            Text('播放')
              .fontSize('16fp')
              .fontColor('#007DFF')
              .fontWeight(FontWeight.Bold)
          }
          .width('49%')
          .height('40vp')
          .backgroundColor('#dedbdb')
          .onClick( () => {
            if (this.animateItem === null) return;
            this.canvasTitle = '播放'
            lottie.play();
          })

          Button() {
            Text('暂停')
              .fontSize('16fp')
              .fontColor('#007DFF')
              .fontWeight(FontWeight.Bold)
          }
          .width('49%')
          .height('40vp')
          .backgroundColor('#dedbdb')
          .onClick(() => {
            if (this.animateItem === null) return;
            this.canvasTitle = '暂停';
            lottie.pause();
          })
        }
      }
      .padding({
        left: '23vp',
        right: '23vp',
        bottom: '41vp'
      })
    }
    .height('100%')
  }
}

总结

这里介绍了本地库使用、远程第三方库引入； 本地库或者远程第三方库，都需要ohpm引入到oh-package.json5中才能使用； 我是前端，喜欢用ohpm直接导入。如需要手动导入可以选择第二种；