搭建模块化项目架构
环境以及工程目录
**当前适配版本为 5.0.0(12)**
## 环境
- [点击下载最新IDE](https://developer.huawei.com/consumer/cn/download/)
- DevEco Studio 5.0.1 Beta3
- Build Version: 5.0.5.200, built on November 9, 2024
- Harmony OS Api 5.0.0(12)
- hvigor 5.0.0
### 工程目录
commons # 公共能力层，包括公共UI组件、数据管理、通信和工具库等
|---network // 网络相关
|---uicomponents // 公共组件相关
|---utils // 基础工具类、基础资源相关
features # 基础特性层，包含独立的业务模块，如启动页、登录模块等
|---home // 首页
| |---bean // 数据模型
| |---components // 自定义组件
| |---constants // 常量
| |---model // 业务模型
| |---service // 业务服务/接口
| |---views // 视图层
| |---utils // 此模块工具类 需要再加
|---login // 登录
|---question // 问答
|---scheme // 体系
|---mine // 我的
|---login // 登录
libs # 本地三方依赖库
products # 产品定制层，作为不同设备或场景应用入口，例如phone、tv等
|---phone // 手机
| |---app // 全局初始化配置
| |---bean // 数据模型
| |---components // 自定义组件
| |---constants // 常量
| |---model // 业务模型
| |---pages // 页面
| |---service // 业务服务/接口
| |---test // 测试某个效果的例子
## 产品层目录参考
## 后期迭代各种APP分支规则,(全是仿照)
- 基于 master分支开发，APP都在**case**分支下
- 新建APP命名规则：case/APP名字。
- 目前分支：
|---case/wanandroid 打造鸿蒙版玩安卓APP，参考项目：https://github.com/goweii/WanAndroid
|---case/
## 开源协议
本项目基于 [Apache License](https://gitee.com/jiaojiaoone/explore-harmony-next/blob/master/LICENSE.txt) ，请自由地享受和参与开源。
## 源码
- gitee：https://gitee.com/jiaojiaoone/explore-harmony-next.git
- github：https://github.com/JasonYinH/ExploreHarmonyNext.git
## 博客地址
- csdn：https://blog.csdn.net/qq_40533422?type=blog
- juejin: https://juejin.cn/user/1151943919282350/posts
## 交流
使用有疑问或建议， **请提交issue（这样可以统一收集问题，方便更多人查阅，另外会也第一时间回复处理）**
部分代码如下
import { Route, ZRouter } from "@hzw/zrouter"
import { AppUtil, ToastUtil } from "@pura/harmony-utils"
import { HomeView } from "home"
import { MineView } from "mine"
import { QuestionView } from "question"
import { SchemeView } from "scheme"
import { TabModel } from "uicomponents"
import { CommonConst, NavName } from "utils"
import { tabBarModel } from "../model/MainModel"
/**
* Author:J
* Describe: 主页
*/
// 定义一个状态变量来记录上次点击返回键的时间
let lastBackPressedTime = 0
@Preview
@ComponentV2
@Route({ name: NavName.MAIN_PAGE })
export struct MainPage {
@Local selectedIndex: number = 0 // 当前选中的tab下标
@Local msgCount: number = 9 // 消息数量
//存储页面状态
@Local tabContentArr: boolean[] = [true, false, false, false]
aboutToAppear(): void {
console.log(`xxx ： ---` + 'MainPage')
console.log(`xxx获取参数 ： ---` + ZRouter.getInstance().getParamByName(NavName.MAIN_PAGE))
}
build() {
NavDestination() {
Stack() {
Tabs({ index: this.selectedIndex, barPosition: BarPosition.End }) {
ForEach(tabBarModel, (item: TabModel, index: number) => {
TabContent() {
if (this.selectedIndex === index || this.tabContentArr[index]) {
this.tabContentBuilder(item)
}
}.tabBar(this.tabBottom(tabBarModel[item.index], item.index))
}, (item: string) => item)
}.barWidth(CommonConst.FULL_PARENT)
.barHeight(56) //设置导航栏高度
.scrollable(false) // 禁止左右滑动
.onChange((index: number) => {
this.selectedIndex = index;
this.tabContentArr[index] = true;
})
}.width(CommonConst.FULL_PARENT)
.height(CommonConst.FULL_PARENT)
}.hideTitleBar(true)
.width(CommonConst.FULL_PARENT)
.height(CommonConst.FULL_PARENT)
.onBackPressed(() => {
const currentTime = new Date().getTime()
const timeDifference = currentTime - lastBackPressedTime
if (timeDifference < 2000) { // 2秒内再次点击
//退出应用
AppUtil.exit()
} else {
// 提示用户
ToastUtil.showToast('再按一次退出应用')
lastBackPressedTime = currentTime
}
return true
})
}
@Builder
tabContentBuilder(item: TabModel) {
if (item.index == 0) {
// 首页
HomeView()
} else if (item.index == 1) {
// 问答
QuestionView()
} else if (item.index == 2) {
// 体系
SchemeView()
} else if (item.index == 3) {
// 我的
MineView()
}
}
@Builder
tabBottom(item: TabModel, index: number) {
Column() {
Divider().color($r('app.color.color_F0F0F0'))
Badge({
count: index != 1 ? 0 : this.msgCount,
position: BadgePosition.RightTop,
style: {
fontSize: 8,
badgeSize: 13
}
}) {
Image(item.selectImage /*this.selectedIndex == index ? item.selectImage : item.unSelectImage*/)
.colorBlend(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
.height(24)
.margin(4)
}.margin({ top: 4 })
Text(item.title)
.width(CommonConst.FULL_PARENT)
.fontSize(14)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontColor(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
.margin({ bottom: 4 })
}
.width(CommonConst.FULL_PARENT)
.height(CommonConst.FULL_PARENT)
.backgroundColor($r('app.color.white'))
}
}
相关文章如下
- 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 模块化基础篇》
- 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建基础特性层》
- 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建公共能力层》
想要完整代码点击下方代码仓查看
## 源码
- gitee：https://gitee.com/jiaojiaoone/explore-harmony-next.git
- github：https://github.com/JasonYinH/ExploreHarmonyNext.git
## 博客地址
- csdn：https://blog.csdn.net/qq_40533422?type=blog
- juejin: https://juejin.cn/user/1151943919282350/posts