OpenHarmony开发实战：库的调用（ArkTS）

最新推荐文章于 2024-05-17 21:40:54 发布
最新推荐文章于 2024-05-17 21:40:54 发布
阅读量924 收藏 24
点赞数 15
分类专栏： 鸿蒙 OpenHarmony 文章标签： 分布式 harmonyos OpenHarmony 鸿蒙 android 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/137679312
版权

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

相关概念

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

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

  • Canvas：画布组件，用于自定义绘制图形。

  • OpenHarmony 共享包：OpenHarmony 共享包定义了特定的工程结构和配置文件，支持OpenHarmony页面组件相关API、资源的调用。

环境搭建

软件要求

  • DevEco Studio版本：DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本：API version 9。

硬件要求

环境搭建

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

  1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

  2. 搭建烧录环境。

    1. 完成DevEco Device Tool的安装
    2. 完成RK3568开发板的烧录

  3. 搭建开发环境。

    1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
    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)
  }
}

至此本篇Codelab的开发已经完成。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

 有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

蜀道山QAQ
关注
  • 15
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
聚合数据 Android 项目开发实战：
07-20
短信验证码的功能，在很多应用中都能用到，我写了一个例子，是接的聚合数据的短信验证码
Android Studio开发实战：从零基础到App上线
08-28
- **Chapter 20** 可能是关于网络编程和API调用的章节，讲解如何使用HttpURLConnection、OkHttp或者Retrofit等库进行网络请求，获取并解析JSON数据。此外，还会涉及到如何申请并使用像`高德Key值`这样的第三方API...
鸿蒙一次开发，多端部署（一）简介
1
03-21 1749
定义：一套代码工程，一次开发上架，多端按需部署。目标：支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。为了实现“一多”的目标，需要解决两个基础问题：不同设备间的屏幕尺寸、色彩风格等存在差异，页面如何适配。不同设备的系统能力有差异，如智能穿戴设备是否具备定位能力、智慧屏是否具备摄像头等，功能如何兼容。从第4章开始将从UX设计、系统能力等角度，详尽的解答上述问题。
OpenHarmony实战开发-一次开发，多端部署、简介
最新发布
m0_70749039的博客
05-17 905
随着终端设备形态日益多样化，分布式技术逐渐打破单一硬件边界，一个应用或服务，可以在不同的硬件设备之间随意调用、互助共享，让用户享受无缝的全场景体验。而作为应用开发者，广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容，则需要适配不同的屏幕尺寸和硬件，开发成本较高。OpenHarmony系统面向多终端提供了“一次开发，多端部署”（后文中简称为“一多”）的能力，让开发者可以基于一种设计，高效构建多端可运行的应用。
鸿蒙Harmony应用开发—ArkTS-路径动画
m0_64420071的博客
03-20 1063
设置组件进行位移动画时的运动路径。
ArkTS-共享元素转场动画
qq_41154522的博客
11-28 512
鸿蒙开发-共享元素转场动画
鸿蒙、OpenHarmony、HarmonyOS傻傻的分不清楚。。。看这篇就够了
热门推荐
老卫的技术站
03-22 1万+
很多人对鸿蒙、OpenHarmony、HarmonyOS这些术语傻傻的分不清楚，那么本文就做一些解答。 6月4日，华为发布了《关于规范HarmonyOS沟通口径的通知》（以下简称《通知》），原文在网上都能搜到，这里就不贴了。本人对该通知做一些解读如下。 1. 《通知》背景 《通知》开篇就说“关于‘鸿蒙操作系统’，由于缺乏规范的表述和统一的口径，导致内部理解不一致、对外说法不一致，容易引起混淆”所以，大家不要不好意思啊，不光你不懂，很多人都傻傻的分不清。 不懂不要怕，咱们继续往下看。 2. 鸿蒙操作
HarmonyOS ArkTS 三方库的基本使用（十六）
Chen_xiaobao的博客
01-03 2195
常用的三方库可以分为UI、动画、网络、图片、多媒体、数据存储、安全、工具等。@ohos/lottie是基于lottie-web开发，集成在三方库社区内的开源版本，是HarmonyOS系统中复杂动画的一种解决方案。启动动画：APP logo动画的播放。加载动画：网络请求的loading动画。上下拉刷新动画：请求更多资源时的刷新动画。按钮动画：切换按钮、编辑按钮、播放按钮等按钮的切换过渡动画。视图转场动画：一些场景的转场添加动画能够提升用户体验。
微信小程序开发实战：使用Underscore.js
03-29
Underscore.js 是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。Underscore 提供了100多个函数，包括常用的：map、filter、invoke — 当然还有更多专业的...
React开发实战完整版，直接下载
06-22
本资源"React开发实战完整版"提供了全面的学习指南，旨在帮助开发者深入理解React，并能实际应用于项目开发中。 在React开发中，以下几个核心知识点至关重要： 1. 组件化：React的核心概念就是组件，每个组件都是...
Knative 云原生应用开发指南&开发实战
03-17
Trigger事件模型、事件注册机制、Sequeue解析）、云原生开发实战（日志监控告警、调用链管理、基于kafka实现消息推送、基于MNS与OSS实现人脸图片识别、基于APIGateway打造生产级别的Knative服务）
ark-java:使用JVM与Ark生态系统区块链进行交互的库
04-30
方舟 :hot_beverage: Java中的Lite客户端库 作者 特伦斯（FX Thoorens） 安装 使用Java 从Maven存储库https://dl.bintray.com/arkecosystem/ark-java/下载.jar 将其添加到您的项目并import io.ark.* 玛文 在<dependencies>下添加它 <dependency> <groupId>io.ark.lite</groupId> <artifactId>client</artifactId> <version>0.3</version> <scope>compile</scope> </dependency> Gradle 在dependencies下添加此行 compile 'io.ark.lite:client:0.3' 在此处查看示例gradle应用程序： : 使用Groovy
C#调用Qt生成的库例程.zip
08-19
比如：利用Qt开发一个动态库，给C#调用。 当前的需求是： 利用Qt开发一个工具库，给C#调用，来完成一些特殊处理。 需要Qt生成一个动态库(dll)，给C#加载调用，并且还需要设置回调，方便C#知道Qt运行时，输出内部的...
Openharmony的设备开发流程 Hi3516DV300
huiskai的博客
03-10 1449
，然后在控制台输出“SUCCESS”表示设置成功。在任务栏单击Monitor按钮，启动串口工具。重启开发板，在倒计时结束前，按任意键。
OpenHarmony应用开发之全局配置参数解析
wresource的博客
03-19 1339
一般的项目都有全局模块的配置，OpenHarmony系统的应用同样也有这样的一个模块config.json，类似安卓中的AndroidManifest.xml,作用是相似的，配置应用板块，带大家来进一步解析其中的参数，以下给出一般的结构，正文即将开始~~
HarmonyOS鸿蒙应用开发 (一、环境搭建及第一个Hello World)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-17 3926
2024年1月16日，华为目前开启已HarmonyOS NEXT开发者预览版Beta招募，报名周期为1月15日-1月22日。HarmonyOS NEXT开发者预览版将不再兼容安卓开源应用，仅支持鸿蒙内核和系统的应用，因此被称为“纯血鸿蒙”。
OpenHarmony 入门——搭建OpenHarmony本地应用开发环境
最美不过，心中有梦，身旁有你！
11-03 4048
OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。
HarmonyOS共享包以及跨模块引用
Neo的博客
11-27 5675
参照官方文档使用：Index.ets作为导出配置文件，在另一个库中使用遇到此问题重读官方文档得到解决方法：重新创建: Index.ts 作为导出配置文件即可OpenHarmony提供了两种共享包，HAR（Harmony Archive）静态共享包，和HSP（Harmony Shared Package）动态共享包。
OpenHarmony JS和TS三方组件使用指导
2401_82546228的博客
02-20 1178
OpenHarmony JS和TS三方组件使用的是OpenHarmony静态共享包，即HAR(Harmony Archive)，可以包含js/ts代码、c++库、资源和配置文件。通过HAR，可以实现多个模块或者多个工程共享ArkUI组件、资源等相关代码。HAR不同于HAP，不能独立安装运行在设备上，只能作为应用模块的依赖项被引用。鸿蒙开发学习是一个系统化的过程，从基础知识的学习到实战技能的锤炼，再到对前沿技术的探索，每一环节都至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值