HarmonyOSNEXT实战:搭建模块化项目架构，附完整代码仓

• 25-02-16 11:40
• 2265
• 9957

blog.csdn.net

id="article_content" class="article_content clearfix"> id="content_views" class="markdown_views prism-atom-one-dark">

搭建模块化项目架构

环境以及工程目录

**当前适配版本为 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                                   // 测试某个效果的例子


## 产品层目录参考

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=pic%2Fimg.png&pos_id=img-7vObn5Xf-1735605581606)

## 后期迭代各种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（这样可以统一收集问题，方便更多人查阅，另外会也第一时间回复处理）** 

 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">

class="hide-preCode-box">

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74

部分代码如下

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'))

  }
}

 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">