← 返回Demo导航

📱 微信小程序演示

能源科技充电桩业务管理系统 - 用户端应用

✨ 小程序概述

本小程序为能源科技充电桩管理系统的移动端用户应用,提供完整的充电服务体验。用户可通过微信小程序快速登录、查找充电站点、进行充电操作、查看订单历史和申请发票。

📋 核心功能模块

🔐 用户认证

支持微信授权登录和手机号登录,安全快速的身份验证。

🗺️ 站点查询

首页展示推荐站点,支持附近站点搜索和收藏功能。

🔋 充电管理

扫码充电、实时进度展示、充电状态查看、停止充电等完整操作。

📊 订单管理

查看所有充电订单、订单详情、支付记录、订单评价。

💰 钱包系统

余额查看、充值功能、交易流水、优惠券管理。

📱 个人中心

用户信息管理、设置修改、帮助反馈、账户注销。

🛠 技术栈

原生开发

微信小程序原生框架

UI组件库

Vant Weapp

状态管理

Mobx 或原生Store

存储方案

本地存储 + 云存储

网络请求

wx.request API

地理定位

腾讯地图 API

📁 项目结构

/charging/miniapp/ ├── pages/ # 页面目录 │ ├── login/ # 登录页 │ ├── index/ # 首页(站点列表) │ ├── charge/ # 充电页 │ ├── order/ # 订单列表 │ ├── order-detail/ # 订单详情 │ ├── wallet/ # 钱包 │ └── mine/ # 个人中心 ├── components/ # 公共组件 ├── api/ # API服务 │ ├── userApi.js # 用户接口 │ ├── siteApi.js # 站点接口 │ ├── chargeApi.js # 充电接口 │ ├── orderApi.js # 订单接口 │ └── couponApi.js # 优惠券接口 ├── utils/ # 工具函数 │ ├── storage.js # 本地存储 │ ├── request.js # 网络请求 │ └── util.js # 通用工具 ├── app.js # 应用入口 ├── app.json # 应用配置 └── app.wxss # 全局样式

🎯 页面流程

登录页 (Login) ↓ (微信授权) 首页 (Index) - 站点列表 & 搜索 ├─ 查看站点详情 ├─ 收藏站点 └─ 扫码充电 → 充电页 (Charge) ├─ 实时进度展示 ├─ 设备状态 ├─ 停止充电 └─ 充电完成 订单页 (Order) - 查看历史订单 ├─ 订单详情 (Order Detail) ├─ 支付状态 ├─ 评价订单 └─ 下载发票 钱包页 (Wallet) - 余额和充值 ├─ 查看交易流水 └─ 充值功能 个人中心 (Mine) - 用户信息 ├─ 编辑个人资料 ├─ 收藏管理 └─ 账户设置
📌 演示说明:

• 本小程序为功能演示版本,后端API接口由微服务架构提供

• 实际部署时需要配置微信支付、地图服务等第三方接口

• 所有接口均遵循 RESTful 规范,前后端分离架构

• 支持离线缓存,优化移动网络体验

🚀 快速开始

# 1. 下载微信开发者工具 访问: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html # 2. 导入小程序项目 项目目录: /Users/xiege/WorkBuddy/charging/miniapp/ # 3. 配置AppID 编辑 app.json,填入微信小程序AppID # 4. 配置API服务器地址 编辑 api/ 目录中的文件,配置后端服务器地址 例: https://api.example.com:8080 # 5. 预览或上传 使用开发者工具进行预览、测试或上传发布

📊 关键数据说明

📱 小程序Demo正在加载中...

由于小程序是原生开发,需使用微信开发者工具预览。
此页面仅为功能介绍。

← 返回Demo导航
湘ICP备2021017731号-1