# LogisticsWarehousr **Repository Path**: benshaw/logistics-warehousr ## Basic Information - **Project Name**: LogisticsWarehousr - **Description**: 用鸿蒙开发的物流仓库项目 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2024-11-15 - **Last Updated**: 2025-11-12 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README _# LogisticsWarehousr #### 介绍 用鸿蒙开发的物流仓库项目 #### 软件架构 软件架构说明 全流程的过程记录 1：初始化项目、导入素材、配置项目Icon/label/description 2: 导入项目的整体色值到color.json中 3：'创建api component constants models utils目录 来管理项目中的文件 并在每个文件夹中创建index.ets文件 做为统一导出的出口' -ets -api 负责存放所有的请求 -components 负责放置所有的公共组件 -constants 负责存放所有的常量 -models 负责存放所有的数据类型结构 -utils 负责存放所有的工具 4：广告页 功能开发 4.1 广告页 广告页的思路 -华为有广告业务，但是我们不用- ad模块 想自定义广告- 场景： app启动-有广告需求，就打开广告页，没有的话就去登录或者主页 腾讯体育的广告- 启动有广告页，退到后台的情况下，再次进入前台也会有广告 分析- 广告页作为一个app启动的首页，应该是在我们应用启动就进去的。 - 有的app有的需要广告页，有的不需要，搞个配置呗！！！ 1. 通过首选项配置存储我们的一些常用配置，比如要不要广告页，还有广告页的路由地址，点击广告页跳转的链接，广告页倒计时的秒数 2. 在入口处进行判断是否需要广告页，需要的话，跳转广告页-广告页根据设置的参数进行渲染 3. 有的小伙伴可能会问，广告页能不能设置-因为运营人员肯定不能每次都去改我们底层的代码- 这里我还可以设置成动态的-就是初始化的时候通过请求去读一下云端的请求，然后把我们的图片和一些参数配置下来， 这样每次你启动app就是运营人员给你配置的广告和设置了 5: 页面开发的标准流程 -----步骤1：定义数据类型 -----步骤2：封装API -----步骤3：根据API获取数据 -----步骤4：把获取到数据赋值给对应的变量 -----步骤5：根据数据与页面的对应关系 进行布局 把数据渲染到对应的页面上 ![img.png](ReadMePic/img.png) ![img_1.png](ReadMePic/img_1.png) ![img_2.png](ReadMePic/img_2.png) ![img_3.png](ReadMePic/img_3.png) ![img_4.png](ReadMePic/img_4.png) ![img_5.png](ReadMePic/img_5.png) ![img_6.png](ReadMePic/img_6.png) ![img_7.png](ReadMePic/img_7.png) ![img_8.png](ReadMePic/img_8.png) ![img_9.png](ReadMePic/img_9.png) ![img_10.png](ReadMePic/img_10.png) ![img_11.png](ReadMePic/img_11.png) ![img_12.png](ReadMePic/img_12.png) 组件复用的形式，实现【回车登记】页面中的部份结构和样式 ![img_13.png](ReadMePic/img_13.png) 在【回车登记】页面中，封装一个复选框的卡片组件 实现复用! [img_14.png](ReadMePic/img_14.png) ============================== ![img_15.png](ReadMePic/img_15.png) 【回车登记】页面：封装一个【选择时间】的组件 ============================== ![img_16.png](ReadMePic/img_16.png) 【延迟交货】页面：实现布局和样式的功能 以及路由的简单跳转 ============================== ![img_17.png](ReadMePic/img_17.png) 【延迟交货】页面：根据任务id 任务延迟时间 延迟理由 向服务器提交延迟交货 ============================== ![img.png](ReadMePic/img.png) 【上报异常】页面结构和样式的初步处理 ============================== ![img.png](ReadMePic/img19.png) 【上报异常】页面:实现异常类型组件的封装 ============================== ![img_18.png](ReadMePic%2Fimg_18.png) 【上报异常】页面：从上报位置处跳转到【当前位置】的页面中 并放置一个web组件，测试在web中引入高德地图 ============================== ![img_19.png](ReadMePic%2Fimg_19.png) 【上报异常】页面：从上报位置处跳转到【当前位置】的页面中 在web组件，传入一个本地的html，这个html页面带有高德地图的相关配置信息 为下一步，与html页 进行混合开发做准备 ============================== ![混合开发中html与原生harmony建立通信通道.png](ReadMePic%2F%E6%B7%B7%E5%90%88%E5%BC%80%E5%8F%91%E4%B8%ADhtml%E4%B8%8E%E5%8E%9F%E7%94%9Fharmony%E5%BB%BA%E7%AB%8B%E9%80%9A%E4%BF%A1%E9%80%9A%E9%81%93.png) 混合开发中html与原生harmony建立通信通道 ============================== ![img_20.png](ReadMePic%2Fimg_20.png) 混合开发中html与原生harmony建立通信通道:通过静态类、事件总线等技术 实现从html与harmony之间 进行数据的通讯 从同实现【设置地理位置】与【搜索周边】的功能 ============================== ![img_21.png](ReadMePic%2Fimg_21.png) 根据任务详情返回的【数据】，对【异常信息】【回显】到【任务详情】页面中 ============================== ![img_22.png](ReadMePic%2Fimg_22.png) 点击【任务详情】页中，【异常信息】面板后面的图标，进入到【异常详情】面中 从面实现异常上报的详情回显 ============================== ![img_23.png](ReadMePic%2Fimg_23.png) html与原生的混合开发： 点击【任务详情】中的【开始导航】 跳转到嵌套有html的页面中 ============================== ![img_24.png](ReadMePic%2Fimg_24.png) html与原生的混合开发： 点击【任务详情】中的【开始导航】 跳转到嵌套有html的页面中 在原生中当web组件中的页面加载完以后，根据原生中任务的起点和终点，调用html中的接口 实现导航路径的功能 Web({ src: $rawfile('navigation.html'), controller: WebSdkClass.webViewCtl! }) .width('100%') .layoutWeight(1) .onPageEnd(() => { const params = router.getParams() as IRouteResponse console.log('传给导航路由的起始地址是:', JSON.stringify(params)) // this.webSdk.myNavRoute(params.startAddress!, params.endAddress!) if (params && params.startAddress && params.endAddress) { console.log('要运行html中的函数是:', `beginDriving(${params.startAddress},${params.endAddress})`) WebSdkClass.webViewCtl!.runJavaScript(`beginDriving('${params.startAddress}', '${params.endAddress}')`) } }) ============================== ![img_25.png](ReadMePic%2Fimg_25.png) 完成【首面】任务分类中【已完成】任务的数据请求，以及【已完成】任务上面按条件【筛选】任务的结构与样式 ============================== ![img_26.png](ReadMePic%2Fimg_26.png) 【我的】-->【系统设置】中 【手机换绑】页面的结构与样式 ============================== ![img_27.png](ReadMePic%2Fimg_27.png) 【我的】-->【系统设置】中 【消息通知设置】页面的结构与样式 ============================== ![img_28.png](ReadMePic%2Fimg_28.png) 【我的】-->【系统设置】中 【修改密码】页面的结构与样式 ============================== ![img_29.png](ReadMePic%2Fimg_29.png) 【我的】-->【系统设置】中 【车辆信息】页面的结构与样式 ============================== ![QQ_1733194490786.png](ReadMePic%2FQQ_1733194490786.png) 在首页【消息】中 完成【公告】及公告对应的【公告详情】 以及 【任务通知】中的【你有新的动作任务】列表 ============================== ![img.png](img.png) 在【我的】-->【任务数据】页面中 封装一个自定义的日历组件 ============================== ![img_30.png](ReadMePic%2Fimg_30.png) 在【entryAbility】中 模拟10秒钟以后 用【通知管理】 在通知栏中发布一个新订单的通知，并播放一个音效，然后点击这个通知，拉起另一个：listenAbility中的订单模拟页面 ============================== ![QQ_1733310149078.png](ReadMePic%2FQQ_1733310149078.png) ![QQ_1733310238174.png](ReadMePic%2FQQ_1733310238174.png) ![QQ_1733310282530.png](ReadMePic%2FQQ_1733310282530.png) ![QQ_1733310421406.png](ReadMePic%2FQQ_1733310421406.png) 应用的发布与上架 ==============================_ 项目总结： 一：组件、页面等的通讯方式： ----1 最简单的 可能不用任务修饰符 可以传参 但是只能第一次生效 ----2 组件树之间的通讯 -------@state:本组件内能实现数据驱动UI -------@prop: 单向数据同步 父传子 -------@link: 双向数据同步 -------@observed/@observedlink:深层嵌套的组件数据进行双向同步 -------@provide/@comsume:在组件树中进行跨组件通讯 -----3 不同组件树之间的通讯： --------事件总线：emitter context.eventhub.on/emit ----4 不同页面之间的间数据通讯 -------AppStorage ----5 不同ability之间可以通过want通讯 类似拉起一个应用 给他传递参数的通讯 ----6 首选项的设置 进行数据通讯 二： 本项目封装的组件 -----本项目大概封装了13个组件： -----列表、加载进度、上传组件图片、卡片、卡片选项、弹出确认取消、预览图片、选项组件、日历组件、弹出时间选择组件等 -----过程：先确定业务需求，然后把组件和业务解耦，以封装的list列表组件为例： -----他支持上拉刷新、下拉加载，并且封装了下拉刷新的动画 这个组件还用lazyforeach优化了性能 -----还有avplayer播放了短音频 还支持各种文本定制 这个组件的封装借鉴了前端里面的组件库 Vant/Antd里面的list -----让我们用组件的人只要传入几个参数就可以了 三 ：鸿蒙项目的开发流程 ----创建项目 ----导入项目资源、色值、常量 ----创建公共目录：组件库、数据模型、工具类、请求类、常量 ----读写首选项工具类 ----封装请求工具类 ----使用泛型工具统一处理响应数据 ----封装组件库：列表组件、加载组件、上传图片组件、日历组件.... ----分包 ----发布上线 四 项目中的难点 ----封装请工具时 统一处理返回类型 导入类型相对来说比较费劲 因为要处理泛型，泛型传了好几层 ----封装了一个list组件 这里只要传入几个参数：onload onRefresh dataSource finished lazyForEach 播放音乐 ----封装上传图片组件 唤出选择图片--上传(沙箱上传)--拷贝到沙箱--上传成功没有地址--uuid循环雇用来获取地址接口 ----上报位置 4.0可以获取定义 但是没有地图组件 没有sdk集成 所以用的混合开一 ----混保开发：两种通讯方式：第1种 postMessage(原生要创建两个端口 传一个端口给网页 网面拿到端口后 再用端口和原通信) ----第2种(注入sdk模式) 网页可以调用原生方法，硬伤是this的问题、异步的问题(采用html调我 给我一个方法 拿到这值以后调回去 ----再把值传入就可以了) ----还有一个SelectCard组件的封装也比较复杂 因为这个组件是基础组件和业务组件解耦的一个应用 又要保证基础组件独立的 ---- 还要保证能够实现 所以难度比较大 五 鸿蒙开发有什么要注意的点 ---- 数据的类型是个最大的问题 ---- 调试和预览是一个大问题：模拟器太吃内存、没有真机、预览器没有交互 ----文档的问题 不好找 用法和代码验证起来要大量的时间 六 项目中用到的鸿蒙系统能力 ----弹窗 ----路由跳转 ----声音播放 avplayer video ----震动 ----打电话 ----定位(要用户授权) ----发布通知 ----ability通信和传参 ----网络权限 ----首选项 ----文件选择 ----后台订阅闹铃 七：项目中的权限管理 ----进入到应用 判断toke（坑点 只能用首选项获取token） 再跳转到主面、登录页 ----销毁应用 ----进入到登录页 获取token后存储到持久化/首选项 跳到主页 ----token超时 销毁token（销毁持久化/首选项） 跳回登录页 八：通过此项目掌握的技能 ----熟练掌握harmonyOS4.0版本中ArkTS语法及ArkUI组件库的应用 ----熟练通过4.0提供的单向状态机模式完成UI的绘制 数据交互 页面跳转及系统开发 ----熟练掌握Ability能力集的应用开发，如Ability通信 want传参 通知发布 音效播放 上传文件 数据请求 ----熟练掌握动画控制 UI组件库的封装 基础工具封装 混合sdk封装 及混合开发模式下的sdk通讯 状态更新及坑点 ----熟练持久化数据管理及本地用户首选项数据管理 ----app的架构设计 har包单独拆分 及最终生成p12 csr cer p7b发布签名证书上架到AGC 九 项目介绍 -----个人独立完成一款鸿蒙4.0App的设计、开发及上架 ----- 交通/物流/餐饮/音乐/刷题/送货/超市/电商 app是个基本鸿蒙4.0系统开发的原生鸿蒙应用 ----- 个人从0到1的系统设计及项目搭建 ----- 独立设计基于该系统的组件库 完成十几个组件从0-1的封装 并拆解到har包供其模块使用 -----从0-1搭建项目架构体系 包含组件库层--UI适配层--数据管理层--工具使用层--网络请求工具层--页面设计层 -----重点攻关4.0设备中基于项目实际业务需求的技术特性 如图片上传(从0-1封装上传sdk 独立解决4.0无法拿到响应地址的问题 通过设计避坑) ----- 重点攻关4.0混合开发中无法进行有效通讯的问题(提供两种优选方案 都可以被项目组使用 1 消息机制 2 sdk机制) -----从0-1封装基于性能及使用体验于一身的列表组件 重新定义下拉效果 全手写实现下拉刷新 上拉加载，并通过AVPLAYER这个单例 -----实现播放刷新成功时的音效 用法及期精简 -----设计及实现一套基于动态广告页模式的架构 基本于首选项缓存及数据动态处理完成广告页可替换、可移除、可定制、可管理的业务 -----从0-1实现底层请求 工具封装的请求工具类 使用得请求api随用岁走 所用皆所得 -----系统能力集成 如：震动、播放声音、授权申请再定位权限应用、web通信导航、打电话系统能力、发布通知、声音提醒、 -----通知取消、ability能力通信、want传参等众多系统能力 -----发布、签名、证书、profile、上架AGC 全流程实现