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

04-19 1918阅读 0评论

 介绍

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

鸿蒙OS开发学习：【第三方库调用】 第1张

相关概念

  • [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版本为例：

          鸿蒙OS开发学习：【第三方库调用】 第2张

        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可点击或复制前往。

        鸿蒙OS开发学习：【第三方库调用】 第3张

        代码结构解读

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

        ├──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)
  }
}

          鸿蒙Next核心技术分享

          1、鸿蒙基础知识←《鸿蒙NEXT星河版开发学习文档》

          鸿蒙OS开发学习：【第三方库调用】 第4张

          2、鸿蒙ArkUI←《鸿蒙NEXT星河版开发学习文档》

          鸿蒙OS开发学习：【第三方库调用】 第5张

          3、鸿蒙进阶技术←《鸿蒙NEXT星河版开发学习文档》

          鸿蒙OS开发学习：【第三方库调用】 第6张

           4、鸿蒙就业高级技能←《鸿蒙NEXT星河版开发学习文档》 

          鸿蒙OS开发学习：【第三方库调用】 第7张

           5、鸿蒙多媒体技术←《鸿蒙NEXT星河版开发学习文档》 

          鸿蒙OS开发学习：【第三方库调用】 第8张

          6、鸿蒙南向驱动开发←《鸿蒙NEXT星河版开发学习文档》  

          鸿蒙OS开发学习：【第三方库调用】 第9张

          7、鸿蒙南向内核设备开发←《鸿蒙NEXT星河版开发学习文档》  

          鸿蒙OS开发学习：【第三方库调用】 第10张

           8、鸿蒙系统裁剪与移植←《鸿蒙NEXT星河版开发学习文档》  

          鸿蒙OS开发学习：【第三方库调用】 第11张


相关阅读：

1、System Dashboard for Mac：强大的系统监控与管理工具

2、Axios使用

3、【NodeMcu-ESP8266】引脚使用参考指南——推荐收藏

4、如何用Python构建一个生产级别的电影推荐系统 - 机器学习手册

5、Oracle+RAC静默安装系列（基于RHEL9/国产/麒麟/华为欧拉的生产案例）

免责声明
1、本网站属于个人的非赢利性网站，转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性，但不保证信息的正确性和完整性，且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务，本网站概不负责，亦不负任何法律责任。
4、本网站所刊发、转载的文章，其版权均归原作者所有，如其他媒体、网站或个人从本网下载使用，请在
转载有关文章时务必尊重该文章的著作权，保留本网注明的“稿件来源”，并白负版权等法律责任。

手机扫描二维码访问

文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

发表评论

快捷回复： 表情：
评论列表 （暂无评论，1918人围观）

还没有评论，来说两句吧...

目录[+]