Skip to main content

moregeek program

harmonyos arkts 本地库&三方库的用法_鸿蒙社区的博客-多极客编程

项目介绍


项目内容: 自定义基础组件和容器组件、依赖库概念、本地依赖库的创建和引用、三方库的引用。


工具版本: DevEco Studio 3.1 Canary1


SDK版本: 3.2.1.4(API Version 9 Canary1)(Stage模型)


本项目基于HarmonyOS的ArkUI框架TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:基于TS扩展的声明式开发范式


效果演示


demo.gif


依赖库


实际项目中,我们会把 公共代码独立功能(UI、算法....) 抽离出来封装成依赖库,提供调用方法,调用者只需将依赖库导入到项目中,使用简单的代码调用来完成开发,提高了开发效率。一般的依赖库特点:调用简单、扩展性高。


本地库


本地库主要是指未上架到npm中心,只是本地依赖使用的库。


1、本地库的创建


a.鼠标移到工程目录顶部,鼠标右击,选择New>Module。


demo1.png


b.在Choose Your Ability Template界面中,选择Ohos Library,点击下一步。


demo2.png


c.在Configure the New Module界面中,配置模块信息,点击完成。



  • Module name:新增模块的名称。
  • Language:选择开发HarmonyOS npm包的语言。
  • Device type:选择HarmonyOS npm包支持的设备类型。
  • Enable Native:是否创建一个用于调用C++代码的HarmonyOS npm共享模块。

demo3.png


2、本地库的依赖


在Terminal窗口中,进入模块目录中,执行如下命令进行安装,并会在package.json中自动添加依赖。


npm install (本地模块的路径)


npm install ../library

demo4.png


3、本地库的调用


在依赖库的根目录中,index.ets文件提供了对外的导出。


demo5.png


在entry中index.ets页面中,引入依赖库。


// 导入本地依赖库
import { MainPage } from '@ohos/library'

@Entry
@Component
struct Index {
build() {
Column() {
// 使用自定义组件
MainPage()
}.width('100%').height('100%')
.justifyContent(FlexAlign.Center)
}
}

自定义组件


可复用的 UI 单元,可组合其它组件,被 @Component 装饰的结构体。


本项目依赖库中自定义组件:公共标题栏、侧滑菜单容器。


1、标题栏组件


标题自定义,左右都可以定义图标和点击事件。且左边图标有默认事件:页面返回。


import router from '@ohos.router';
/**
* 自定义标题栏
*/
@Component
export struct TitleBar {
// 左边图标是否显示
private isShowLeft = true
// 左边图标
private leftIcon = $r('app.media.back')
// 左边点击事件,默认返回上一页
private leftClickEvent = () => {
router.back()
}
// 标题
private title = '标题'
// 右边图标是否显示
private isShowRight = false
// 右边图标
private rightIcon = $r('app.media.icon')
// 左边点击事件
private rightClickEvent: () => void

build() {
Column() {
Stack() {
Text(this.title).fontSize(20).fontColor('#ff1a1a1a')
Row() {
if (this.isShowLeft) {
Image(this.leftIcon).size({ width: 55, height: 55 }).padding(15)
.onClick(() => this.leftClickEvent())
}
Blank()
if (this.isShowRight) {
Image(this.rightIcon).size({ width: 55, height: 55 }).padding(15)
.onClick(this.rightClickEvent)
}
}.width('100%')
}.width('100%').height(0).layoutWeight(1)

Divider().color('#ffbababa')
}.width('100%').height(55)
}
}

标题栏组件的使用:


import { TitleBar } from '@ohos/library'

@Entry
@Component
struct Index {
build() {
Column() {
TitleBar({ title: '主页', leftIcon: $r('app.media.menu'),
leftClickEvent: () => {
// 左图标点击事件
}
})
}.width('100%').height('100%')
}
}

2、侧滑菜单容器


左右滑动可以控制菜单,菜单打开时,背景透明度改变,使用动画效果打开或关闭菜单。


/**
* 滑动菜单
*/
@Component
export struct SlideMenuContainer {
// 菜单的宽度
@State menuWidth: number = 0
// 菜单x轴偏移量
@State menuOffsetX: number = 0
// 菜单偏移最小量
private offsetXMin = 0
// 菜单偏移最大量
private offsetXMax = 0
// 第一次按下的x坐标
private firstDownX = -1
// 上次按下的x坐标
private lastDownX = -1
// 背景透明度
@State bgOpacity: number = 0
// 滑动方向
private slideDirection: 'left' | 'right'
// 菜单布局
@BuilderParam menu: any
// 内容布局
@BuilderParam content: any
// 定时器ID
private intervalID = 0
// 是否打开菜单
@Link @Watch('isOpenChanger') isOpen: boolean

isOpenChanger() {
if (this.isOpen) {
this.openMenu()
}
}

build() {
Stack({ alignContent: Alignment.Start }) {
// 内容布局
Column() {
this.content()
}.width('100%').height('100%')

if (this.bgOpacity) {
// 透明背景
Column() {
}.width('100%').height('100%')
.backgroundColor(Color.Black).opacity(this.bgOpacity)
}

// 菜单布局
Column() {
this.menu()
}.width(this.menuWidth).height('100%')
.backgroundColor(Color.White)
.offset({ x: this.menuOffsetX })

}.width('100%').height('100%')
.onTouch((event) => this.onTouchEvent(event))
.onAreaChange((oldValue: Area, newValue: Area) => {
// 监听回调中获取容器的宽度
const width = Number.parseInt(newValue.width.toString())
this.menuWidth = width * 0.7
this.menuOffsetX = -this.menuWidth
this.offsetXMin = -this.menuWidth
this.offsetXMax = 0
})
}
/**
* 触摸事件
*/
onTouchEvent(event: TouchEvent) {
const x = event.touches[0].x
switch (event.type) {
case TouchType.Down: // 手指按下
{
this.firstDownX = x
this.lastDownX = x
clearInterval(this.intervalID)
}
break;
case TouchType.Move: // 手指移动
{
// 计算这次x坐标点与上次x坐标点的差
const diff = x - this.lastDownX
this.lastDownX = x
// 累计算出滑动的距离
this.menuOffsetX += diff
// 确定方向
this.slideDirection = diff > 0 ? 'right' : 'left'
// 限定距离范围
if (this.menuOffsetX >= this.offsetXMax) this.menuOffsetX = this.offsetXMax
if (this.menuOffsetX <= this.offsetXMin) this.menuOffsetX = this.offsetXMin
// 更改背景透明度
this.bgOpacity = 0.6 * Math.abs(this.menuWidth + this.menuOffsetX) / this.menuWidth
}
break;
case TouchType.Up: // 手指抬起
{
if (Math.abs(x - this.firstDownX) < 5) {
return
}
if (this.slideDirection === 'left') {
// 是否小于宽度的3/2
const isClose = Math.abs(this.menuWidth + this.menuOffsetX) < this.menuWidth * 2 / 3
isClose ? this.closeMenu() : this.openMenu()
} else {
// 是否大于宽度的3/1
const isOpen = Math.abs(this.menuWidth + this.menuOffsetX) > this.menuWidth / 3
isOpen ? this.openMenu() : this.closeMenu()
}
}
break;
default:
break;
}
}

/**
* 定时器改变偏移量
* @param type 偏移量 加或减
*/
intervalChangeOffset(type: 1 | -1) {
this.intervalID = setInterval(() => {
this.menuOffsetX += type * 15
if (this.menuOffsetX >= this.offsetXMax) {
this.menuOffsetX = this.offsetXMax
clearInterval(this.intervalID)
}
if (this.menuOffsetX <= this.offsetXMin) {
this.menuOffsetX = this.offsetXMin
clearInterval(this.intervalID)
this.isOpen = false
}
this.bgOpacity = 0.6 * Math.abs(this.menuWidth + this.menuOffsetX) / this.menuWidth
}, 5)
}

/**
* 打开菜单
*/
openMenu() {
this.intervalChangeOffset(1)
}

/**
* 关闭菜单
*/
closeMenu() {
this.intervalChangeOffset(-1)
}
}

侧滑菜单的使用 (部分代码)


import { SlideMenuContainer } from '@ohos/library'

@Entry
@Component
struct Index {
@State isOpen: boolean = false
......
/**
* 内容布局
*/
@Builder ContentLayout() {...}

/**
* 菜单布局
*/
@Builder MenuLayout() {...}

build() {
Column() {
SlideMenuContainer({
isOpen: $isOpen,
content: this.ContentLayout(),
menu: this.MenuLayout()
})
}.width('100%').height('100%')
}
}

三方库


其他公司开源的库或者个人开源的库,上架到npm中心供其他开发者下载使用的库。


本项目中使用的是三方库是:lottieETS 一个适用于OpenHarmony的动画库


依赖方式和本地库一样,使用命令安装:


npm install @ohos/lottieETS --save

以下示例只是简单用法,其他方法的使用请查看官方的文档:lottieETS 使用说明


// 导入三方库
import lottie from '@ohos/lottieETS'

@Entry
@Component
struct LottieDemo {
private setting: RenderingContextSettings = new RenderingContextSettings(true)
private crc: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting)
private lottiePath = 'common/lottie/car-loading2-data.json'
private lottieName = 'carName'
@State isPlay: boolean = false

build() {
Column() {
Canvas(this.crc)
.width(300)
.height(300)
.margin({ top: 30, bottom: 50 })
.margin({ top: 30, bottom: 50 })
.onReady(() => {
lottie.loadAnimation({
container: this.crc, // 需要绑定Canvas的CanvasRenderingContext2D
renderer: "canvas", // 目前只支持canvas模式
loop: true, // 是否循环播放
autoplay: false, // 是否自动播放
name: this.lottieName, // 设置lottie动画名称
path: this.lottiePath // 指定lottie动画资源路径
})
})
.onDisAppear(() => {
// Canvas销毁时顺带销毁lottie动画
lottie.destroy(this.lottieName)
})

Button(this.isPlay ? '暂停' : '播放')
.width(150).height(30)
.backgroundColor('#2D9FE5')
.onClick(() => {
this.isPlay = !this.isPlay
this.isPlay ? lottie.play(this.lottieName) : lottie.pause(this.lottieName)
})
}.width('100%').height('100%')
}
}

结尾


此项目中本地库和三方库的依赖都比较简单,难点是自定义组件的使用,还是需要多看官方的文档。最后希望鸿蒙社区越来越多的人加入,创作出更多优秀三方库。


项目地址:https://gitee.com/liangdidi/CallLibraryDemo


每天进步一点点、需要付出努力亿点点。


本文作者:l梁迪迪l


想了解更多关于开源的内容,请访问:​


​51CTO 开源基础软件社区​


​https://ost.51cto.com/#bkwz​


©著作权归作者所有:来自51CTO博客作者开源基础软件社区官方的原创作品,请联系作者获取转载授权,否则将追究法律责任

谈云服务,那不得不谈这个技术_周杰伦本人的博客-多极客编程

谈云服务,那不得不谈这个技术 坚持原创,写好每一篇文章 上篇文章我们说到docker的出现让容器即服务变成了可能并日趋流行,然而docker部署的服务越来越多以后,容器的管理就成为了问题,kubernetes就是用来解决这个问题的。如果没有kubernetes,我相信,容器肯定混乱不堪,并且难以维护。kubernetes可以实现容器的自动部署,自动扩缩容和管理容器。所以如果要谈云服务的,kub

一文带你吃透java中的继承_mb6353c9b8a50b6的博客-多极客编程

继承 继承的概念 面向对象的三大特征:封装性、继承性、多态性。 继承是多态的前提,如果没有继承,就没有多态。 继承关系当中的特点: 1.子类可以拥有父类的“内容”。 2.子类还可以拥有自己的专有内容。 父类也可以叫基类、超类 。 子类也可以叫派生类。 继承的格式 在继承的关系中,“子类就是一个父类”。也就是说,子类可以被当做父类看待。 定义父类的格式:(一个普通的类定义) pub

apache solr 的 spring data (数据)_spring认证的博客-多极客编程

版本 4.3.15Spring Data for Apache Solr项目通过使用Apache Solr搜索引擎将Spring的核心概念应用于解决方案的开发。我们提供了一个“模板”作为存储和查询文档的高级抽象。您可能会注意到与Spring Framework中的MongoDB支持相似之处。项目元数据版本控制:https://github.com/spring-projects/spring-da

[oeasy]python0019_ 打包和解包_struct_pack_unpack_overmind1980的博客-多极客编程

打包和解包回忆上次内容ASCII 由这样几类字符构成英文大写字符英文小写字符数字符号电报时代对于英文、数字的编码使用的是摩斯电码这摩斯电码是3进制的编码方式 长短空怎么演化成ascii这种0101的二进制编码的呢?🤔回到 ASCII 码电报传过来的信号需要记录下来 于是有了电传打字机(tele-typewriter)电传打字机需要统一的编码字母和数字ASCII的第一个商业用途 是作为一个七位电传打

entityutils mapstruct beancopier 数据实体类转换工具 do bo vo dto 附视频_赛先生和泰先生的博客-多极客编程

一、序言 在实际项目开发过程中,总有数据实体类互相转换的需求,DO、BO、VO、DTO等数据模型转换经常发生。今天推荐几个好用的实体类转换工具,分别是EntityUtils MapStruct BeanCopier ,并且给出使用的案例。需要说明的是,本文有配套视频讲解。 下面分别讲解这3种工具的使用。 二、实战编码 (一)EntityUtils 1、引入依赖 学习工具包源代码的朋友,请看这里。

聊一聊装饰者模式_知了一笑的博客-多极客编程

是你,还是你,一切都有你!—— 装饰者模式 一、概述 装饰者模式(Decorator Pattern)允许向一个现有的对象扩展新的功能,同时不改变其结构。主要解决直接继承下因功能的不断横向扩展导致子类膨胀的问题,无需考虑子类的维护。 装饰者模式有4种角色: 抽象构件角色(Component):具体构件类和抽象装饰者类的共同父类。 具体构件角色(ConcreteComponent):抽象构件的

openharmony集成ocr三方库实现文字提取_鸿蒙社区的博客-多极客编程

作者:郭岳峰 一、简介 Tesseract (Apache 2.0 License)是一个可以进行图像OCR识别的C++库,可以跨平台运行 。本样例基于Tesseract 库进行适配,使其可以运行在 OpenAtom OpenHarmony(以下简称“OpenHarmony”)上,并新增N-API接口供上层应用调用,这样上层应用就可以使用Tesseract提供的相关功能。 二、效果展示 动物图片识

【ffh】bearpi-hm-micro开机自启动程序_鸿蒙社区的博客-多极客编程

(目录) 1.前言 项目开发需要联网传输数据,每次开机都要事先运行WiFi程序。于是想办法能不能板子开机的时候就能自动启动运行WiFi程序,不需要每次都命令行输入。 2.开发例程 2.1准备工作 找到启动WiFi的程序,文件目录:/home/nebula/bearpi/bearpi-hm_micro_small/applications/BearPi/BearPi-HM_Micro/samples

openharmony数据转码应用开发实战(下)_鸿蒙社区的博客-多极客编程

背景 对于刚入门OpenHarmony开发的小伙伴来说,如果有一个合适的实战项目来练手,对自身的技术能力提升是非常有帮助的,本文将以一个小项目——数据转码应用,来讲解应用开发全流程。 在《OpenHarmony数据转码应用开发实战(中)》我们讲述了核心解转码工具包的实现,以及UI组件数据绑定,那么接下来将讲述项目的国际化适配、调测和发布。 国际化适配 OpenHarmony应用框架原生提供了非常完

openharmony 3.2 beta多媒体系列——音视频播放框架_鸿蒙社区的博客-多极客编程

作者:巴延兴 一、简介 媒体子系统为开发者提供一套接口,方便开发者使用系统的媒体资源,主要包含音视频开发、相机开发、流媒体开发等模块。每个模块都提供给上层应用对应的接口,本文会对音视频开发中的音视频播放框架做一个详细的介绍。 二、目录 foundation/multimedia/media_standard ├── frameworks #框架代码

#盲盒+码#【ffh】学习设备开发之hi3861-tcpclient-开关灯_鸿蒙社区的博客-多极客编程

(目录) 【本文正在参加「盲盒」+码有奖征文活动】:https://ost.51cto.com/posts/19288 一、前言 学习OpenHarmony南向设备开发中的网络通信,它可以将底层开发板获得的数据传输到上层的服务器,服务器亦可通过网络通信控制底层开发板。 二、TCP简介 传输控制协议(TCP,Transmission Control Protocol)是一种面向连接的、可靠的、基于字

#盲盒+码#【ffh】学习设备开发之hi3861-udp-广播_鸿蒙社区的博客-多极客编程

(目录) 【本文正在参加「盲盒」+码有奖征文活动】:https://ost.51cto.com/posts/19288 一、前言 上文,【FFH】学习设备开发之Hi3861-TCPclient-开关灯留下了的疑惑: 在net_demo.h文件里,testFun是什么?它是怎么选择客户端还是服务端再跳转到tcp_client_test.c文件执行TcpClientTest()函数的呢? 搞不懂别人