简介这是一份基于uniapp框架开发的仓储管理微信小程序完整源码包主要面向中小型仓库、物流调度人员及小程序开发者解决移动作业场景下的货物出入库、库存盘点和信息协同问题适合有uni-app与微信小程序基础、希望快速搭建同类系统的开发者参考使用。资源压缩包大小22.6MB共包含1372个文件涵盖vue、js、wxml、wxss等前端核心文件以及java、sql等后端接口与数据库脚本前后端链路完整便于局部分解与整体部署。目前已有162人学习下载。源码内置商品管理、供应商管理、货物盘点、公告发布、在线沟通等模块商品管理支持入库、出库与信息查询可覆盖仓储作业的主要环节。下载后可获得整套前后端工程与数据库初始化脚本文件组织清晰适合作为毕设、毕业项目或企业内部工具的开发基底也可用于学习uniapp、微信小程序与Java后端的整合实践。1. 一套uniapp仓储小程序源码先搞清它解决什么中小型仓库的现场作业最怕的就是录入滞后仓管员在货架间用纸笔记下出库数量回到电脑前再敲一遍数据既容易错位又浪费时间。这套基于uniapp框架的仓储管理微信小程序源码就是把入库、出库、盘点这一串动作直接搬到手机微信里完成扫码后实时提交商品信息、供应商目录、公告消息在一个入口里统一处理。源码本身带完整页面和工具函数适合前端开发者研究uniapp的页面组织与仓储业务的数据流也能直接当课程设计底子或者作为面试作品里展示小程序业务落地能力的素材。我下面按“选型依据—工程结构—运行联调—核心模块—排错与备份恢复”的顺序拆开讲保证拿到手能跑、能改、能说清原理。2. 为什么选uniapp写仓储管理选型逻辑与工程结构拆解2.1 选型逻辑一套代码同时覆盖小程序与管理端原生微信小程序不是不能写而是写完只能在微信里跑。仓储管理这类企业内部工具往往同时需要仓管员的小程序端和管理员的H5后台端两套代码分开维护的成本会直接翻倍。uniapp基于Vue语法编译目标可以指向微信小程序、H5、App等平台业务逻辑写在Vue单文件组件里换端只是换个编译目标。在实际项目里我一般会把仓库的库存查询、出入库操作做成小程序端把供应商审核、盘点报表这些低频操作放在H5管理端。uniapp让两端的页面代码可以共享大量公共组件和工具函数这也是这类场景最常见的选型理由。不过要留意uniapp的API比如uni.request、uni.scanCode在编译后会映射到微信小程序的wx系列API但个别平台差异化能力还是要写条件编译不能指望所有接口都完全一致。2.2 工程结构拆解pages.json、manifest.json与组件目录拿到源码先别急着运行先看目录结构。uniapp的工程核心是pages.json页面路由与导航配置、manifest.json各平台的应用配置和main.jsVue实例入口。页面文件统一放在pages目录下组件放在components目录全局工具函数比如请求封装一般放在utils目录。这个项目的components里有几个.vue.bak后缀的备份文件比如IndexHeader.vue.bak、BreadCrumbs.vue.bak、IndexAsideStatic.vue.bak一看就是从后台管理布局拆出来的头部、面包屑和侧边栏组件。这说明工程里复用了一套后台布局思路到小程序端。├── pages │ ├── goods │ │ ├── inStock.vue // 商品入库 │ │ ├── outStock.vue // 商品出库 │ │ └── list.vue // 商品信息查询 │ ├── supplier │ │ └── supplierList.vue // 供应商管理 │ ├── stocktake │ │ └── index.vue // 货物盘点 │ └── notice │ └── noticeList.vue // 公告信息 ├── components │ ├── IndexHeader.vue.bak // 顶部导航备份 │ └── BreadCrumbs.vue.bak // 面包屑备份 ├── utils │ └── request.js // uni.request封装 ├── static ├── pages.json ├── manifest.json └── main.jspages.json里的页面数组顺序不是随便排的数组第一项就是小程序启动后加载的页面。比如想先进入登录页就把pages/login/login放在第一项。每个页面对象里的style字段控制导航栏标题和背景色。manifest.json则是整个工程最容易被忽略的坑点微信小程序的AppID没填对、urlCheck没关调试阶段就会一直报域名不合法。后面第三章会专门讲这两个文件怎么配。2.3 三个bat脚本install、run、build各自在做什么项目根目录下的1-install.bat、2-run.bat、3-build.bat对应的是从安装依赖到编译产物的完整链路。这类脚本在uni-app的cli工程里很常见默认约定是先安装依赖再启动开发编译最后打生产包。把三个脚本拆开写是为了让不熟悉命令行的使用者按顺序执行避免一口气跑完出错了不知道在哪一步。:: 1-install.bat echo off cd /d %~dp0 echo [1/3] 安装项目依赖 call npm install if %errorlevel% neq 0 ( echo 依赖安装失败请检查 Node.js 版本 pause exit /b 1 ) echo 依赖安装完成 pause脚本第一行cd /d %~dp0很关键它把当前目录切到bat脚本所在路径防止用户从其他目录双击执行时找不到package.json。errorlevel判断npm install的退出码非0说明安装失败直接暂停并退出。实际的2-run.bat里通常会执行npm run dev:mp-weixin把源码编译到微信小程序平台3-build.bat则对应npm run build:mp-weixin产出用于上传的文件。注意区分dev模式生成的是未压缩代码适合调试build模式生成压缩后的生产包体积更小但要配合微信开发者工具的上传发布流程使用。3. HBuilderX运行与联调安装脚本、微信开发者工具与工程入口3.1 环境准备HBuilderX与微信开发者工具搭配本地把项目跑起来需要装两个工具HBuilderX负责打开并编译uniapp工程微信开发者工具负责运行和调试小程序产物。HBuilderX装完后直接菜单栏选择“文件-打开目录”定位到项目根目录即可。如果工程里有package.json说明是cli工程也可以不进HBuilderX直接用命令行编译HBuilderX提供的是可视化集成体验两者不冲突。微信开发者工具第一次使用时要先注册AppID没有的话可以用测试号但测试号无法使用支付、订阅消息这类能力。个人开发者在工具里导入项目时如果提示“项目不存在”多半是导入路径选到了src目录而产物目录在dist/dev/mp-weixin下面这块后面细说。3.2 命令行方式编译与微信开发者工具打开产物如果你习惯用命令行整个流程可以用下面三行命令走完。它们分别对应项目的三个bat脚本效果和HBuilderX可视化操作一致。# 安装依赖相当于 1-install.bat npm install # 开发编译监听文件变化并增量编译相当于 2-run.bat npm run dev:mp-weixin # 用微信开发者工具 CLI 打开编译产物目录 cli open --project ./dist/dev/mp-weixindev:mp-weixin是uniapp-cli工程的标准开发命令mp-weixin是编译目标平台标识。每次修改源码并保存后这个命令会自动重新编译到dist/dev/mp-weixin。最后一行cli open是微信开发者工具自带的命令行工具需要先在工具设置里开启服务端口才能使用。如果不想记命令也可以直接在微信开发者工具里手动导入dist/dev/mp-weixin目录两种方式等价。注意cli命令是独立于uniapp的另一个CLI路径指向微信开发者工具安装目录没配置全局环境变量的话写全路径也行。我一般习惯把它加入PATH但更保险的做法是写绝对路径避免换电脑后环境不一致。3.3 manifest.json的mp-weixin配置与常见坑整个运行过程中最容易卡住的不是编译而是manifest.json里的小程序配置。开发阶段请求本地后端的http://192.168.x.x接口微信小程序默认会拦截这类非HTTPS请求报“不在以下 request 合法域名列表中”。解决办法是开发阶段在manifest.json的mp-weixin节点下关掉urlCheck{ mp-weixin: { appid: wx你的AppID, setting: { urlCheck: false }, usingComponents: true } }urlCheck置为false后开发工具不再校验接口域名合法性真机预览时也有效。但正式发布前必须改回来否则真机打开小程序时数据请求会全部失败。appid字段决定当前构建产物绑定到哪个小程序账号个人调试用测试号也能跑通但测试号不支持uni.login换取用户身份这类依赖AppID的能力。还有一个微妙的地方修改manifest.json后要重启npm run dev:mp-weixin的编译进程因为它不一定监听这个文件的变更很多人在这里改了配置没生效白排查半天。配置项作用注意事项mp-weixin.appid指定小程序AppID测试号能力受限urlCheck控制域名校验仅开发调试时关闭usingComponents启用组件模式涉及自定义组件时开启4. 仓储核心模块实现出入库、盘点与供应商管理的数据流4.1 商品入库与出库表单校验与库存增减的前端链路入库和出库在仓储系统里本质是同一类操作库存变动。前端页面的差异只在变动方向业务逻辑可以复用同一个接口用type字段区分。页面上的核心交互是扫码填单仓管员用手机扫商品条码小程序通过uni.scanCode拿到条码后自动回填到输入框再录入数量提交。这部分逻辑在Vue3组合式API下大概是这样一个结构script setup import { ref } from vue import { request } from /utils/request.js const formData ref({ barcode: , quantity: 1, direction: IN // IN 入库 / OUT 出库 }) async function submitStockChange() { if (!formData.value.barcode) { uni.showToast({ title: 请扫描商品条码, icon: none }) return } const res await request({ url: /api/stock/move, method: POST, data: formData.value }) if (res.code 0) { uni.showToast({ title: 操作成功, icon: success }) formData.value.barcode formData.value.quantity 1 } } /script这里的request函数就是对uni.request的一层Promise封装统一把token塞进header对res.code ! 0的返回统一弹toast避免每个页面重复处理错误分支。提交成功后重置表单是因为仓库现场往往是连续扫码入库不清空的话下一次扫码会把上一次的数据重复提交。商品信息查询页面则是普通列表按条码或名称模糊搜索数据量大了以后建议做分页而不是一次拉全量。4.2 货物盘点账面库存与实盘数量的差异对账货物盘点比出入库复杂一点它涉及两个数据源系统里的账面库存和现场清点出来的实际数量。前端在盘点页面拉取某个库区的库存清单显示每件商品的账面数仓管员逐项填入实盘数。页面要做的关键计算是差异数diff actual - book差异不为0的商品在列表里标红等提交盘点单时前端把有差异的条目单独提取出来连同差异说明一起发给后端。const diffItems computed(() { return stockList.value.filter(item { return Number(item.actual) ! Number(item.book) }) })提交盘点单的接口只传差异项能减少不少无效数据量。computed在这里的好处是仓管员每改一个输入框的值diffItems自动重新计算不需要手动触发更新。差异数据要保留原始账面数和实盘数两个字段后续对账时要看差异原因。整个盘点功能最怕的是并发同一个商品被两个人同时盘后提交的会覆盖先提交的结果。实际项目里可以在盘点任务里加一个状态位提交后立刻锁住该商品其他终端只能只读。4.3 供应商管理、公告与在线沟通的消息流转供应商管理在主流程上就是一个标准列表页供应商列表按名称或联系人搜索详情页展示供货品类、历史入库记录和联系方式数据量大了走分页加载。公告板块在仓储场景里承担的是任务下发角色管理员发一条“明天盘点A区”的公告后仓管员在首页公告栏就能看到未读红点。技术实现上公告列表和沟通消息都要标记已读状态前端在进入列表页时把最后一次浏览时间提交给后端后端只返回这个时间点之后的新消息。在线沟通这块uniapp可以用uni.connectSocket接入WebSocket通道用于收发消息。但完整的即时通讯要处理在线状态、离线消息、会话列表这些逻辑建议后端用现成的IM服务或者开源的IM方案来兜底小程序端只管连接和消息渲染。如果只是做课程设计一个轮询接口也能把沟通功能跑通每5秒拉一次新消息代价是请求频率高服务器压力大一点但实现简单可控。模块前端页面接口建议商品入库pages/goods/inStock.vuePOST /api/stock/move商品出库pages/goods/outStock.vuePOST /api/stock/move货物盘点pages/stocktake/index.vuePOST /api/stocktake/report供应商管理pages/supplier/supplierList.vueGET /api/supplier/list公告信息pages/notice/noticeList.vueGET /api/notice/list5. 真机调试与.vue备份文件恢复的实用技巧5.1 真机调试小程序的扫码流程与局域网接口问题开发工具里跑通不算完真机调试才能暴露手机端的真实问题。微信开发者工具顶部工具栏有“真机调试”按钮点击后生成一个二维码手机微信扫码即可加载调试包。整个过程要求手机和电脑在同一个局域网下并且电脑的防火墙要放行开发者工具的端口。真机调试时如果接口请求失败优先检查三处manifest.json里的urlCheck有没有关、后端接口是否监听在0.0.0.0而不是127.0.0.1、手机和电脑能否互相ping通。另一个常见坑是同一局域网下电脑IP变更后request.js里写死的BASE_URL要跟着改建议把接口地址收敛到一个配置文件中真机调试时只改一处。5.2 修改刚进入的加载页面启动页不是文件系统决定的而是pages.json的页面数组顺序。把想作为首页的页面路径加到数组第一项重新编译就会生效。删除或改名页面文件时务必同步更新pages.json里的注册项否则编译不报错但运行时跳转会白屏。如果项目里存在多个模块建议保留一个pages/entry/index.vue作为纯粹的跳转分发页业务模块都放在它后面后续调整入口逻辑时不需要反复改动pages.json。5.3 .bak备份文件的恢复与对比工程里那批.vue.bak和.js.bak文件本质是上一次改动前的备份。这类文件在源码分发时经常出现可能是作者调试时手动复制出来的副本。如果你发现当前页面跑不起来而.bak文件存在说明改动出了问题可以用下面的命令恢复# 用备份文件覆盖当前文件先确认当前改动不需要保留 cp components/IndexHeader.vue.bak components/IndexHeader.vue # 对比备份和当前文件的差异确认改动点 diff -u components/IndexHeader.vue components/IndexHeader.vue.bak恢复前一定要先diff对比因为.bak文件可能是旧版本直接把当前文件覆盖会丢掉最近的改动。更推荐的做法是如果项目在Git仓库里不要手动碰.bak文件而是用git diff查看改动历史用git checkout回退到稳定版本。.bak文件本身也提醒了一件事源码分发前应该清理这些临时预留文件避免使用者在恢复和运行之间产生误会。本文还有配套的精品资源点击获取 uniapp仓储微信小程序源码：跨端开发与出入库盘点实战解析
简介这是一份基于uniapp框架开发的仓储管理微信小程序完整源码包主要面向中小型仓库、物流调度人员及小程序开发者解决移动作业场景下的货物出入库、库存盘点和信息协同问题适合有uni-app与微信小程序基础、希望快速搭建同类系统的开发者参考使用。资源压缩包大小22.6MB共包含1372个文件涵盖vue、js、wxml、wxss等前端核心文件以及java、sql等后端接口与数据库脚本前后端链路完整便于局部分解与整体部署。目前已有162人学习下载。源码内置商品管理、供应商管理、货物盘点、公告发布、在线沟通等模块商品管理支持入库、出库与信息查询可覆盖仓储作业的主要环节。下载后可获得整套前后端工程与数据库初始化脚本文件组织清晰适合作为毕设、毕业项目或企业内部工具的开发基底也可用于学习uniapp、微信小程序与Java后端的整合实践。1. 一套uniapp仓储小程序源码先搞清它解决什么中小型仓库的现场作业最怕的就是录入滞后仓管员在货架间用纸笔记下出库数量回到电脑前再敲一遍数据既容易错位又浪费时间。这套基于uniapp框架的仓储管理微信小程序源码就是把入库、出库、盘点这一串动作直接搬到手机微信里完成扫码后实时提交商品信息、供应商目录、公告消息在一个入口里统一处理。源码本身带完整页面和工具函数适合前端开发者研究uniapp的页面组织与仓储业务的数据流也能直接当课程设计底子或者作为面试作品里展示小程序业务落地能力的素材。我下面按“选型依据—工程结构—运行联调—核心模块—排错与备份恢复”的顺序拆开讲保证拿到手能跑、能改、能说清原理。2. 为什么选uniapp写仓储管理选型逻辑与工程结构拆解2.1 选型逻辑一套代码同时覆盖小程序与管理端原生微信小程序不是不能写而是写完只能在微信里跑。仓储管理这类企业内部工具往往同时需要仓管员的小程序端和管理员的H5后台端两套代码分开维护的成本会直接翻倍。uniapp基于Vue语法编译目标可以指向微信小程序、H5、App等平台业务逻辑写在Vue单文件组件里换端只是换个编译目标。在实际项目里我一般会把仓库的库存查询、出入库操作做成小程序端把供应商审核、盘点报表这些低频操作放在H5管理端。uniapp让两端的页面代码可以共享大量公共组件和工具函数这也是这类场景最常见的选型理由。不过要留意uniapp的API比如uni.request、uni.scanCode在编译后会映射到微信小程序的wx系列API但个别平台差异化能力还是要写条件编译不能指望所有接口都完全一致。2.2 工程结构拆解pages.json、manifest.json与组件目录拿到源码先别急着运行先看目录结构。uniapp的工程核心是pages.json页面路由与导航配置、manifest.json各平台的应用配置和main.jsVue实例入口。页面文件统一放在pages目录下组件放在components目录全局工具函数比如请求封装一般放在utils目录。这个项目的components里有几个.vue.bak后缀的备份文件比如IndexHeader.vue.bak、BreadCrumbs.vue.bak、IndexAsideStatic.vue.bak一看就是从后台管理布局拆出来的头部、面包屑和侧边栏组件。这说明工程里复用了一套后台布局思路到小程序端。├── pages │ ├── goods │ │ ├── inStock.vue // 商品入库 │ │ ├── outStock.vue // 商品出库 │ │ └── list.vue // 商品信息查询 │ ├── supplier │ │ └── supplierList.vue // 供应商管理 │ ├── stocktake │ │ └── index.vue // 货物盘点 │ └── notice │ └── noticeList.vue // 公告信息 ├── components │ ├── IndexHeader.vue.bak // 顶部导航备份 │ └── BreadCrumbs.vue.bak // 面包屑备份 ├── utils │ └── request.js // uni.request封装 ├── static ├── pages.json ├── manifest.json └── main.jspages.json里的页面数组顺序不是随便排的数组第一项就是小程序启动后加载的页面。比如想先进入登录页就把pages/login/login放在第一项。每个页面对象里的style字段控制导航栏标题和背景色。manifest.json则是整个工程最容易被忽略的坑点微信小程序的AppID没填对、urlCheck没关调试阶段就会一直报域名不合法。后面第三章会专门讲这两个文件怎么配。2.3 三个bat脚本install、run、build各自在做什么项目根目录下的1-install.bat、2-run.bat、3-build.bat对应的是从安装依赖到编译产物的完整链路。这类脚本在uni-app的cli工程里很常见默认约定是先安装依赖再启动开发编译最后打生产包。把三个脚本拆开写是为了让不熟悉命令行的使用者按顺序执行避免一口气跑完出错了不知道在哪一步。:: 1-install.bat echo off cd /d %~dp0 echo [1/3] 安装项目依赖 call npm install if %errorlevel% neq 0 ( echo 依赖安装失败请检查 Node.js 版本 pause exit /b 1 ) echo 依赖安装完成 pause脚本第一行cd /d %~dp0很关键它把当前目录切到bat脚本所在路径防止用户从其他目录双击执行时找不到package.json。errorlevel判断npm install的退出码非0说明安装失败直接暂停并退出。实际的2-run.bat里通常会执行npm run dev:mp-weixin把源码编译到微信小程序平台3-build.bat则对应npm run build:mp-weixin产出用于上传的文件。注意区分dev模式生成的是未压缩代码适合调试build模式生成压缩后的生产包体积更小但要配合微信开发者工具的上传发布流程使用。3. HBuilderX运行与联调安装脚本、微信开发者工具与工程入口3.1 环境准备HBuilderX与微信开发者工具搭配本地把项目跑起来需要装两个工具HBuilderX负责打开并编译uniapp工程微信开发者工具负责运行和调试小程序产物。HBuilderX装完后直接菜单栏选择“文件-打开目录”定位到项目根目录即可。如果工程里有package.json说明是cli工程也可以不进HBuilderX直接用命令行编译HBuilderX提供的是可视化集成体验两者不冲突。微信开发者工具第一次使用时要先注册AppID没有的话可以用测试号但测试号无法使用支付、订阅消息这类能力。个人开发者在工具里导入项目时如果提示“项目不存在”多半是导入路径选到了src目录而产物目录在dist/dev/mp-weixin下面这块后面细说。3.2 命令行方式编译与微信开发者工具打开产物如果你习惯用命令行整个流程可以用下面三行命令走完。它们分别对应项目的三个bat脚本效果和HBuilderX可视化操作一致。# 安装依赖相当于 1-install.bat npm install # 开发编译监听文件变化并增量编译相当于 2-run.bat npm run dev:mp-weixin # 用微信开发者工具 CLI 打开编译产物目录 cli open --project ./dist/dev/mp-weixindev:mp-weixin是uniapp-cli工程的标准开发命令mp-weixin是编译目标平台标识。每次修改源码并保存后这个命令会自动重新编译到dist/dev/mp-weixin。最后一行cli open是微信开发者工具自带的命令行工具需要先在工具设置里开启服务端口才能使用。如果不想记命令也可以直接在微信开发者工具里手动导入dist/dev/mp-weixin目录两种方式等价。注意cli命令是独立于uniapp的另一个CLI路径指向微信开发者工具安装目录没配置全局环境变量的话写全路径也行。我一般习惯把它加入PATH但更保险的做法是写绝对路径避免换电脑后环境不一致。3.3 manifest.json的mp-weixin配置与常见坑整个运行过程中最容易卡住的不是编译而是manifest.json里的小程序配置。开发阶段请求本地后端的http://192.168.x.x接口微信小程序默认会拦截这类非HTTPS请求报“不在以下 request 合法域名列表中”。解决办法是开发阶段在manifest.json的mp-weixin节点下关掉urlCheck{ mp-weixin: { appid: wx你的AppID, setting: { urlCheck: false }, usingComponents: true } }urlCheck置为false后开发工具不再校验接口域名合法性真机预览时也有效。但正式发布前必须改回来否则真机打开小程序时数据请求会全部失败。appid字段决定当前构建产物绑定到哪个小程序账号个人调试用测试号也能跑通但测试号不支持uni.login换取用户身份这类依赖AppID的能力。还有一个微妙的地方修改manifest.json后要重启npm run dev:mp-weixin的编译进程因为它不一定监听这个文件的变更很多人在这里改了配置没生效白排查半天。配置项作用注意事项mp-weixin.appid指定小程序AppID测试号能力受限urlCheck控制域名校验仅开发调试时关闭usingComponents启用组件模式涉及自定义组件时开启4. 仓储核心模块实现出入库、盘点与供应商管理的数据流4.1 商品入库与出库表单校验与库存增减的前端链路入库和出库在仓储系统里本质是同一类操作库存变动。前端页面的差异只在变动方向业务逻辑可以复用同一个接口用type字段区分。页面上的核心交互是扫码填单仓管员用手机扫商品条码小程序通过uni.scanCode拿到条码后自动回填到输入框再录入数量提交。这部分逻辑在Vue3组合式API下大概是这样一个结构script setup import { ref } from vue import { request } from /utils/request.js const formData ref({ barcode: , quantity: 1, direction: IN // IN 入库 / OUT 出库 }) async function submitStockChange() { if (!formData.value.barcode) { uni.showToast({ title: 请扫描商品条码, icon: none }) return } const res await request({ url: /api/stock/move, method: POST, data: formData.value }) if (res.code 0) { uni.showToast({ title: 操作成功, icon: success }) formData.value.barcode formData.value.quantity 1 } } /script这里的request函数就是对uni.request的一层Promise封装统一把token塞进header对res.code ! 0的返回统一弹toast避免每个页面重复处理错误分支。提交成功后重置表单是因为仓库现场往往是连续扫码入库不清空的话下一次扫码会把上一次的数据重复提交。商品信息查询页面则是普通列表按条码或名称模糊搜索数据量大了以后建议做分页而不是一次拉全量。4.2 货物盘点账面库存与实盘数量的差异对账货物盘点比出入库复杂一点它涉及两个数据源系统里的账面库存和现场清点出来的实际数量。前端在盘点页面拉取某个库区的库存清单显示每件商品的账面数仓管员逐项填入实盘数。页面要做的关键计算是差异数diff actual - book差异不为0的商品在列表里标红等提交盘点单时前端把有差异的条目单独提取出来连同差异说明一起发给后端。const diffItems computed(() { return stockList.value.filter(item { return Number(item.actual) ! Number(item.book) }) })提交盘点单的接口只传差异项能减少不少无效数据量。computed在这里的好处是仓管员每改一个输入框的值diffItems自动重新计算不需要手动触发更新。差异数据要保留原始账面数和实盘数两个字段后续对账时要看差异原因。整个盘点功能最怕的是并发同一个商品被两个人同时盘后提交的会覆盖先提交的结果。实际项目里可以在盘点任务里加一个状态位提交后立刻锁住该商品其他终端只能只读。4.3 供应商管理、公告与在线沟通的消息流转供应商管理在主流程上就是一个标准列表页供应商列表按名称或联系人搜索详情页展示供货品类、历史入库记录和联系方式数据量大了走分页加载。公告板块在仓储场景里承担的是任务下发角色管理员发一条“明天盘点A区”的公告后仓管员在首页公告栏就能看到未读红点。技术实现上公告列表和沟通消息都要标记已读状态前端在进入列表页时把最后一次浏览时间提交给后端后端只返回这个时间点之后的新消息。在线沟通这块uniapp可以用uni.connectSocket接入WebSocket通道用于收发消息。但完整的即时通讯要处理在线状态、离线消息、会话列表这些逻辑建议后端用现成的IM服务或者开源的IM方案来兜底小程序端只管连接和消息渲染。如果只是做课程设计一个轮询接口也能把沟通功能跑通每5秒拉一次新消息代价是请求频率高服务器压力大一点但实现简单可控。模块前端页面接口建议商品入库pages/goods/inStock.vuePOST /api/stock/move商品出库pages/goods/outStock.vuePOST /api/stock/move货物盘点pages/stocktake/index.vuePOST /api/stocktake/report供应商管理pages/supplier/supplierList.vueGET /api/supplier/list公告信息pages/notice/noticeList.vueGET /api/notice/list5. 真机调试与.vue备份文件恢复的实用技巧5.1 真机调试小程序的扫码流程与局域网接口问题开发工具里跑通不算完真机调试才能暴露手机端的真实问题。微信开发者工具顶部工具栏有“真机调试”按钮点击后生成一个二维码手机微信扫码即可加载调试包。整个过程要求手机和电脑在同一个局域网下并且电脑的防火墙要放行开发者工具的端口。真机调试时如果接口请求失败优先检查三处manifest.json里的urlCheck有没有关、后端接口是否监听在0.0.0.0而不是127.0.0.1、手机和电脑能否互相ping通。另一个常见坑是同一局域网下电脑IP变更后request.js里写死的BASE_URL要跟着改建议把接口地址收敛到一个配置文件中真机调试时只改一处。5.2 修改刚进入的加载页面启动页不是文件系统决定的而是pages.json的页面数组顺序。把想作为首页的页面路径加到数组第一项重新编译就会生效。删除或改名页面文件时务必同步更新pages.json里的注册项否则编译不报错但运行时跳转会白屏。如果项目里存在多个模块建议保留一个pages/entry/index.vue作为纯粹的跳转分发页业务模块都放在它后面后续调整入口逻辑时不需要反复改动pages.json。5.3 .bak备份文件的恢复与对比工程里那批.vue.bak和.js.bak文件本质是上一次改动前的备份。这类文件在源码分发时经常出现可能是作者调试时手动复制出来的副本。如果你发现当前页面跑不起来而.bak文件存在说明改动出了问题可以用下面的命令恢复# 用备份文件覆盖当前文件先确认当前改动不需要保留 cp components/IndexHeader.vue.bak components/IndexHeader.vue # 对比备份和当前文件的差异确认改动点 diff -u components/IndexHeader.vue components/IndexHeader.vue.bak恢复前一定要先diff对比因为.bak文件可能是旧版本直接把当前文件覆盖会丢掉最近的改动。更推荐的做法是如果项目在Git仓库里不要手动碰.bak文件而是用git diff查看改动历史用git checkout回退到稳定版本。.bak文件本身也提醒了一件事源码分发前应该清理这些临时预留文件避免使用者在恢复和运行之间产生误会。本文还有配套的精品资源点击获取