介绍
本篇Codelab主要向开发者展示了在Stage模型中，如何调用已经上架的社区库和项目内创建的本地库。效果如图所示：
相关概念
- Navigation：一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。
- Tabs：一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
- Canvas：画布组件，用于自定义绘制图形。
完整示例
源码下载
环境搭建
我们首先需要完成HarmonyOS开发环境搭建，可参照如图步骤进行。
软件要求
- DevEco Studio版本：DevEco Studio 3.1 Release。
- HarmonyOS SDK版本：API version 9。
硬件要求
- 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
- HarmonyOS系统：3.1.0 Developer Release。
环境搭建
- 安装DevEco Studio，详情请参考下载和安装软件。
- 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
- 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
- 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
- 开发者可以参考以下链接，完成设备调试的相关配置：
代码结构解读
本篇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组件实现本地库和社区库页面的切换。
在pages文件夹下新建components文件并在此文件夹下创建两个ArkTS文件，分别命名为inner和outer，至此整体框架搭建完毕。
// 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'))
}
}本地库实现
本地库主要是指未上架到ohpm中心且在项目组内共享使用的库文件，这类库需要开发者在项目中创建并开发新的Library模块，创建步骤如下：
-
通过如下两种方法，在HarmonyOS工程中添加HarmonyOS ohpm块。
-
方法1：鼠标移到工程目录顶部，单击鼠标右键，选择New>Module。
-
方法2：在菜单栏选择File > 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共享模块及相关文件。
// 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') })
}
}本Codelab在本地库中实现了对Button组件的简单封装。
// Buttons.ets
import ButtonViewModel from '../../viewmodel/ButtonsViewModel';
@Component
export struct Buttons {
@Prop buttonText: string = '';
@Prop stateEffect: boolean = false;
@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窗口中，执行如下命令进行安装，并会在oh-package.json5中自动添加依赖。
ohpm install ../library --save方式二：在工程的oh-package.json5中设置HarmonyOS 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中心供其他开发者下载使用的库，调用这类库的方法如下：
通过如下两种方式设置HarmonyOS ohpm三方包依赖信息（下面步骤以@ohos/lottie三方库为例，其他库替换对应库的名字及版本号即可）：
- 方式一：在Terminal窗口中，执行如下命令安装HarmonyOS ohpm三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。
ohpm install @ohos/lottie --save -
方式二：在工程的oh-package.json5中设置HarmonyOS ohpm三方包依赖，配置示例如下：
"dependencies": { "@ohos/lottie": "^2.0.0" }依赖设置完成后，需要执行ohpm install命令安装依赖包，依赖包会存储在工程的oh_modules目录下。
ohpm install
在完成上述步骤后，我们继续完成outer页面的开发，在outer页面中我们通过import的方式引入配置的社区库，并实现对社区库动画的调用。
至此本篇Codelab的开发已经完成。
// 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(() => {
if (this.animateItem !== null) {
this.animateItem.destroy();
this.animateItem = null;
}
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的学习，并了解到以下知识点：
-
如何创建及调用本地三方库。
-
如何调用社区三方库。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
