做网站哪便宜,网站一年费用,网站建设策划书总结,外贸网站建设软件有哪些目录#xff1a; 1、生命周期的执行顺序2、页面数据传递3、图片的读取4、数据的备份和恢复5、轮播图6、页面布局图 1、生命周期的执行顺序
/** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the License);* yo… 目录 1、生命周期的执行顺序2、页面数据传递3、图片的读取4、数据的备份和恢复5、轮播图6、页面布局图 1、生命周期的执行顺序
/** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the License);* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an AS IS BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { AbilityConstant, UIAbility, Want } from kit.AbilityKit;
import { hilog } from kit.PerformanceAnalysisKit;
import { window } from kit.ArkUI;export default class EntryAbility extends UIAbility {windowStage: window.WindowStage | undefined undefined;tag: string EntryAbility;domain: number 0x0000;want: Want | undefined undefined;launchParam: AbilityConstant.LaunchParam | undefined undefined;windowStageEventFunc: (data: window.WindowStageEventType) void (data: window.WindowStageEventType): void {hilog.info(this.domain,Succeeded in enabling the listener for window stage event changes. Data: %{public},JSON.stringify(data) ?? );}onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {this.want want;this.launchParam launchParam;hilog.info(this.domain, this.tag, Ability is onCreate.);}onDestroy() {hilog.info(this.domain, this.tag, Ability is onDestroy.);}onWindowStageCreate(windowStage: window.WindowStage) {this.windowStage windowStage;// Setting Event Subscription for WindowStage (Obtained/Out-of-focus, Visible/Invisible)try {windowStage.on(windowStageEvent, this.windowStageEventFunc);} catch (exception) {hilog.error(this.domain,Failed to enable the listener for window stage event changes. Cause: %{public},JSON.stringify(exception) ?? );}// Main window is created, set main page for this ability// Setting UI LoadingwindowStage.loadContent(pages/LifeCyclePage, (err, data) {if (err.code) {hilog.error(this.domain, testTag, Failed to load the content. Cause: %{public}s,JSON.stringify(err) ?? );return;}hilog.info(this.domain, this.tag, Succeeded in loading the content. Data: %{public}s,JSON.stringify(data) ?? );});}onWindowStageDestroy() {// Releasing UI Resources// Unregisters the WindowStage event for getting/out of focus in onWindowStageDestroy()try {this.windowStage?.off(windowStageEvent);} catch (exception) {hilog.error(this.domain, Failed to disable the listener for window stage event changes. Cause: %{public}s,JSON.stringify(exception));}}onForeground() {// Ability has brought to foregroundhilog.info(this.domain, this.tag, Ability is onForeground.);}onBackground() {// Ability has back to backgroundhilog.info(this.domain, this.tag, Ability is onBackground.);}
}
/** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the License);* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an AS IS BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import Logger from ../common/util/Logger;
import CommonConstants from ../common/constants/CommonConstants;Entry
Component
struct LifeCyclePage {State textColor: Color Color.Black;aboutToAppear() {this.textColor Color.Blue;Logger.info([LifeCyclePage] LifeCyclePage aboutToAppear);}onPageShow() {this.textColor Color.Brown;Logger.info([LifeCyclePage] LifeCyclePage onPageShow);}onPageHide() {Logger.info([LifeCyclePage] LifeCyclePage onPageHide);}onBackPress() {this.textColor Color.Red;Logger.info([LifeCyclePage] LifeCyclePage onBackPress);return false;}aboutToDisappear() {Logger.info([LifeCyclePage] LifeCyclePage aboutToDisappear);}build() {Column() {Text($r(app.string.hello_message)).fontSize(CommonConstants.DEFAULT_FONT_SIZE).fontColor(this.textColor).margin(CommonConstants.DEFAULT_MARGIN).fontWeight(FontWeight.Bold)}.width(CommonConstants.FULL_WIDTH)}
}2、页面数据传递 首页跳转第二页时通过router.pushUrl中的routerParams来传递参数。 第二页可以通过router.getParams().src来拿传递过来的值展示到页面。
3、图片的读取 app.media.banner_pic1读取的就是本地目录media下的该图片。
4、数据的备份和恢复 BackupExtensionAbility模块提供备份恢复服务相关扩展能力为应用提供扩展的备份恢复能力。onBackup(): void; Extension生命周期回调在执行备份数据时回调由开发者提供扩展的备份数据的操作。onRestore(bundleVersion: BundleVersion): void;Extension生命周期回调在执行恢复数据时回调由开发者提供扩展的恢复数据的操作。当需要进行数据备份时可以通过实现onBackup()方法来实现备份逻辑可以通过脚本来实现。当需要进行数据恢复时可以通过实现onRestore()方法来实现恢复逻辑可以通过脚本来实现。
5、轮播图
class BannerClass {id: string ;imageSrc: ResourceStr ;url: string ;constructor(id: string, imageSrc: ResourceStr, url: string) {this.id id;this.imageSrc imageSrc;this.url url;}
}Entry
Component
struct Index {State message: string 快速入门;build() {Column() {Text(this.message).fontSize(24).fontWeight(700).width(100%).textAlign(TextAlign.Start).padding({ left: 16 }).fontFamily(HarmonyHeiTi-Bold).lineHeight(33)Banner()}.width(100%).height(100%).backgroundColor(#F1F3F5)}
}Preview
Component
struct Banner {State bannerList: ArrayBannerClass [new BannerClass(pic0, $r(app.media.banner_pic0),https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527),new BannerClass(pic1, $r(app.media.banner_pic1),https://developer.huawei.com/consumer/cn/),new BannerClass(pic2, $r(app.media.banner_pic2),https://developer.huawei.com/consumer/cn/deveco-studio/),new BannerClass(pic3, $r(app.media.banner_pic3),https://developer.huawei.com/consumer/cn/arkts/),new BannerClass(pic4, $r(app.media.banner_pic4),https://developer.huawei.com/consumer/cn/arkui/),new BannerClass(pic5, $r(app.media.banner_pic5),https://developer.huawei.com/consumer/cn/sdk)];build() {Swiper() {ForEach(this.bannerList, (item: BannerClass, index: number) {Image(item.imageSrc).objectFit(ImageFit.Contain).width(100%).padding({ top: 11, left: 16, right: 16 }).borderRadius(16)}, (item: BannerClass, index: number) item.id)}.autoPlay(true).loop(true).indicator(new DotIndicator().color(#1a000000).selectedColor(#0A59F7))}
}使用数组存储轮播图片遍历展示。 loop设置是否启用循环滑动时调用。autoPlay设置子组件是否自动播放时调用。indicator设置指示器已启用或设置类型样式。
6、页面布局图 class BannerClass {id: string ;imageSrc: ResourceStr ;url: string ;constructor(id: string, imageSrc: ResourceStr, url: string) {this.id id;this.imageSrc imageSrc;this.url url;}
}class ArticleClass {id: string ;imageSrc: ResourceStr ;title: string ;brief: string ;webUrl: string ;constructor(id: string, imageSrc: ResourceStr, title: string, brief: string, webUrl: string) {this.id id;this.imageSrc imageSrc;this.title title;this.brief brief;this.webUrl webUrl;}
}Entry
Component
struct Index {State message: string 快速入门;build() {Column() {Text(this.message).fontSize(24).fontWeight(700).width(100%).textAlign(TextAlign.Start).padding({ left: 16 }).fontFamily(HarmonyHeiTi-Bold).lineHeight(33)Scroll() {Column() {Banner()EnablementView()TutorialView()}}.layoutWeight(1).scrollBar(BarState.Off).align(Alignment.TopStart)}.width(100%).height(100%).backgroundColor(#F1F3F5)}
}Preview
Component
struct Banner {State bannerList: ArrayBannerClass [new BannerClass(pic0, $r(app.media.banner_pic0),https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527),new BannerClass(pic1, $r(app.media.banner_pic1),https://developer.huawei.com/consumer/cn/),new BannerClass(pic2, $r(app.media.banner_pic2),https://developer.huawei.com/consumer/cn/deveco-studio/),new BannerClass(pic3, $r(app.media.banner_pic3),https://developer.huawei.com/consumer/cn/arkts/),new BannerClass(pic4, $r(app.media.banner_pic4),https://developer.huawei.com/consumer/cn/arkui/),new BannerClass(pic5, $r(app.media.banner_pic5),https://developer.huawei.com/consumer/cn/sdk)];build() {Swiper() {ForEach(this.bannerList, (item: BannerClass, index: number) {Image(item.imageSrc).objectFit(ImageFit.Contain).width(100%).padding({ top: 11, left: 16, right: 16 }).borderRadius(16)}, (item: BannerClass, index: number) item.id)}.autoPlay(true).loop(true).indicator(new DotIndicator().color(#1a000000).selectedColor(#0A59F7))}
}Component
struct TutorialItem {Prop tutorialItem: ArticleClass;build() {Row() {Column() {Text(this.tutorialItem.title).height(19).width(100%).fontSize(14).textAlign(TextAlign.Start).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontWeight(400).margin({ top: 4 })Text(this.tutorialItem.brief).height(32).width(100%).fontSize(12).textAlign(TextAlign.Start).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(2).fontWeight(400).fontColor(rgba(0, 0, 0, 0.6)).margin({ top: 5 })}.height(100%).layoutWeight(1).alignItems(HorizontalAlign.Start).margin({ right: 12 })Image(this.tutorialItem.imageSrc).height(64).width(108).objectFit(ImageFit.Cover).borderRadius(16)}.width(100%).height(88).borderRadius(16).backgroundColor(Color.White).padding(12).alignItems(VerticalAlign.Top)}
}Component
struct EnablementItem {Prop enablementItem: ArticleClass;build() {Column() {Image(this.enablementItem.imageSrc).width(100%).objectFit(ImageFit.Cover).height(96).borderRadius({topLeft: 16,topRight: 16})Text(this.enablementItem.title).height(19).width(100%).fontSize(14).textAlign(TextAlign.Start).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontWeight(400).padding({ left: 12, right: 12 }).margin({ top: 8 })Text(this.enablementItem.brief).height(32).width(100%).fontSize(12).textAlign(TextAlign.Start).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(2).fontWeight(400).fontColor(rgba(0, 0, 0, 0.6)).padding({ left: 12, right: 12 }).margin({ top: 2 })}.width(160).height(169).borderRadius(16).backgroundColor(Color.White)}
}Component
struct EnablementView {State enablementList: ArrayArticleClass [new ArticleClass(1, $r(app.media.enablement_pic1), HarmonyOS第一课,基于真实的开发场景提供向导式学习多维度融合课程等内容给开发者提供全新的学习体验。,https://developer.huawei.com/consumer/cn/doc/harmonyos-video-courses/video-tutorials-0000001443535745),new ArticleClass(2, $r(app.media.enablement_pic2), 开发指南,提供系统能力概述、快速入门用于指导开发者进行场景化的开发。指南涉及到的知识点包括必要的背景知识、符合开发者实际开发场景的操作任务流开发流程、开发步骤、调测验证以及常见问题等。,https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guide-0000001630265101),new ArticleClass(3, $r(app.media.enablement_pic3), 最佳实践,针对新发布特性及热点特性提供详细的技术解析和开发最佳实践。,https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/topic-architecture-0000001678045510),new ArticleClass(4, $r(app.media.enablement_pic4), Codelabs,以教学为目的的代码样例及详细的开发指导帮助开发者一步步地完成指定场景的应用开发并掌握相关知识。Codelabs将最新的鸿蒙生态应用开发技术与典型场景结合让开发者快速地掌握开发高质量应用的方法。同时支持互动式操作通过文字、代码和效果联动为开发者带来更佳的学习体验。,https://developer.huawei.com/consumer/cn/doc/harmonyos-codelabs/codelabs-0000001443855957),new ArticleClass(5, $r(app.media.enablement_pic5), Sample,面向不同类型的开发者提供的鸿蒙生态应用开发优秀实践每个Sample Code都是一个可运行的工程为开发者提供实例化的代码参考。,https://developer.huawei.com/consumer/cn/doc/harmonyos-samples/samples-0000001162414961),new ArticleClass(6, $r(app.media.enablement_pic6), API参考,面向开发者提供鸿蒙系统开放接口的全集供开发者了解具体接口使用方法。API参考详细地描述了每个接口的功能、使用限制、参数名、参数类型、参数含义、取值范围、权限、注意事项、错误码及返回值等。,https://developer.huawei.com/consumer/cn/doc/harmonyos-references/development-intro-0000001580026066),new ArticleClass(7, $r(app.media.enablement_pic7), FAQ,开发者常见问题的总结开发者可以通过FAQ更高效地解决常见问题。FAQ会持续刷新及时呈现最新的常见问题。,https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-development-0000001753952202),new ArticleClass(8, $r(app.media.enablement_pic8), 开发者论坛, 和其他应用开发者交流技术、共同进步。,https://developer.huawei.com/consumer/cn/forum/home?all1),];build() {Column() {Text(赋能套件).fontColor(#182431).fontSize(16).fontWeight(500).fontFamily(HarmonyHeiTi-medium).textAlign(TextAlign.Start).padding({ left: 16 }).margin({ bottom: 8.5 })Grid() {ForEach(this.enablementList, (item: ArticleClass) {GridItem() {EnablementItem({ enablementItem: item })}}, (item: ArticleClass) item.id)}.rowsTemplate(1fr).columnsGap(8).scrollBar(BarState.Off).height(169).padding({ top: 2, left: 16, right: 16 })}.margin({ top: 18 }).alignItems(HorizontalAlign.Start)}
}Component
struct TutorialView {State tutorialList: ArrayArticleClass [new ArticleClass(1, $r(app.media.tutorial_pic1), Step1 环境的搭建,本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(2, $r(app.media.tutorial_pic2), Step2 使用Swiper构建运营广告位,Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件当设置了多个子组件后可以对这些子组件进行轮播显示。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(3, $r(app.media.tutorial_pic3), Step3 创建和组合视图,Item定义子组件相关特征。相关组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(4, $r(app.media.tutorial_pic4), Step4 网格和列表组建的使用,网格和列表组件中当Item达到一定数量内容超过屏幕大小时可以自动提供滚动功能适合用于呈现同类数据类型或数据类型集,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(5, $r(app.media.tutorial_pic5), Step5 应用架构设计基础——MVVM模式,ArkUI采取MVVM Model View ViewModel模式将数据与视图绑定在一起更新数据的时候直接更新视图。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(6, $r(app.media.tutorial_pic6), Step6 应用架构设计基础——三层架构,为了更好地适配复杂应用的开发建议采用三层架构的方式对整个应用的功能进行模块化实现高内聚、低耦合开发。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(7, $r(app.media.tutorial_pic7), Step6 ArkWeb页面适配,ArkWeb方舟Web提供了Web组件用于在应用程序中显示Web页面内容为开发者提供页面加载、页面交互、页面调试等能力。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(8, $r(app.media.tutorial_pic8), Step7 数据驱动UI更新, 数据更新的同时会直接驱动UI的改变,xxx),new ArticleClass(9, $r(app.media.tutorial_pic9), Step8 设置组件导航,Navigation组件适用于模块内页面切换一次开发多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验并提供多种标题栏样式来呈现更好的标题和内容联动效果。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(10, $r(app.media.tutorial_pic10), Step9 原生智能AI语音朗读,文本转语音服务提供将文本信息转换为语音并进行播报的能力便于用户与设备进行互动实现实时语音交互文本播报。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(11, $r(app.media.tutorial_pic11), Step10 原生互联分布式流转,流转能力打破设备界限多设备联动使用户应用程序可分可合、可流转实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。,https://developer.huawei.com/consumer/cn/forum/home?all1),new ArticleClass(12, $r(app.media.tutorial_pic12), Step11 一次开发多端部署,一套代码工程一次开发上架多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用实现对不同设备兼容的同时提供跨设备的流转、迁移和协同的分布式体验。,https://developer.huawei.com/consumer/cn/forum/home?all1),];build() {Column() {Text(入门教程).fontColor(#182431).fontSize(16).fontWeight(500).fontFamily(HarmonyHeiTi-medium).textAlign(TextAlign.Start).padding({ left: 16 }).margin({ bottom: 8.5 })List({ space: 12 }) {ForEach(this.tutorialList, (item: ArticleClass) {ListItem() {TutorialItem({ tutorialItem: item })}}, (item: ArticleClass) item.id)}.scrollBar(BarState.Off).padding({ left: 16, right: 16 })}.margin({ top: 18 }).alignItems(HorizontalAlign.Start)}
}页面执行顺序不是自上而下的执行
1号执行入口组件
2号执行预览组件
3号带有Component的State自上而下执行执行到的调用方法里面有Prop组件的再调用。
