目录：
1、三层架构项目结构
1.0、三层架构简介
1.1、 common层（主要放一些公共的资源等）
1.2、 features层（主要模块定义的组件以及图片等静态资源）
1.3、 products层（主要放主页面层和一些主要的资源，内部快速入门，课程学习，知识地图等都是模块放在features层）
1.4、MVVM模式
2、products主页面
Index.ets
3、快速入门模块
QuickStartPage.ets
Banner.ets
bufferToString.ets
BannerClass.ets
EnablementView.ets
TutorialView.ets
ArticleClass.ets
ArticleDetailPage.ets
4、课程学习模块
CourseLearning.ets
5、知识地图模块
KnowledgeMap.ets
NavBarItem.ets
KnowledgeMapContent.ets
1、三层架构项目结构
这里新建三个文件夹不是模块，来构建鸿蒙项目的三层架构。
1.0、三层架构简介
1.1、 common层（主要放一些公共的资源等）
1.2、 features层（主要模块定义的组件以及图片等静态资源）
1.3、 products层（主要放主页面层和一些主要的资源，内部快速入门，课程学习，知识地图等都是模块放在features层）
1.4、MVVM模式
2、products主页面
这里放置的都是一些跟主页面相关的以及入口文件等。
Index.ets
import {
CourseLearning } from '@ohos/learning';
import {
KnowledgeMap } from '@ohos/map';
import {
QuickStartPage } from '@ohos/quickstart';
@Entry
@Component
struct Index {
@State currentIndex: number = 0;
private tabsController: TabsController = new TabsController();
@Builder
tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {
Column() {
Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon)
.width(24)
.height(24)
Text(title)
.fontFamily('HarmonyHeiTi-Medium')
.fontSize(10)
.fontColor(this.currentIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.60)')
.textAlign(TextAlign.Center)
.lineHeight(14)
.fontWeight(500)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.onClick(() => {
this.currentIndex = targetIndex;
this.tabsController.changeIndex(targetIndex);
})
}
build() {
//控制导航栏方向。根据设计图，导航页签栏位于应用界面的底部，我们可以通过Tabs组件的barPosition参数进行设置，当设置barPosition为BarPosition.End时，页签栏会位于应用界面的下方进行显示
Tabs({
barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
QuickStartPage()
}
.tabBar(this.tabBarBuilder('快速入门', 0, $r('app.media.ic_01_on'), $r('app.media.ic_01_off')))
TabContent() {
CourseLearning()
}
.tabBar(this.tabBarBuilder('课程学习', 1, $r('app.media.ic_02_on'), $r('app.media.ic_02_off')))
TabContent() {
KnowledgeMap()
}
.tabBar(this.tabBarBuilder('知识地图', 2, $r('app.media.ic_03_on'), $r('app.media.ic_03_off')))
}
.vertical(false)
.divider({
strokeWidth: 0.5,
color: '#0D182431'
})
.scrollable(false)
.backgroundColor('#F1F3F5')
.padding({
top: 36, bottom: 28 })
}
}
以前导出模块都是在各模块index.ets文件下导出，现在是products依赖feature模块，在oh-package.json5中如下配置即可引入相关依赖。
在module.json5中进行权限配置（这里其他模块需要的权限都在products中的这个配置文件中配置即可）。
3、快速入门模块
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();
@Builder
quickStartRouter(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 {
//相信大家还记得，完成了Navigation导航首页的内容开发，接下来就要切到Navigation非首页里进行操作，首先，我们在Banner文件中使用@Consume拿到路由栈，这样才能使用相关的功能
@Consume('articlePathStack') articlePathStack: NavPathStack;
@State bannerList: BannerClass[] = [];
aboutToAppear(): void {
//在组件初始化时就加载数据
this.getBannerDataFromJSON()
}
//在Banner中，定义一个方法getBannerDataFromJson，并通过ResourceManager获取当前工程目录下rawfile中的json文件内容。
//转换内容需要两个步骤：
//1、将获取的buffer内容转换为字符串
//2、将字符串转换为页面数据结构
//因为预览器并不支持获取rawfile目录下的文件，所以无法成功获取到保存在rawfile目录下的json文件里的内容。请用真机/模拟器测试，预览器仅支持简单页面的预览
getBannerDataFromJSON() {
getContext(this).resourceManager.getRawFileContent('BannerData.json').then(value => {
this.bannerList = JSON.parse(bufferToString(value)) as BannerClass[];
})
}
clickToDetailPage(item: BannerClass) {
//让我们为每个Banner的图片添加一个点击事件，当点击Banner时，使用路由栈提供的pushPathByName方法，并提供url作为路由参数
this.articlePathStack.pushPathByName('bannerDetailPage', item);
}
build() {
//Swiper组件作为容器可以使轮播图具有轮播的效果
Swiper() {
ForEach(this.bannerList, (item