大家好!我是黑臂麒麟(起名原因:一个出生全右臂自带纹身的高质量程序员😏),也是一位6+(约2个半坤年)的前端;
学习如像练武功一样,理论和实践要相结合,学一门只是也是一样;
这里会用两周的时间把所学的常用ArkUI基础的常用组件输出在网;
如需深究可前往高级ArkTS系列课程;
望对学习鸿蒙小伙伴有所帮助;
前言
刚刷完codelabs的引入第三方库的案例,目前引入方式是使用根据npm
改造的鸿蒙自己ohpm
。目前只能使用OpenHarmony
三方库中心。三方库中心的目前不多。还处于开始阶段,后续开发后需要更多开发者贡献。现在常用的三方库可以分为UI、动画、网络、图片、多媒体、数据存储、安全、工具等。
这里记录两种方式:
- 创建本地项目库方法
- 使用第三方库方法,这里我们使用
@ohos/lottie
,@ohos/axios
常用库;
创建本地库
本地库主要是指未上架到ohpm
中心且在项目组内共享使用的库文件,这类库需要开发者在项目中创建并开发新的Library
模块,创建步骤如下:
-
鼠标移到工程目录顶部,单击鼠标右键,选择New>Module。
-
在
Choose Your Ability Template
界面中,选择Static Library
,并单击Next。 -
在
Configure the New Module
界面中,设置新添加的模块信息,设置完成后,单击Finish完成创建。- Module name:新增模块的名称。
- Language:选择开发HarmonyOS ohpm包的语言。
- Device type:选择HarmonyOS ohpm包支持的设备类型。
- Enable Native:是否创建一个用于调用C++代码的HarmonyOS ohpm共享模块。
-
创建完成后,会在工程目录中生成HarmonyOS ohpm共享模块及相关文件。
引入本地库
两种方式:
- 方式一:在
Terminal
窗口中,执行如下命令进行安装,并会在oh-package.json5
中自动添加依赖。
ohpm install ../library
- 方式二:在工程的
oh-package.json5
中设置HarmonyOS ohpm三方包依赖,配置示例如下:
"dependencies": {
"@ohos/library": "file:../library"
}
手动编写依赖设置完成后,执行ohpm install
命令安装依赖包,依赖包会存储在工程的oh_modules
目录下,这个跟我们前端拉新项目下来安装依赖包相似
下面是本地库NewButton代码:
import ButtonViewModel from '../../viewmodel/ButtonsViewModel';
@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('16vp')
.fontColor(this.fontColor || '#FFFFFF')
}
.width('100vp')
.height('35vp')
.backgroundColor(ButtonViewModel.fetchBackgroundColor(this.buttonType))
}
}
}
}
在完成上述步骤后,我们继续完成
inner
页面的开发,在inner页面中我们通过import的方式引入开发的本地库,并通过循环传入不同的参数展示不同的button。
import { Buttons } from '@ohos/library';
import InnerViewModel from '../viewmodel/InnerViewModel';
import { ButtonList } from '../viewModel/ButtonList';
@Component export struct Inner {
@State buttonList: ButtonList[] = InnerViewModel.getButtonListData();
scroller: Scroller = new Scroller();
build(){
Scroll(this.scroller) {
Column({ space: 12 }) {
ForEach(this.buttonList, (item: ButtonList) => {
Column() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.SpaceBetween,
alignItems: ItemAlign.Start
}){
...
Column() {
Buttons({
buttonText: item.buttonText,
buttonShape: item.buttonShape,
buttonType: item.buttonType,
stateEffect: item.stateEffect,
fontColor: item.fontColor
})
.alignSelf(ItemAlign.Center)
.margin({ bottom: '21vp' })
}
...
}
})
}
...
}
...
}
}
社区库调用
社区库是指已经由贡献者上架到ohpm
中心供其他开发者下载使用的库,调用这类库的方法如下:
通过如下两种方式设置HarmonyOS ohpm三方包依赖信息,这里推荐第一种。前端也是常用第一种方式。(下面步骤以@ohos/lottie
三方库为例,其他库替换对应库的名字及版本号即可):
- 方式一:在Terminal窗口中,执行如下命令安装HarmonyOS ohpm三方包,DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
ohpm install @ohos/lottie
- 方式二:在工程的
oh-package.json5
中设置HarmonyOS ohpm三方包依赖,配置示例如下:
"dependencies": {
"@ohos/lottie": "^2.0.0"
}
跟上面一样,需要执行ohpm install
命令安装依赖包,依赖包会存储在工程的oh_modules
目录下。
在完成上述步骤后,我们继续完成outer页面的开发,在outer页面中我们通过import的方式引入配置的社区库,并实现对社区库动画的调用。
import lottie, { AnimationItem } from '@ohos/lottie';
import Logger from '../common/utils/log/Logger';
@Component
export struct Outer {
private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
private renderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
private animateName: string = 'data';
private animateItem: AnimationItem | null = null;
@State canvasTitle: string | undefined = undefined;
build(){
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.SpaceBetween
}){
Column(){
Canvas(this.renderingContext)
.width('100%')
.aspectRatio(1.76)
.backgroundImage($r('app.media.canvasBg'))
.backgroundImageSize(ImageSize.Cover)
.onDisAppear(() => {
lottie.destroy(this.animateName);
})
Text(this.canvasTitle)
.width('100%')
.fontSize('14fp')
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.fontColor('#182431')
.opacity(0.4)
}
.margin({
top: '10vp',
left: '10vp',
right: '10vp'
})
Column({ space: 12 }){
Button(){
Text('加载动画')
.fontSize('16fp')
.fontColor('#007DFF')
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('41vp')
.backgroundColor('#dedbdb')
.onClick(() => {
if (this.animateItem != null) {
this.animateItem.destroy();
this.animateItem = null;
}
this.canvasTitle = '加载动画';
this.animateItem = lottie.loadAnimation({
container: this.renderingContext,
renderer: 'canvas',
loop: 10,
autoplay: true,
name: this.animateName,
path: 'common/lottie/data.json'
})
})
Button() {
Text('结束并回到第0帧')
.fontSize('16fp')
.fontColor('#007DFF')
.fontWeight(FontWeight.Bold)
}
.width('100%')
.height('40vp')
.backgroundColor('#dedbdb')
.onClick(() => {
if (this.animateItem === null) return;
this.canvasTitle = '结束并回到第0帧';
this.animateItem.goToAndPlay(0, true);
})
Flex({ justifyContent: FlexAlign.SpaceBetween }){
Button(){
Text('播放')
.fontSize('16fp')
.fontColor('#007DFF')
.fontWeight(FontWeight.Bold)
}
.width('49%')
.height('40vp')
.backgroundColor('#dedbdb')
.onClick( () => {
if (this.animateItem === null) return;
this.canvasTitle = '播放'
lottie.play();
})
Button() {
Text('暂停')
.fontSize('16fp')
.fontColor('#007DFF')
.fontWeight(FontWeight.Bold)
}
.width('49%')
.height('40vp')
.backgroundColor('#dedbdb')
.onClick(() => {
if (this.animateItem === null) return;
this.canvasTitle = '暂停';
lottie.pause();
})
}
}
.padding({
left: '23vp',
right: '23vp',
bottom: '41vp'
})
}
.height('100%')
}
}
总结
这里介绍了本地库使用、远程第三方库引入;
本地库或者远程第三方库,都需要ohpm引入到oh-package.json5
中才能使用;
我是前端,喜欢用ohpm直接导入。如需要手动导入可以选择第二种;文章来源:https://www.toymoban.com/news/detail-855866.html
结语
本篇文章的内容结束了。文章有不对或不完整的地方,望多指点;
望更多小伙伴们加入harmonyOS开发大家庭,壮大生态圈,让鸿蒙更好,让国产手机(物联网)系统更强大。
如对你学习有所帮助,希望可爱你动动小手,关注、点赞、收藏;文章来源地址https://www.toymoban.com/news/detail-855866.html
到了这里,关于HarmonyOS基础(七)- 详细剖析鸿蒙引入第三方库案例篇(1)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!