src/main/ets/pages/Index.etsimport { TutorialView } from ../view/TutorialView; import { Banner } from ../view/Banner; import { EnablementView } from ../view/EnablementView; 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(30) // 自上向下的行高 Scroll() { Column() { Banner() EnablementView() TutorialView() } } .layoutWeight(1) .scrollBar(BarState.Off) .align(Alignment.TopStart) } .height(100%) // 对象的容器的相对高度 .width(100%) .backgroundColor(#F1F3F5) // 背景色 } }src/main/ets/util/BufferUtil.etsimport { util } from kit.ArkTS; export function bufferToString(buffer: Uint8Array): string { let textDecoder util.TextDecoder.create(utf-8, { ignoreBOM: true }); let resultPut textDecoder.decodeToString(buffer); return resultPut; }src/main/ets/view/Banner.etsimport { BannerClass } from ../model/BannerClass; import { bufferToString } from ../util/BufferUtil; Preview Component export struct Banner { State bannerList: BannerClass[] []; aboutToAppear(): void { // build之前执行 this.getBannerDataFromJSON(); } /* 获取原生文件内容: */ getBannerDataFromJSON() { getContext(this).resourceManager.getRawFileContent(BannerData.json).then(value { let res: string bufferToString(value); this.bannerList JSON.parse(res) as BannerClass[]; // this.bannerList JSON.parse(bufferToString(value)) as BannerClass[]; }) } build() { Swiper() { // 滑动和轮播的对象 ForEach(this.bannerList, (item: BannerClass, index: number) { Image($r(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) // 选中的颜色 ) } }src/main/ets/view/EnablementView.etsimport { ArticleClass } from ../model/ArticleClass; import { bufferToString } from ../util/BufferUtil; // Preview Component struct EnablementItem { Prop enablementItem: ArticleClass; // 接收数据 build() { Column() { Image($r(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.title) .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 export struct EnablementView{ State enablementList: ArticleClass[] []; aboutToAppear(): void { // build之前执行 this.getBannerDataFromJSON(); } /* 获取原生文件内容: */ getBannerDataFromJSON() { getContext(this).resourceManager.getRawFileContent(EnablementData.json).then(value { let res: string bufferToString(value); this.enablementList JSON.parse(res) as ArticleClass[]; // this.bannerList JSON.parse(bufferToString(value)) as BannerClass[]; }) } 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) // 左侧水平对齐 } }src/main/ets/view/TutorialView.etsimport { ArticleClass } from ../model/ArticleClass; import { bufferToString } from ../util/BufferUtil; Preview 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($r(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 export struct TutorialView{ State tutorialList: ArticleClass[] []; aboutToAppear(): void { // build之前执行 this.getBannerDataFromJSON(); } /* 获取原生文件内容: */ getBannerDataFromJSON() { getContext(this).resourceManager.getRawFileContent(EnablementData.json).then(value { let res: string bufferToString(value); this.tutorialList JSON.parse(res) as ArticleClass[]; // this.bannerList JSON.parse(bufferToString(value)) as BannerClass[]; }) } 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) } }src/main/resources/rawfile/多项资源MVVMModel, View, ViewModel数据结构和数据构成的模型和视图关联数据获取的页面的生命周期应用架构设计基础——MVVM模式-HarmonyOS应用开发快速入门-Codelabs-华为开发者联盟
HarmonyOS应用开发快速入门(5)：指令/export导出，指令/import导入，MVVM，页面的生命周期，resourceManager库，JSON库，HAP签名【重发】
src/main/ets/pages/Index.etsimport { TutorialView } from ../view/TutorialView; import { Banner } from ../view/Banner; import { EnablementView } from ../view/EnablementView; 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(30) // 自上向下的行高 Scroll() { Column() { Banner() EnablementView() TutorialView() } } .layoutWeight(1) .scrollBar(BarState.Off) .align(Alignment.TopStart) } .height(100%) // 对象的容器的相对高度 .width(100%) .backgroundColor(#F1F3F5) // 背景色 } }src/main/ets/util/BufferUtil.etsimport { util } from kit.ArkTS; export function bufferToString(buffer: Uint8Array): string { let textDecoder util.TextDecoder.create(utf-8, { ignoreBOM: true }); let resultPut textDecoder.decodeToString(buffer); return resultPut; }src/main/ets/view/Banner.etsimport { BannerClass } from ../model/BannerClass; import { bufferToString } from ../util/BufferUtil; Preview Component export struct Banner { State bannerList: BannerClass[] []; aboutToAppear(): void { // build之前执行 this.getBannerDataFromJSON(); } /* 获取原生文件内容: */ getBannerDataFromJSON() { getContext(this).resourceManager.getRawFileContent(BannerData.json).then(value { let res: string bufferToString(value); this.bannerList JSON.parse(res) as BannerClass[]; // this.bannerList JSON.parse(bufferToString(value)) as BannerClass[]; }) } build() { Swiper() { // 滑动和轮播的对象 ForEach(this.bannerList, (item: BannerClass, index: number) { Image($r(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) // 选中的颜色 ) } }src/main/ets/view/EnablementView.etsimport { ArticleClass } from ../model/ArticleClass; import { bufferToString } from ../util/BufferUtil; // Preview Component struct EnablementItem { Prop enablementItem: ArticleClass; // 接收数据 build() { Column() { Image($r(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.title) .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 export struct EnablementView{ State enablementList: ArticleClass[] []; aboutToAppear(): void { // build之前执行 this.getBannerDataFromJSON(); } /* 获取原生文件内容: */ getBannerDataFromJSON() { getContext(this).resourceManager.getRawFileContent(EnablementData.json).then(value { let res: string bufferToString(value); this.enablementList JSON.parse(res) as ArticleClass[]; // this.bannerList JSON.parse(bufferToString(value)) as BannerClass[]; }) } 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) // 左侧水平对齐 } }src/main/ets/view/TutorialView.etsimport { ArticleClass } from ../model/ArticleClass; import { bufferToString } from ../util/BufferUtil; Preview 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($r(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 export struct TutorialView{ State tutorialList: ArticleClass[] []; aboutToAppear(): void { // build之前执行 this.getBannerDataFromJSON(); } /* 获取原生文件内容: */ getBannerDataFromJSON() { getContext(this).resourceManager.getRawFileContent(EnablementData.json).then(value { let res: string bufferToString(value); this.tutorialList JSON.parse(res) as ArticleClass[]; // this.bannerList JSON.parse(bufferToString(value)) as BannerClass[]; }) } 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) } }src/main/resources/rawfile/多项资源MVVMModel, View, ViewModel数据结构和数据构成的模型和视图关联数据获取的页面的生命周期应用架构设计基础——MVVM模式-HarmonyOS应用开发快速入门-Codelabs-华为开发者联盟
