一. 模块之间的依赖 ------ 详细解析官网购物应用优秀案例(鸿蒙开发)持续更新

niuwa冲

已于 2023-12-21 16:24:22 修改

阅读量1k

点赞数 16

分类专栏：鸿蒙开发文章标签：前端 javascript 鸿蒙

于 2023-12-21 00:48:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44957983/article/details/135119400

版权

鸿蒙开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了项目目录结构，重点阐述了主模块phone如何依赖公共静态模块common，包括如何通过module.json5确定主模块，创建公共模块，以及如何在phone模块中安装和导入common模块。同时提及了ohpm工具的使用和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 项目目录简介

├──**common** // 公共能力层
│ ├──components
│ │ ├──CommodityList.ets // 商品列表组件
│ │ ├──CounterProduct.ets // 数量加减组件
│ │ └──EmptyComponent.ets // 无数据显示组件
│ ├──constants
│ │ ├──BreakpointConstants.ets // 断点常量类
│ │ ├──GridConstants.ets // 栅格常量类
│ │ └──StyleConstants.ets // 样式常量类
│ ├──utils
│ │ ├──BreakpointSystem.ets // 断点工具类
│ │ ├──CommonDataSource.ets // 数据封装类
│ │ ├──LocalDataManager.ets // 数据操作管理类
│ │ ├──Logger.ets.ets // 日志工具类
│ │ └──Utils.ets // 方法工具类
│ └──viewmodel
│ ├──CommodityModel.ets // 商品数据实体类
│ ├──OrderModel.ets // 订单数据实体类
│ ├──ProductModel.ets // 购物车商品数据实体类
│ └──ShopData.ets // 商品应用数据
├──**features** // 功能模块层
│ ├──commoditydetail // 商品详情内容区
│ │ ├──components
│ │ │ ├──CapsuleGroupButton.ets // 自定义按钮组件
│ │ │ ├──CommodityDetail.ets // 商品详情组件
│ │ │ └──SpecificationDialog.ets // 商品规格弹框
│ │ ├──constants
│ │ │ └──CommodityConstants.ets // 商品详情区常量类
│ │ └──viewmodel
│ │ ├──CommodityDetailData.ets // 商品详情数据类
│ │ └──TypeModel.ets // 实体类
│ ├──**home** // 首页内容区
│ │ ├──components
│ │ │ └──Home.ets // 首页内容组件
│ │ └──viewmodel
│ │ └──HomeData.ets // 首页数据
│ ├──**newproduct** // 新品内容区
│ │ ├──components
│ │ │ └──NewProduct.ets // 新品内容组件
│ │ └──viewmodel
│ │ └──NewProductData.ets // 新品数据
│ ├──**orderdetail** // 订单相关内容区
│ │ ├──components
│ │ │ ├──AddressInfo.ets // 收件人信息组件
│ │ │ ├──CommodityOrderItem.ets // 商品订单信息组件
│ │ │ ├──CommodityOrderList.ets // 商品订单列表组件
│ │ │ ├──ConfirmOrder.ets // 确认订单组件
│ │ │ ├──HeaderBar.ets // 标题组件
│ │ │ ├──OrderDetailList.ets // 订单分类列表组件
│ │ │ ├──OrderListContent.ets // 订单分类列表内容组件
│ │ │ └──PayOrder.ets // 支付订单组件
│ │ ├──constants
│ │ │ └──OrderDetailConstants.ets // 订单区常量类
│ │ └──viewmodel
│ │ └──OrderData.ets // 订单数据
│ ├──**personal** // 我的内容区
│ │ ├──components
│ │ │ ├──IconButton.ets // 图片按钮组件
│ │ │ ├──LiveList.ets // 直播列表组件
│ │ │ └──Personal.ets // 我的内容组件
│ │ ├──constants
│ │ │ └──PersonalConstants.ets // 我的常量类
│ │ └──viewmodel
│ │ ├──IconButtonModel.ets // 按钮图标实体类
│ │ └──PersonalData.ets // 我的数据
│ └──**shopcart** // 购物车内容区
│ ├──components
│ │ └──ShopCart.ets // 购物车内容组件
│ └──constants
│ └──ShopCartConstants.ets // 购物车常量类
└──products // 产品层
└──**phone** // 支持手机、平板
├──constants
│ └──PageConstants.ets // 页面常量类
├──entryability
│ └──EntryAbility.ets // 程序入口类
├──pages
│ ├──CommodityDetailPage.ets // 订单详情页
│ ├──ConfirmOrderPage.ets // 确认订单页
│ ├──MainPage.ets // 主页
│ ├──OrderDetailListPage.ets // 订单分类列表页
│ ├──PayOrderPage.ets // 支付订单页
│ └──SplashPage.ets // 启动过渡页
└──viewmodel
└──MainPageData.ets // 主页数据

二. 主模块依赖静态模块

该项目有分了多个模块，其中主模块是phone。其他是公共静态模块，以下讲解主模块怎么依赖公共静态模块

一) 如何找出项目中的主模块(看module.json5的type)

1. 在product->phone->src->main->module.json5中可以看到type为entry。即该模块是项目的主模块。mainElement字段是模块的入口Ability。

2. 其他模块的type都为har。即表示静态公共包。用于写公共代码，资源等。可被复用。

二) phone模块依赖common示例

phone模块的SplashPage页面调用common模块的BreakpointSystem类

1. 创建项目

1. 将entry改为phone，并放入product文件夹中。

2. 创建SplashPage.ets，并把loadContent加载页面改为此页面

2. 创建公共静态模块common

2. src->main->ets下新建constans文件夹和utils文件夹并创建BreakpointConstants.ets和BreakpointSystem.ets文件

3. index.ets声明导出类

4. 修改oh-package.json5的name为@ohos/common。在phone导入时别名就是@ohos/common。

3. 主模块依赖公共静态模块

1. 进入命令行。进入phone模块执行ohpm install ../../common。就会在phone下的oh-package.json5中添加依赖"@ohos/common": "file:../../common"。并且生成oh-moudles文件。

2. 在需要使用的文件中，先导入，就可以使用了。

注意：

1. 使用ohpm，需要先配置环境变量

2. 电脑配置的npm环境变量和deveco studio的node.js是同一个路径。我就是因为忘记之前配置的node不一样，所以耽误了一会。