0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙OS开发学习:【第三方库调用】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-04-14 11:34 次阅读

介绍

本篇Codelab主要向开发者展示了在Stage模型中,如何调用已经上架到[三方库中心]的社区库和项目内创建的本地库。效果图如下:

相关概念

  • [Navigation]:一般作为Page页面的根容器,通过属性设置来展示页面的标题、工具栏、菜单。
  • [Tabs]:一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图。
  • [Canvas]:画布组件,用于自定义绘制图形。
  • [OpenHarmony 共享包]:OpenHarmony 共享包定义了特定的工程结构和配置文件,支持OpenHarmony页面组件相关API、资源的调用。

环境搭建

软件要求

  • [DevEco Studio]版本:DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本:API version 9。

硬件要求

  • 开发板类型:[润和RK3568开发板]。
  • OpenHarmony系统:3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:

  1. [获取OpenHarmony系统版本]:标准系统解决方案(二进制)。以3.2 Release版本为例:
  2. 搭建烧录环境。
    1. [完成DevEco Device Tool的安装]
    2. [完成RK3568开发板的烧录]
  3. 搭建开发环境。
    1. 开始前请参考[工具准备],完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后,请参考[使用工程向导]创建工程(模板选择“Empty Ability”)。
    3. 工程创建完成后,选择使用[真机进行调测]。
    4. HarmonyOS鸿蒙开发文档参考:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

搜狗高速浏览器截图20240326151547.png

代码结构解读

本篇Codelab只对核心代码进行讲解,完整代码可以直接从gitee获取。

HarmonyOS&OpenHarmony开发文档PDFv
mau123789直接可以拿取,文档包含在上

├──entry/src/main/ets                  // 代码区
│  ├──common
│  │  ├──constants                     // 常量文件
│  │  │  └──CommonConst.ets            // 通用常量
│  │  ├──lottie
│  │  │  └──data.json                  // 动画JSON文件
│  │  └──utils
│  │     └──log                        // 日志工具类
│  │        └──Logger.ets
│  ├──entryability
│  │  └──EntryAbility.ts               // 程序入口类
│  ├──pages
│  │  └──MainPage.ets                  // 主界面
│  ├──view
│  │  ├──InnerComponent.ets            // 本地库子页面
│  │  └──OuterComponent.ets            // 社区库子界面
│  └──viewmodel
│     ├──ButtonList.ets                // 按钮类
│     └──InnerViewModel.ets            // 本地库数据获取
├──entry/src/main/resources            // 资源文件
└──library/src/main/ets                // 本地库代码区       
   ├──components
   │  └──MainPage           
   │     └──Buttons.ets                // 本地库代码实现
   └──viewmodel
      └──ButtonsViewModel.ets          // 按钮数据类型

整体框架搭建

本篇Codelab由主页面、本地库组件页面、社区库组件页面三个页面组成,主页面由Navigation作为根组件实现全局标题,由Tabs组件实现本地库和社区库页面的切换,代码如下:

// MainPage.ets
import { Outer } from '../view/OuterComponent';
import { Inner } from '../view/InnerComponent';
import { CommonConstants } from '../common/constants/CommonConst';

@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController();
  @State currentIndex: number = 0;

  ...

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

          TabContent() {
            Outer()
          }.tabBar(this.TabBuilder(CommonConstants.SECOND_TAB))
        }
        .barWidth(CommonConstants.BAR_WIDTH)
        .barHeight($r('app.float.default_56'))
        .onChange((index: number) = > {
          this.currentIndex = index;
        })
      }
      .titleMode(NavigationTitleMode.Mini)
      .title(this.NavigationTitle)
      .hideBackButton(true)
    }
    .backgroundColor($r('app.color.app_bg'))
  }
}

在pages文件夹下新建components文件并在此文件夹下创建两个ArkTS文件,分别命名为inner和outer,至此整体框架搭建完毕。

本地库实现

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

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

本Codelab在本地库中实现了对Button组件的简单封装,主要代码实现如下:

// library/src/main/ets/components/MainPage/Buttons.ets
@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($r('app.float.default_16'))
          .fontColor(this.fontColor || $r('app.color.white'))
        }
        .width($r('app.float.default_90'))
        .height($r('app.float.default_35'))
        .backgroundColor(ButtonViewModel.fetchBackgroundColor(this.buttonType))
      }
    }
  }
}

如果想在Codelab的主工程代码中引用本地库,有如下两种方式:

方式一:在Terminal窗口中,执行如下命令进行安装,并会在package.json中自动添加依赖。

ohpm install ../library --save

方式二:在工程的oh_package.json5中设置OpenHarmony ohpm三方包依赖,配置示例如下:

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

依赖设置完成后,需要执行ohpm install命令安装依赖包,依赖包会存储在工程的oh_modules目录下。

ohpm install

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

// InnerComponent.ets
import { Buttons } from '@ohos/library';

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

  build() {
    Scroll(this.scroller) {
      Column({ space: CommonConstants.SPACE_12 }) {
        ForEach(this.buttonList,  (item: ButtonList) = > {
          Column() {
            Flex({
              direction: FlexDirection.Column,
              justifyContent: FlexAlign.SpaceBetween,
              alignItems: ItemAlign.Start
            }) {
              Column() {
                ...
              }
              .alignItems(HorizontalAlign.Start)

              Column() {
                Buttons({
                  buttonText: item.buttonText,
                  buttonShape: item.buttonShape,
                  buttonType: item.buttonType,
                  stateEffect: item.stateEffect,
                  fontColor: item.fontColor
                })
                  .alignSelf(ItemAlign.Center)
                  .margin({ bottom: $r('app.float.default_21') })
              }
              .width($r('app.float.default_260'))
              .height($r('app.float.default_90'))
              .backgroundImage($r('app.media.mobile'))
              .backgroundImageSize(ImageSize.Contain)
              .justifyContent(FlexAlign.End)
              .alignSelf(ItemAlign.Center)
              .align(Alignment.End)
            }
            .padding({
              bottom: $r('app.float.default_24')
            })
            .width(CommonConstants.CONTAINER_WIDTH)
            .height(CommonConstants.CONTAINER_HEIGHT)
          }
          .width(CommonConstants.CONTAINER_WIDTH)
          .aspectRatio(CommonConstants.ASPECT_RATIO_176)
          .padding({
            top: $r('app.float.default_12'),
            left: $r('app.float.default_8')
          })
          .backgroundColor($r('app.color.white'))
          .borderRadius($r('app.float.default_24'))
        })
      }
      .width(CommonConstants.CONTAINER_WIDTH)
      .padding({
        left: $r('app.float.default_12'),
        right: $r('app.float.default_12'),
        top: $r('app.float.default_12')
      })
    }
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
    .margin({bottom: $r('app.float.default_24')})
  }
}

至此本地库的调用已完成。

社区库调用

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

然后通过如下两种方式设置OpenHarmony ohpm三方包依赖信息(下面步骤以@ohos/lottie三方库为例,其他库替换对应库的名字及版本号即可):

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

    ohpm install @ohos/lottie --save
    
  • 方式二:在工程的oh_package.json5中设置OpenHarmony ohpm三方包依赖,配置示例如下:

    "dependencies": {
        "@ohos/lottie": "^2.0.0"
    }
    

    依赖设置完成后,需要执行ohpm install命令安装依赖包,依赖包会存储在工程的oh_modules目录下。

    ohpm install
    

在完成上述步骤后,我们继续完成outer页面的开发,在outer页面中我们通过import的方式引入配置的社区库,并实现对社区库动画的调用,关键代码如下:

// OuterComponent.ets
import lottie, { AnimationItem } from '@ohos/lottie';
import Logger from '../common/utils/log/logger';
import { CommonConstants } from '../common/constants/CommonConst';

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

  ...

  build() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {

      // Canvas area
      Column() {
        Canvas(this.renderingContext)
          .width(CommonConstants.CONTAINER_WIDTH)
          .aspectRatio(CommonConstants.ASPECT_RATIO_176)
          .backgroundImage($r('app.media.canvasBg'))
          .backgroundImageSize(ImageSize.Cover)
          .onDisAppear(() = > {
            lottie.destroy(this.animateName);
          })
        ...
      }
      .margin({
        top: $r('app.float.default_10'),
        left: $r('app.float.default_10'),
        right: $r('app.float.default_10')
      })

      // Buttons area
      Column({ space: CommonConstants.SPACE_12 }) {
        Button() {
          ...
        }
        .width(CommonConstants.CONTAINER_WIDTH)
        .height($r('app.float.default_40'))
        .backgroundColor($r('app.color.outer_button_bg'))
        .onClick(() = > {
          this.canvasTitle = $r('app.string.outer_button_load');
          this.animateItem = lottie.loadAnimation({
            container: this.renderingContext,
            renderer: 'canvas',
            loop: 10,
            autoplay: true,
            name: this.animateName,
            path: 'common/lottie/data.json'
          });
        })
        ...
        }
      }
      .padding({
        left: $r('app.float.default_23'),
        right: $r('app.float.default_23'),
        bottom: $r('app.float.default_41')
      })
    }
    .height(CommonConstants.CONTAINER_HEIGHT)
  }
}

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HarmonyOS
    +关注

    关注

    79

    文章

    1974

    浏览量

    30149
  • OpenHarmony
    +关注

    关注

    25

    文章

    3716

    浏览量

    16273
  • 鸿蒙OS
    +关注

    关注

    0

    文章

    188

    浏览量

    4383
收藏 人收藏

    评论

    相关推荐

    鸿蒙Flutter实战:05-使用第三方插件

    # 鸿蒙Flutter 实战:使用第三方插件 在鸿蒙Flutter开发中,如果涉及到使用原生功能,就要使用插件。使用插件有两种方式,一种是自己编写原生ArkTS代码,在Dart侧
    发表于 10-22 21:54

    如何把第三方加到PROTEUS中?

    新手求教,弱弱的问下,下了一个第三方,说是要先安装,再添加路径,可是我下来的第三方没有看到安装文件啊。还望指教如何添加!
    发表于 06-15 22:32

    关于proteus第三方元件的问题

    下了两个第三方元件,然后就不知道放哪了,也不知道怎么调用。百度不到,求大神解答。谢了!
    发表于 11-13 08:56

    Proteus 第三方元件

    第三方元件,基本包含大部分常用元件的,分享给大家。
    发表于 04-16 22:06

    第三方dll调用问题!!!

    第三方dll,没有.h,labview怎么实现调用,dll可以用VS打开,类说明也有
    发表于 05-11 09:14

    proteus第三方元件

    proteus第三方元件
    发表于 05-26 10:44

    下载python第三方

    python第三方的下载
    发表于 07-02 13:12

    怎样去调用一个第三方的驱动

    怎样去调用一个第三方的驱动呢?如何用IIC驱动Terawins的图像处理芯片T613呢?
    发表于 03-04 06:59

    鸿蒙开源第三方组件资料合集

    开发框架,可以让Ohos的开发人员非常便捷,无需切换语言和编译器的制作Ohos原生游戏项目移植状态:完成调用差异:无原项目基线版本:v1.13编程语言:Java效果展示4、鸿蒙开源
    发表于 03-23 09:53

    在Framework下调用第三方的C++算法库

    Platform: RK3399OS: Android 7.1Kernel: v4.4.83背景:现在在Framework层及以下经常会调用第三方的C++算法库,比如语音识别,人脸识别等等。例如
    发表于 11-24 17:37

    移动应用第三方自动检测和分类

    移动应用中,广泛使用第三方来帮助开发和增强应用功能.很多关于移动应用分析以及访问控制的研究工作,需要在分析之前对第三方进行检测、过滤或者
    发表于 12-29 14:35 0次下载

    鸿蒙支持机型 鸿蒙支持第三方手机吗

    华为鸿蒙系统支持第三方手机吗?鸿蒙支持机型有哪些呢?下面小编就来简单介绍一下!
    的头像 发表于 06-25 10:17 1.1w次阅读

    鸿蒙开发中怎么引入第三方

    多个 API 外也是支持组件调用的,那么鸿蒙应用开发是如何与第三方衔接的呢? 加载一张图
    的头像 发表于 10-11 14:11 4062次阅读

    在AWorks中怎样去修改第三方的源码呢

    AWorks对许多的第三方进行了封装,开发者只需要调用封装好的接口就可以了,无需了解底层实现。一般情况下,这种开发方式十分简便高效。在一些
    的头像 发表于 07-03 14:27 1491次阅读

    学会安装第三方开源

    你好,我是爱吃鱼香ROS的小鱼。秉承着拒绝重复造轮子的ROS精神,本节我们学习如何在我们的工程里安装第三方开源
    的头像 发表于 07-13 14:35 1001次阅读
    学会安装<b class='flag-5'>第三方</b>开源<b class='flag-5'>库</b>