ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

货运搬家小程序开发从0到1(十三):三端联调与真机测试,跑通一条完整的单

货运搬家小程序开发从0到1(十三):三端联调与真机测试,跑通一条完整的单 三端代码全部完成。这篇讲联调怎么把后端 8080 小程序 H5 管理后台 5174串起来在真机上走完一条完整订单。启动顺序与依赖1. 后端 mvn spring-boot:run → localhost:8080 2. 管理后台 npm run dev (admin-web) → localhost:5174代理 /api → 8080 3. 小程序 npm run dev:h5 (uni-app) → localhost:5173BASE_URL 指向 8080联调第一天就被环境坑过一次后端死活起在随机端口上查了半天是系统里残留的SERVER_PORT0环境变量覆盖了 yml 配置。教训写进检查清单联调前先env | grep -i port配置不生效按命令行参数 环境变量 yml的优先级排查。真机测试H5 是捷径小程序正式版要域名备案合法域名配置联调阶段用uni-app 的 H5 模式手机连同一个 Wi-Fi浏览器访问http://电脑IP:5173就是完整业务流。比微信开发者工具 内网穿透少一半麻烦扫码就能让别人帮你测。确认要点后端 CORS 放行、H5 dev server 加--host监听 0.0.0.0、手机与电脑同网段。这三条任何一条不满足表现都是手机打开白屏/请求失败。全链路走查清单联调的核心交付物一条单从生到死14 步每步写清预期结果#步骤预期1首次打开小程序自动 mock 登录能看到首页2选车型、拖里程、勾楼层估价实时变化规则与后端一致3提交订单生成待支付订单价格后端重算值4mock 支付状态变待接单产生支付流水5司机账号进抢单大厅能看到该订单6抢单状态已接单用户端可见司机信息7两个司机同时抢同一单只有一个成功另一个得到明确提示8开始运输“运输中”9完成运输“已完成”司机余额到账扣平台 10%10用户评价订单详情显示星级11司机提现余额扣减后台财务出现待打款12后台标记已打款流水状态变更13用户取消一单未支付态状态已取消可再下单14后台仪表盘上面所有动作的数字都对得上第 7 步是重点开两个浏览器或一台手机电脑同时点抢单验证乐观锁真的只有一个赢家。联调发现的问题长什么样小程序端短路写法导致司机页流水永远不加载return this.loadOrders() this.loadFlows()首个函数返回 undefined——联调的意义就是把这种单测测不出、上线必爆炸的问题在前置阶段揪出来前端时间显示不对后端LocalDateTime序列化带 T前端统一格式化函数解决本篇成果14 步全链路走查通过三端联调完成。只剩最后一篇上线清单——域名、备案、类目资质、真实登录支付替换一次讲完。
返回列表