平板电脑可以做淘宝网站吗,网站的后台地址,WordPress情侣网站,网站域名续费一年多少钱介绍
本篇Codelab主要向开发者展示了在Stage模型中#xff0c;如何调用已经上架到[三方库中心]的社区库和项目内创建的本地库。效果图如下#xff1a; 相关概念
[Navigation]#xff1a;一般作为Page页面的根容器#xff0c;通过属性设置来展示页面的标题、工具栏、菜单。… 介绍
本篇Codelab主要向开发者展示了在Stage模型中如何调用已经上架到[三方库中心]的社区库和项目内创建的本地库。效果图如下 相关概念
[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开发板为例参照以下步骤进行 [获取OpenHarmony系统版本]标准系统解决方案二进制。以3.2 Release版本为例 搭建烧录环境。 [完成DevEco Device Tool的安装][完成RK3568开发板的烧录] 搭建开发环境。 开始前请参考[工具准备]完成DevEco Studio的安装和开发环境配置。开发环境配置完成后请参考[使用工程向导]创建工程模板选择“Empty Ability”。工程创建完成后选择使用[真机进行调测]。HarmonyOS鸿蒙开发文档参考gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md可点击或复制前往。 代码结构解读
本篇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模块创建步骤如下 通过如下两种方法在OpenHarmony工程中添加OpenHarmony ohpm块。 方法1鼠标移到工程目录顶部单击鼠标右键选择NewModule。方法2在菜单栏选择File New Module。 在Choose Your Ability Template界面中选择Static Library并单击Next。 在Configure the New Module界面中设置新添加的模块信息设置完成后单击Finish完成创建。 Module name新增模块的名称。Language选择开发OpenHarmony ohpm包的语言。Device type选择OpenHarmony ohpm包支持的设备类型。Enable Native是否创建一个用于调用C代码的OpenHarmony ohpm共享模块。 创建完成后会在工程目录中生成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 areaColumn() {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 areaColumn({ 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星河版开发学习文档》 2、鸿蒙ArkUI←《鸿蒙NEXT星河版开发学习文档》 3、鸿蒙进阶技术←《鸿蒙NEXT星河版开发学习文档》 4、鸿蒙就业高级技能←《鸿蒙NEXT星河版开发学习文档》 5、鸿蒙多媒体技术←《鸿蒙NEXT星河版开发学习文档》 6、鸿蒙南向驱动开发←《鸿蒙NEXT星河版开发学习文档》 7、鸿蒙南向内核设备开发←《鸿蒙NEXT星河版开发学习文档》 8、鸿蒙系统裁剪与移植←《鸿蒙NEXT星河版开发学习文档》
