#创作者激励#【木棉花】:库的调用(ArkTS)——学习笔记 原创

木棉花潘颖琳
发布于 2023-3-21 19:13
浏览
1收藏

【本文正在参加2023年第一期优质创作者激励计划】

前言

好好学习,天天向上!Codelabs上有不少还未的学习案例呢,这次学习的是库的调用(ArkTS)案例。学习笔记拆成两部分,本文是关于社区库调用的学习笔记,以下我的学习心得,小白们也可以跟着一步步实现吖~

概述

本次学习的案例由主页面、本地库组件页面、社区库组件页面三个页面组成,主页面由Navigation作为根组件实现全局标题,由Tabs组件实现本地库和社区库页面的切换。效果如下:
#创作者激励#【木棉花】:库的调用(ArkTS)——学习笔记-鸿蒙开发者社区

软件要求

  • DevEco Studio版本:DevEco Studio 3.1 Beta1及以上版本。
  • HarmonyOS SDK版本:API version 9及以上版本。

正文

一、概念知识

  • Tabs:一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。

  • Canvas:画布组件,用于自定义绘制图形。
    以上这两个组件在以往的文章也有提及过啦,于此着重学习两个新的知识点:

  • Navigation:一般作为Page页面的根容器,通过属性设置来展示页面的标题、工具栏、菜单。

  • HarmonyOS npm包:在传统的npm三方包的基础上,定义了HarmonyOS npm共享包特定的工程结构和配置文件,支持HarmonyOS页面组件、相关API、资源的调用。

二、创建项目

#创作者激励#【木棉花】:库的调用(ArkTS)——学习笔记-鸿蒙开发者社区

三、社区库调用

1、设置依赖

社区库是指已经由贡献者上架到npm中心供其他开发者下载使用的库,调用这类库的步骤如下:

  • 首先需要设置HarmonyOS npm三方包的仓库信息,在DevEco Studio的Terminal窗口执行如下命令进行设置:
npm config set @ohos:registry=https://repo.harmonyos.com/npm/
  • 然后通过如下两种方式设置HarmonyOS npm三方包依赖信息(下面步骤以@ohos/lottieETS三方库为例,其他库替换对应库的名字及版本号即可):

方式一:在Terminal窗口中,执行如下命令安装HarmonyOS npm三方包,DevEco Studio会自动在工程的package.json中自动添加三方包依赖。

npm install @ohos/lottieETS --save

方式二:在工程的package.json中设置HarmonyOS npm三方包依赖,配置示例如下:

"dependencies": {

        "@ohos/lottieETS": "^1.0.2"

}

依赖设置完成后,需要执行npm install命令安装依赖包,依赖包会存储在工程的node_modules目录下。
#创作者激励#【木棉花】:库的调用(ArkTS)——学习笔记-鸿蒙开发者社区

2、引入配置的社区库,并实现对社区库动画的调用

首先在如图路径,创建动画的数据文件data.json
#创作者激励#【木棉花】:库的调用(ArkTS)——学习笔记-鸿蒙开发者社区
接着在pages目录下创建文件Outer.ets用于引用社区库动画,主要代码如下:
通过import的方式引入配置的社区库,设置画布,用于展示动画

import lottie from '@ohos/lottieETS';

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

  aboutToDisappear(): void {
    lottie.destroy();
  }

  onPageShow(): void {
    lottie.play();
  }

  onPageHide(): void {
    lottie.pause();
  }

下图为该社区库的一些api接口说明截图,在node_modules下的index.d.ts文件里
#创作者激励#【木棉花】:库的调用(ArkTS)——学习笔记-鸿蒙开发者社区
#创作者激励#【木棉花】:库的调用(ArkTS)——学习笔记-鸿蒙开发者社区
调用的主要代码:

      Column() {
        Canvas(this.renderingContext)
          .width('100%')
          .aspectRatio(1.76)
          .backgroundImage($r('app.media.canvasBg'))
          .backgroundImageSize(ImageSize.Cover)
          .onDisAppear(() => {
            lottie.destroy(this.animateName);
          })

      Column({ space: 12}) {
        Button() {
          Text('加载动画')
            .fontSize('16fp')
            .fontColor("#007DFF")
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .height('40vp')
        .backgroundColor("#dedbdb")
        .onClick(() => {
          this.canvasTitle = "加载动画";
          this.animateItem = lottie.loadAnimation({
            container: this.renderingContext,
            renderer: 'canvas',
            loop: 10,
            autoplay: true,
            name: this.animateName,
            path: 'common/lottie/data.json'
          });
        })

最后在主页面通过navigation组件,引用Outer组件,代码如下:

import { Outer } from './Outer';
@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController();
  @State currentIndex: number = 0;

  @Builder NavigationTitle() {
    Column() {
      Text("库的调用")
        .fontColor(Color.Black)
        .lineHeight("33vp")
        .fontSize('24fp')
        .fontWeight(FontWeight.Bold)
    }
    .height('56vp')
    .justifyContent(FlexAlign.Center)
  }

  @Builder TabBuilder(index: number) {
    Column() {
      Column() {
        Text(index === 0 ?"本地调用" : "社区调用")
          .fontColor(this.currentIndex === index ? "#007dff" : "#182431")
          .fontSize('16fp')
      }
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .border(this.currentIndex === index
        ? {width: { bottom:'1vp' }, color:"#007DFF" }
        : {}
      )
    }
    .height('56vp')
    .padding({ top:'10vp', bottom: '10vp'})
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Navigation() {
        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
          TabContent() {
//            Inner()
          }.tabBar(this.TabBuilder(0))

          TabContent() {
            Outer()
          }.tabBar(this.TabBuilder(1))
        }
        .barWidth('80%')
        .barHeight('56vp')
        .onChange((index: number) => {
          this.currentIndex = index;
        })
      }
      .title(this.NavigationTitle)
      .hideBackButton(true)
      .titleMode(NavigationTitleMode.Mini)
    }
    .backgroundColor("#F1F3F5")
  }
}

结语

以上就是本次的小分享啦!❀❀

更多资料请关注我们的项目 : Awesome-Harmony_木棉花

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
ThirdPartyLibrary.zip 24.22M 19次下载
已于2023-3-21 19:13:45修改
3
收藏 1
回复
举报
回复
    相关推荐