企业官网建设流程全解析

uniapp小程序端从0到1：HUIZHI-ChargeOS-cloud充电小程序开发指南

【免费下载链接】HUIZHI-ChargeOS-cloud⚡️慧知开源充电平台全套源码⚡️;⚡️完整业务流程⚡️； ①SpringCloud、MySQL、Netty、uniapp、云快充协议1.5 云快充协议1.6、互联互通协议、多租户、分时计费。 ②小程序、管理后台、多商户、模拟桩。 ③充电平台技术解决方案。项目地址: https://gitcode.com/gh_mirrors/hu/HUIZHI-ChargeOS-cloud

HUIZHI-ChargeOS-cloud（慧知开源充电平台）是一套基于 Spring Cloud 微服务架构的全开源充电平台源码，其中小程序端采用 uniapp 技术栈开发，覆盖"找桩-扫码-充电-支付-订单"完整业务流程。本文面向新手和普通开发者，从零开始讲解如何基于慧知开源充电平台搭建一套属于自己的充电小程序，内容包括整体架构、后端接口、登录流程、充电业务、联调测试与部署上线，帮助你快速上手充电小程序开发。

一、为什么选择uniapp开发充电小程序？

充电小程序开发最关心两件事：开发效率与多端覆盖。uniapp 最大的优势就是一套代码可以同时编译到微信小程序、支付宝小程序、H5 和 App，一次开发、多端复用，非常适合充电运营这种需要同时服务 C 端用户的场景。

在 HUIZHI-ChargeOS-cloud 项目中，小程序端与运营管理端（PC 后台）前后端分离，小程序通过 HTTP 接口与后端微服务通信，业务上天然解耦，你甚至可以完全不用修改后端，只专注在 uniapp 页面开发上。

二、认识充电小程序的后端支撑模块

虽然本文聚焦小程序端，但了解后端模块能让你更快定位接口。在 HUIZHI-ChargeOS-cloud 中，小程序专属的后端服务位于hcp-modules/hcp-mp，它专门负责小程序端的登录、充电、订单、支付、个人中心等接口，其余业务能力则通过微服务远程调用（Feign）由hcp-operator、hcp-api-system等模块提供。

核心控制器一览：

• 认证登录：hcp-modules/hcp-mp/src/main/java/com/hcp/mp/controller/AuthController.java，提供小程序登录、绑定手机号接口
• 充电桩：hcp-modules/hcp-mp/src/main/java/com/hcp/mp/controller/ChargingController.java，提供充电桩列表、电站详情接口
• 订单：hcp-modules/hcp-mp/src/main/java/com/hcp/mp/controller/OrderController.java，提供下单、订单列表、订单详情、结束充电接口
• 个人中心：hcp-modules/hcp-mp/src/main/java/com/hcp/mp/controller/MeController.java，提供会员信息、余额、积分接口
• 充值：hcp-modules/hcp-mp/src/main/java/com/hcp/mp/controller/PayController.java，提供余额充值接口

也就是说，小程序端需要的接口在后端基本已经齐备，你可以把精力重点放在 uniapp 的页面与交互实现上。

三、充电小程序的核心页面结构

参考项目中的界面展示，一个标准的充电小程序通常包含以下核心页面，这也是新手最容易对照实现的清单：

四、小程序登录与手机号绑定流程

充电小程序开发的第一步是打通登录。慧知平台的小程序登录采用微信授权 code 换取登录态的通用方案，接口定义在AuthController.java：

• POST /v1/auth/login：传入 appid 与微信登录 code，后端调用微信接口换取 openid 并完成用户注册/登录
• GET /v1/auth/appletBindMobile：传入 openId、code、appid，完成手机号绑定，为后续余额支付、订单通知做准备

在 uniapp 端，你只需在页面中调用微信的wx.login拿到 code，再请求上述接口即可。绑定的手机号会成为用户账户的核心标识，会员信息、余额都挂在用户 ID 之下。

五、找桩与充电桩列表接入

首页的核心能力是"找桩"。后端ChargingController.java提供了两个关键接口：

• POST /charging/getPlotInfoPage：分页查询充电桩（电站）列表，支持按距离、状态等条件筛选
• POST /charging/plotDetail：查询电站详情，包含充电桩、充电口与计费规则等信息

uniapp 端拿到接口数据后，可用地图组件展示电站分布，用列表组件展示电站卡片（距离、充电桩数量、空闲口数量等）。项目的hcp-operator模块还内置了站点管理、计费规则管理，后台配置好后小程序端即可实时展示。

六、发起充电与订单全流程

这是充电小程序开发的核心业务，完整链路为：选择充电口 → 下单 → 启动充电 → 充电中 → 结束充电 → 生成订单。

对应接口都在OrderController.java：

• GET /order/saveOrder：传入 portId、金额、时长、userId，创建充电订单并远程启动充电
• GET /order/queryOrderList：按用户与订单状态分页查询订单
• GET /order/orderDetail：按订单号查询订单详情
• GET /order/orderTrace：查询订单流转日志（下单、启动、结束等）
• GET /order/endCharge：结束充电，需要传入 pileId 与充电口 port

订单状态在后端由hcp-operator模块的常量类定义（如OrderState.java、ChargeStatus.java），小程序端通常用"进行中 / 已完成 / 已取消 / 异常"等状态做 UI 展示。

七、余额充值、积分与个人中心

除了充电业务，个人中心的"钱袋子"也是小程序端必须打通的模块：

• 余额查询：GET /me/getMemberBalanceByUserId，按 userId 查询账户余额
• 余额充值：GET /pay/xcxRecharge，按金额为用户余额充值（生产环境可在此接入微信支付）
• 会员信息：GET /me/getMemberInfoByOpenId，按 openId 查询会员资料
• 积分体系：GET /me/getUserCredit与GET /me/creditDetail，查看积分与积分明细
• 月度统计：GET /me/queryMonthTotalByUserId，查看用户当月充电数据

这些接口让小程序端可以完整呈现"余额 + 积分 + 消费记录"的闭环体验。

八、联调测试：善用模拟充电桩

对新手来说，没有真实硬件是最常见的痛点。HUIZHI-ChargeOS-cloud 特意内置了模拟充电桩（hcp-modules/hcp-simulator），可以在没有物理桩的情况下模拟充电桩上线、插枪、启动充电、结束充电等完整流程，配合管理后台的"模拟充电桩"页面，你可以在纯软件环境中完成小程序端与后端的全链路联调。

联调时建议按以下顺序验证：登录 → 查询电站 → 查看充电口 → 发起充电 → 观察充电中状态 → 结束充电 → 查看订单记录，全部跑通后再接入真实桩与支付。

九、部署与上线前的注意事项

当你完成充电小程序开发后，别忘了这几点：

1. 配置小程序信息：在管理后台的小程序管理中配置租户对应的 appid 与密钥，小程序端登录接口依赖这些配置
2. 对象存储配置：如果涉及上传图片（如用户头像、故障照片），需在后台配置对象存储（支持阿里云 OSS、腾讯云 COS、七牛云等），相关代码在hcp-modules/hcp-file
3. 多租户数据隔离：慧知平台支持多租户，小程序端请求会携带租户信息，联调时要确认租户配置正确
4. HTTPS 与合法域名：微信小程序正式环境要求所有请求域名备案并配置到小程序后台，务必提前处理
5. 支付接入：开源版提供充值接口，生产环境需要在此基础上接入微信支付并处理回调

十、总结

HUIZHI-ChargeOS-cloud 把充电小程序开发中最繁琐的后端部分（登录鉴权、充电协议、订单管理、多租户、计费规则）都封装好了，你只需要聚焦 uniapp 端页面开发与接口联调。按照本文的路径：先理解hcp-mp模块的接口，再依次实现首页找桩、电站详情、发起充电、订单列表与个人中心，最后用模拟充电桩完成全流程测试，就能从 0 到 1 交付一套可用的充电小程序。祝你开发顺利！

【免费下载链接】HUIZHI-ChargeOS-cloud⚡️慧知开源充电平台全套源码⚡️;⚡️完整业务流程⚡️； ①SpringCloud、MySQL、Netty、uniapp、云快充协议1.5 云快充协议1.6、互联互通协议、多租户、分时计费。 ②小程序、管理后台、多商户、模拟桩。 ③充电平台技术解决方案。项目地址: https://gitcode.com/gh_mirrors/hu/HUIZHI-ChargeOS-cloud