南京做网站优化的企业传智播客php网站开发实例教程

1、三层架构项目结构

这里新建三个文件夹不是模块，来构建鸿蒙项目的三层架构。

• common层（主要放一些公共的资源等）

• features层（主要模块定义的组件以及图片等静态资源）
  
• products层（主要放主页面层和一些主要的资源，内部快速入门，课程学习，知识地图等都是模块放在features层）
  

2、快速入门模块

QuickStartPage.ets：

import { TutorialView } from '../view/TutorialView';
import { ArticleClass } from '../model/ArticleClass'
import { ArticleDetailPage } from './ArticleDetailPage';
import { Banner } from '../view/Banner';
import { EnablementView } from '../view/EnablementView';
import { BannerDetailPage } from './BannerDetailPage';
import { BannerClass } from '../model/BannerClass';@Component
export struct QuickStartPage {@State message: string = '快速入门';@Provide('articlePathStack') articlePathStack: NavPathStack = new NavPathStack();@BuilderquickStartRouter(name: string, param?: ArticleClass | BannerClass) {if (name === 'articleDetail') {ArticleDetailPage()} else if (name === 'bannerDetailPage') {BannerDetailPage()}}build() {Navigation(this.articlePathStack) {Column() {Text(this.message).fontSize(24).fontWeight(700).width('100%').textAlign(TextAlign.Start).padding({ left: 16 }).fontFamily('HarmonyHeiTi-Bold').lineHeight(33)//此处采用Scroll作为外层容器，是由于其内部内容很有可能会超过屏幕高度，为保证内容显示，可以采用Scroll组件来进行滚动显示。scrollBar设置为BarState.Off，表示关闭滚动时的滚动条显示Scroll() {Column() {//轮播图广告组件Banner()//赋能组件EnablementView()//入门教程TutorialView()}}.layoutWeight(1).scrollBar(BarState.Off).align(Alignment.TopStart)}.width('100%').height('100%').backgroundColor('#F1F3F5')}.navDestination(this.quickStartRouter).hideTitleBar(true).mode(NavigationMode.Stack)}
}

Banner.ets：

import { BannerClass } from '../model/BannerClass';
import { bufferToString } from '../util/BufferUtil';@Component
export struct Banner {@Consume('articlePathStack') articlePathStack: NavPathStack;@State bannerList: BannerClass[] = [];aboutToAppear(): void {this.getBannerDataFromJSON()}//通过数据文件BannerData.json读取然后构造bannerList轮播图数组数据getBannerDataFromJSON() {getContext(this).resourceManager.getRawFileContent('BannerData.json').then(value => {this.bannerList = JSON.parse(bufferToString(value)) as BannerClass[];})}clickToDetailPage(item: BannerClass) {this.articlePathStack.pushPathByName('bannerDetailPage', item);}build() {//Swiper组件作为容器可以使轮播图具有轮播的效果Swiper() {ForEach(this.bannerList, (item: BannerClass) => {Image($r(item.imageSrc)).objectFit(ImageFit.Contain) //保持宽高比进行缩小或者放大.width('100%').borderRadius(16).padding({ top: 11, left: 16, right: 16 }).onClick(() => {this.clickToDetailPage(item)})}, (item: BannerClass) => item.id)}//autoPlay控制是否自动轮播子组件，loop属性控制是否循环播放，indicator属性自定义导航点的位置和样式.autoPlay(true).loop(true).indicator(new DotIndicator().color('#1a000000').selectedColor('#0A59F7'))}
}

BannerClass.ets：

export class BannerClass {id: string = '';imageSrc: string = '';url: string = ''constructor(id: string, imageSrc: string, url: string) {this.id = idthis.imageSrc = imageSrc;this.url = url;}
}

EnablementView.ets:

import { ArticleClass } from '../model/ArticleClass';
import { bufferToString } from '../util/BufferUtil';@Component
export struct EnablementView {@State enablementList: ArticleClass[] = [];@Consume('articlePathStack') articlePathStack: NavPathStack;aboutToAppear(): void {this.getEnablementDataFromJSON()}getEnablementDataFromJSON() {getContext(this).resourceManager.getRawFileContent('EnablementData.json').then(value => {this.enablementList = JSON.parse(bufferToString(value)) as ArticleClass[];})}build() {Column() {Text('赋能套件').fontColor('#182431').fontSize(16).fontWeight(500).fontFamily('HarmonyHeiTi-medium').textAlign(TextAlign.Start).padding({ left: 16, right: 16 }).width('100%')Grid() {ForEach(this.enablementList, (item: ArticleClass) => {GridItem() {EnablementItem({ enablementItem: item }).onClick(() => {this.articlePathStack.pushPathByName('articleDetail', item)})}}, (item: ArticleClass) => item.id)}.rowsTemplate('1fr').columnsGap(8).scrollBar(BarState.Off).height(169).padding({ top: 2, left: 16, right: 16 })}.margin({ top: 18 })}
}@Component
export struct EnablementItem {@Prop enablementItem: ArticleClass;build() {Column() {Image($r(this.enablementItem.imageSrc)).width('100%')//设置填充效果为cover模式，即保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界.objectFit(ImageFit.Cover).height(96).borderRadius({topLeft: 16,topRight: 16})Text(this.enablementItem.title).height(19).width('100%').fontSize(14).textAlign(TextAlign.Start)//textOverFlow属性设置文本超长时的显示方式，在这里我们设置它的值为Ellipsis，表示超长时使用省略号替代.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)}
}

TutorialView.ets:

import { bufferToString } from '../util/BufferUtil';
import { ArticleClass } from '../model/ArticleClass';@Component
export struct TutorialView {@State tutorialList: ArticleClass[] = [];@Consume('articlePathStack') articlePathStack: NavPathStack;aboutToAppear(): void {this.getTutorialDataFromJSON()}getTutorialDataFromJSON() {getContext(this).resourceManager.getRawFileContent('TutorialData.json').then(value => {this.tutorialList = JSON.parse(bufferToString(value)) as ArticleClass[];})}build() {Column() {Text('入门教程').fontColor('#182431').fontSize(16).fontWeight(500).fontFamily('HarmonyHeiTi-medium').textAlign(TextAlign.Start).padding({ left: 16, right: 16 }).width('100%')List({ space: 12 }) {ForEach(this.tutorialList, (item: ArticleClass) => {ListItem() {TutorialItem({ tutorialItem: item }).onClick(() => {this.articlePathStack.pushPathByName('articleDetail', item)})}}, (item: ArticleClass) => item.id)}.scrollBar(BarState.Off).padding({ left: 16, right: 16 })}.margin({ top: 18 }).alignItems(HorizontalAlign.Start)}
}@Component
export 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，表示它们在任意尺寸的设备下自适应占满剩余空间.layoutWeight(1).alignItems(HorizontalAlign.Start).margin({ right: 12 })Image($r(this.tutorialItem.imageSrc)).objectFit(ImageFit.Cover).height(64).width(108).borderRadius(16)}.width('100%').height(88).borderRadius(16).backgroundColor(Color.White).padding(12).alignItems(VerticalAlign.Top)}
}

ArticleClass.ets:

export class ArticleClass {id: string = '';imageSrc: string = '';title: string = '';brief: string = '';webUrl: string = '';constructor(id: string, imageSrc: string, title: string, brief: string, webUrl: string) {this.id = id;this.imageSrc = imageSrc;this.title = title;this.brief = brief;this.webUrl = webUrl;}
} 

3、课程学习模块

4、知识地图模块