企业官网建设流程全解析

src/main/ets/pages/Index.ets

import { 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.ets

import { 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.ets

import { 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.ets

import { 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.ets

import { 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/多项资源

MVVM：Model, View, ViewModel

数据结构和数据构成的模型和视图

关联数据获取的页面的生命周期

应用架构设计基础——MVVM模式-HarmonyOS应用开发快速入门-Codelabs-华为开发者联盟