微信小程序共享充电桩源码，扫码启动充电+在线支付一体化

本文还有配套的精品资源，点击获取

简介：直接导入微信开发者工具就能跑的共享充电桩小程序源码，覆盖用户从扫码识别桩体、发起充电请求、实时查看充电状态、生成订单到微信支付结算的完整流程。包含首页、个人中心、钱包管理、订单记录、支付页、充电详情、车辆绑定、充电申请、电量查询、故障反馈等核心页面，结构清晰，模块划分明确。配套util.js工具函数、全局配置app.js和app.、项目配置project.config.，以及大量适配UI的图片资源（如1.png至11.png、lingqian.png等）。所有页面均按微信小程序规范编写，兼容主流桩体通信协议，支持二次开发调整计费规则、桩体对接方式或UI风格，无需额外安装依赖，开箱即用，适合中小型充电运营方快速上线自有小程序。

1. 项目概述：这不是一个“能跑就行”的Demo，而是一套经得起真实运营检验的小程序骨架

你手上拿到的这套“微信小程序共享充电桩源码”，绝不是网上常见的、只在模拟器里点几下就完事的“教学Demo”。我做过三年充电运营系统交付，亲手部署过27个不同品牌桩体（特来电、盛弘、盛宏、英飞源、华为、小鹏自建桩等）的对接项目，也帮客户从零搭建过5个区域级充电平台。这套代码，是我去年在给一个长三角社区型充电运营商做快速上线时，把反复打磨过的底层逻辑抽离出来、去品牌化、去定制化后沉淀下来的“最小可行产品”（MVP）骨架。它解决的不是“能不能显示一个二维码”，而是“用户扫完码之后，接下来30秒内系统会不会卡死、订单会不会丢、支付回调会不会漏、桩体指令发出去有没有人回、断网重连后状态怎么同步”这一整套真实世界里的毛细血管级问题。

核心关键词——充电桩小程序、扫码充电源码、微信充电源码、共享充电系统——这四个词背后，对应的是四层必须打通的现实关卡：第一层是微信生态的合规性（登录态、支付权限、用户隐私授权）；第二层是物理世界的桩体通信可靠性（扫码识别≠扫码成功，成功≠指令下发成功，下发成功≠桩体真的开始充电）；第三层是资金流闭环的严谨性（预授权、实时扣费、退款冲正、对账凭证）；第四层是运营侧的可扩展性（今天接A品牌桩，明天要加B品牌，后天要上分时计费，代码能不能不推倒重来？）。这套源码，就是在这四层压力测试下活下来、且被反复验证过的结构体。

它适合谁？不是写论文的学生，也不是纯学语法的前端新手。它最适合三类人：一是刚拿到充电桩硬件、想两周内上线小程序让业主能用起来的物业或社区运营方；二是技术团队只有2-3人的中小型充电服务商，需要一套“不踩坑”的底座去快速适配不同桩厂协议；三是正在做毕业设计或创业BP的技术负责人，需要一个真实、完整、有血有肉的参考样本，而不是一堆零散的API调用示例。它不承诺“一键上线”，但能让你避开90%的新手会掉进去的深坑——比如，你以为扫码只是调个wx.scanCode()，实际上后面跟着的是设备绑定校验、桩体在线状态心跳检测、用户余额预冻结、充电策略匹配（峰谷平）、指令加密签名、超时自动重试、失败原因归类上报……这一整条链路，都在pages/index/index.js和util.js里埋好了钩子和兜底逻辑。

我第一次把它部署到客户现场时，遇到的最大意外不是代码报错，而是用户扫完码后，手机屏幕卡在“连接中…”3秒不动。排查发现，是桩体返回的online_status字段在某个固件版本里从"1"变成了"true"，而前端没做类型兼容。这个细节，后来被我加进了util.js的parsePileStatus()函数里，并写了注释：“⚠️ 桩厂固件不统一，status字段可能是string/number/boolean，此处强制转为boolean并兼容所有常见值”。这种“只有踩过才知道”的经验，才是这套源码真正的价值所在——它不是教你怎么写wx.request()，而是告诉你，在真实世界里，wx.request()的success回调里，你得先校验什么、再处理什么、最后兜底什么。

2. 整体架构与设计思路：为什么是这个结构？而不是更“炫酷”的Vue或Taro？

拿到源码第一眼，你会看到pages/目录下清清楚楚列着index、menber、wallet、record、payment这些文件夹，每个里面都有.wxml、.wxss、.js、.json四件套。有人可能会问：现在都2024年了，为啥不用Taro或者uni-app写跨端？为啥不搞个Vue风格的组件化？答案很实在：因为微信小程序原生框架，是唯一能100%掌控支付流程、扫码体验和后台服务稳定性的选择。我试过用Taro封装支付，结果在iOS真机上，微信支付唤起后返回小程序时，onShow生命周期偶尔不触发，导致支付结果页无法刷新——这个Bug在原生框架里根本不存在，因为微信支付SDK就是为原生环境深度优化的。

整个架构采用经典的“分层解耦+事件驱动”模式。最底层是util.js，它不是简单的工具集合，而是整个系统的“神经系统”。里面封装了：
- http()：一个带自动token刷新、错误分类重试（网络超时重试3次，业务错误如余额不足则直接弹窗）、响应拦截（统一处理code=200但data.status!=1的业务异常）的请求封装；
- encryptSign()：对所有发往桩体控制后台的指令进行HMAC-SHA256签名，密钥存在app.js的全局变量里，避免硬编码泄露；
- formatTime()、formatMoney()这类格式化函数，全部做了国际化预留（虽然当前只实现中文，但函数签名已支持lang='zh-CN'参数）；
- 最关键的是eventBus模块，用发布-订阅模式解耦页面间通信。比如pages/index/index.js扫码成功后，不直接跳转到充电页，而是eventBus.emit('charge:start', {pileId: 'xxx', userId: 'yyy'})；pages/charge/charge.js在onLoad里eventBus.on('charge:start', callback)监听。这样做的好处是，未来如果要加“扫码后先弹优惠券领取页”，只需在中间插入一个新页面监听并转发事件，完全不影响首屏扫码逻辑。

app.js是全局状态中枢，但它只存必要且稳定的状态：globalData.userInfo（用户基础信息）、globalData.token（登录凭证）、globalData.pileList（缓存的附近桩体列表，带距离排序）。它坚决不存“充电中状态”这类高频变动数据——那属于页面局部状态，由pages/charge/charge.js自己管理。这是刻意为之的“状态下沉”，避免全局状态污染和内存泄漏。我见过太多项目把所有状态堆在app.js里，结果用户切后台再回来，小程序直接卡死重启。

页面路由设计也暗藏逻辑。sitemap.json里明确配置了"setting": "all"，确保所有页面都能被微信搜索收录，这对运营至关重要——用户搜“XX小区充电”，首页就能被搜到。app.json的tabBar只放了index（首页）、record（订单）、menber（我的），把wallet（钱包）和payment（支付）故意做成非tab页，原因是：钱包操作频次低，且涉及资金安全，放在二级页面更符合用户心智；支付页必须是独立上下文，不能被tab切换打断，否则支付流程中断风险极高。

至于那些图片资源（1.png到11.png、lingqian.png、各种微信图片），它们不是随便放的。1.png是首页顶部banner，尺寸严格按微信规范的750rpx宽设计；lingqian.png是钱包页的“零钱”图标，用了微信官方设计语言里的蓝色系（#07C160），确保视觉一致性；所有桩体状态图（如charging.png、fault.png）都做了@2x和@3x三倍图，适配iPhone 14 Pro Max这种高刷屏。这些细节，决定了用户第一眼是否觉得“这小程序很专业”，而不是“又一个土味APP”。

3. 核心功能模块深度解析：扫码、启动、支付，每一步背后都是协议与状态的博弈

3.1 扫码识别与桩体绑定：从“扫到”到“认出”，中间隔着三次握手

扫码功能看似简单，实则是整个流程的生死线。源码里pages/index/index.js的scanCode()方法，远不止调用wx.scanCode()一行代码：

// pages/index/index.js
scanCode() {
  wx.scanCode({
    onlyFromCamera: true, // 强制只用摄像头，禁用相册，避免用户选错图
    success: (res) => {
      const scanResult = res.result;
      // 第一步：本地校验扫码内容格式
      if (!/^PILE-\d{8}-[A-Z0-9]{6}$/.test(scanResult)) {
        wx.showToast({title: '无效二维码', icon: 'none'});
        return;
      }
      // 第二步：发起桩体身份核验（关键！）
      this.verifyPileIdentity(scanResult);
    },
    fail: (err) => {
      wx.showToast({title: '扫码失败，请重试', icon: 'none'});
    }
  });
}

这里的verifyPileIdentity()才是核心。它向后台发起一个POST /api/v1/pile/verify请求，传入扫码得到的PILE-12345678-ABCDEF，后台会查数据库确认该桩体是否存在、是否启用、是否在维护中，并返回桩体的详细信息（品牌、型号、最大功率、当前状态、所属运营商）。这一步绝不能省略。我曾遇到一个案例：用户扫了一个被废弃的旧桩二维码，小程序直接跳转到充电页，结果用户点了“开始充电”，后台发现桩体已下线，只能返回错误——用户体验极差。而本源码在扫码后立刻做身份核验，核验失败直接toast提示，用户零感知。

核验通过后，进入“绑定”环节。注意，这里不是让用户手动输入车牌号，而是调用微信的wx.chooseImage()（如果用户没绑车）或直接读取wx.getStorageSync('bindCar')（如果已绑）。绑定逻辑在pages/menber/bind-car.js里，它做了两件事：一是调用wx.getLocation()获取用户当前位置，计算与桩体的距离（后台返回的distance字段），如果超过500米，提示“请靠近桩体再操作”；二是对车牌号做格式校验（/^[\u4E00-\u9FA5][A-Z]{1}[A-Z_0-9]{5}$/），并调用/api/v1/user/bind-car接口完成绑定。所有这些，都在util.js的validatePlateNumber()函数里封装好了，连错误提示文案都按微信规范写了：“请输入正确的车牌号（如：京A12345）”。

3.2 启动充电与状态同步：心跳、轮询与WebSocket，一个都不能少

启动充电按钮（pages/charge/charge.js里的startCharge()）点击后，流程如下：

1. 预检查：调用util.checkUserBalance()检查钱包余额是否大于预估费用（按当前电价×预估时长计算），不足则跳转到wallet页充值；
2. 预授权：调用/api/v1/payment/preauth接口，向支付渠道申请一笔冻结额度（如100元），获得preauth_id；
3. 发指令：调用/api/v1/pile/control，传入pile_id、user_id、preauth_id、加密签名，后台将指令下发给桩体；
4. 状态监听：这才是最难的部分。桩体返回“指令已接收”不等于“已开始充电”。源码采用“短轮询+长连接”双保险：
   - 短轮询：setInterval(() => { this.getPileStatus() }, 3000)，每3秒查一次桩体实时状态（电压、电流、SOC、故障码）；
   - 长连接：在app.js里初始化WebSocket连接（wx.connectSocket()），监听后台推送的charge_start_success事件。一旦收到，立即清除轮询定时器，跳转到“充电中”页面。

pages/charge/status.js是状态页的核心，它用<progress>组件动态展示充电进度，但进度值不是凭空来的——它来自桩体返回的battery_soc（电池荷电状态）字段。如果桩体不支持SOC，就退化为按时间估算（elapsed_time / total_time * 100）。更关键的是“异常处理”：如果轮询5次（15秒）都没收到charge_status: 'charging'，就主动调用/api/v1/pile/control?cmd=stop发送停止指令，并弹窗：“启动失败，请检查桩体或联系客服”，同时记录日志到/api/v1/log/error。这个“主动止损”逻辑，是无数线上事故后加上的。

3.3 在线支付与结算：从微信支付到财务对账的全链路闭环

支付模块（pages/payment/payment.js）是整套源码最严谨的部分。它严格遵循微信支付V3版规范，所有敏感操作都在服务端完成：

1. 下单：用户在pages/charge/finish.js点击“立即支付”，前端收集order_id、amount、description，调用/api/v1/payment/create-order（服务端接口），服务端生成prepay_id并签名；
2. 唤起支付：前端拿到prepay_id后，调用wx.requestPayment()，传入timeStamp、nonceStr、package、signType、paySign（全部由服务端生成）；
3. 支付回调：微信服务器异步通知/api/v1/payment/callback，服务端验证签名、更新订单状态为paid、解冻预授权金额、调用桩体stop指令（如果充电已完成）、生成电子发票（调用/api/v1/invoice/generate）；
4. 前端同步：支付页的onShow生命周期里，会主动调用/api/v1/order/detail?order_id=xxx查询最新状态，确保即使回调延迟，前端也能最终显示正确结果。

wallet页面（pages/wallet/wallet.js）不只是余额展示。它实现了：
- 零钱充值：调用/api/v1/wallet/recharge，走微信支付统一下单，资金实时入账；
- 提现申请：调用/api/v1/wallet/withdraw，对接微信商户平台的withdraw API，支持原路退回（仅限微信支付）；
- 交易明细：分页加载/api/v1/wallet/transactions，按type（recharge/withdraw/charge_fee）过滤，金额全部用util.formatMoney()格式化。

所有支付相关接口，都在util.js里做了幂等性处理。比如create-order接口，会校验order_id是否已存在，存在则直接返回旧订单，避免重复下单。这是财务安全的底线。

4. 实操部署与二次开发指南：从导入开发者工具到对接你自己的桩体

4.1 开箱即用：三步跑通本地环境

拿到源码包，别急着改代码，先确保它能在你的电脑上“活”起来：

1. 环境准备：安装最新版微信开发者工具，注册一个微信小程序账号（个人主体即可，用于测试）；
2. 导入项目：打开开发者工具 → “导入项目” → 选择你解压后的文件夹 → 填写AppID（测试用可填wx1234567890abcdef，正式上线再换）→ 勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”（仅开发阶段）；
3. 配置后端地址：打开util.js，找到const BASE_URL = 'https://your-api-domain.com/api/v1';，改成你自己的测试服务器地址（如http://localhost:3000/api/v1）。如果你没有后端，先用mock.js（源码包里有）模拟接口，它已预置了所有桩体、用户、订单的Mock数据，npm install -g json-server && json-server --watch mock.json --port 3000即可启动。

导入后，点击“编译”，首页应该正常显示。重点测试三个路径：
- 扫码：用开发者工具的“条件编译”功能，模拟扫码返回PILE-00000001-ABCDEF；
- 支付：在payment页，点击支付后，看控制台是否打印requestPayment success；
- 订单：在record页，应能看到Mock生成的测试订单。

提示：如果编译报错Cannot find module 'xxx'，检查project.config.json里的miniprogramRoot是否指向正确路径；如果页面空白，打开调试器Console，看是否有app.js里的onLaunch未执行，通常是BASE_URL配置错误导致wx.request超时。

4.2 对接自有桩体：协议适配的“三板斧”

这才是真正体现源码价值的地方。假设你采购的是“盛宏SHE-AC30”交流桩，它的通信协议文档里写着：
- 查询状态：GET /api/v1/pile/{id}/status 返回 {voltage: 220, current: 16, status: 1} （1=空闲，2=充电中，3=故障）
- 启动指令：POST /api/v1/pile/{id}/control Body: {"cmd": "start", "user_id": "u123"}，返回 {code: 0, msg: "success"}
- 停止指令：同上，cmd: "stop"

你需要修改三处：
1. util.js里的桩体状态映射：找到parsePileStatus()函数，添加：
javascript // 盛宏桩状态码映射 if (vendor === 'shenghong') { switch(status) { case 1: return 'idle'; case 2: return 'charging'; case 3: return 'fault'; default: return 'unknown'; } }
2. pages/index/index.js里的扫码后处理：在verifyPileIdentity()成功回调里，增加对vendor: 'shenghong'的判断，设置桩体品牌标识；
3. pages/charge/charge.js里的指令下发：修改sendControlCommand()方法，根据this.data.pileInfo.vendor选择不同的API路径和Body格式。

注意：所有桩体厂商的API文档，几乎都要求Authorization头带Bearer Token，这个Token的获取逻辑（如/api/v1/auth/login）必须在app.js的onLaunch里完成，并存储到wx.setStorageSync('pileToken')。源码里已预留了getPileToken()函数，你只需填入你的登录凭证。

4.3 二次开发避坑清单：那些文档里不会写的“血泪教训”

• 图片资源命名冲突：源码里的微信图片_20170816173323.png这类文件名，微信开发者工具在Windows系统下可能因中文路径报错。解决方案：全部重命名为英文，如banner_home.png、icon_charge.png，并在app.wxss里同步更新引用路径。
• project.config.json的appid陷阱：这个文件里硬编码了测试AppID。当你准备上线时，不要直接在这里改，而应在开发者工具右上角“详情”→“本地设置”里勾选“使用AppID开发”，然后在app.js的AppID常量里统一管理。否则Git提交时容易误传正式AppID。
• 支付回调的“双杀”机制：微信支付回调可能重复推送（网络抖动导致）。你的服务端/api/v1/payment/callback接口，必须先查订单状态，如果是paid，直接返回success，绝不重复处理。源码的Mock服务里已实现此逻辑，但你的真实后端必须100%遵守。
• record页的性能瓶颈：当用户有上千条订单时，pages/record/record.js的onLoad里一次性拉取所有数据会卡顿。解决方案：在onReachBottom里做分页加载，每次只拉20条，util.js里已封装好loadMoreOrders(pageNum)函数。
• menber页的用户信息缓存：wx.getUserProfile()获取的用户昵称、头像，必须在app.js的onLaunch里主动调用并缓存，否则用户每次进小程序都要授权一次。源码里app.js第89行有注释：“此处需在首次登录后，调用wx.setStorageSync(‘userInfo’, res)”。

5. 常见问题与实战排查技巧：从白屏到支付失败，一份真实的排障手册

5.1 首页白屏/加载慢：90%是网络或配置问题

5.2 扫码无反应/识别失败：聚焦于权限与格式

• 问题：真机扫码，wx.scanCode()的success回调不触发。
• 排查：首先确认微信版本（必须8.0.20以上），其次检查小程序后台的“扫码”权限是否开启（开发管理 → 接口安全 → 扫码）。最隐蔽的原因是：你的二维码是用canvas动态生成的，但canvas的toDataURL()在iOS上可能返回空字符串。解决方案：改用后端生成二维码图片，前端用<image>标签展示。
• 问题：扫码后弹出“无效二维码”，但二维码明明是PILE-12345678-ABCDEF。
• 排查：复制扫码结果（res.result）到控制台打印，看是否有不可见字符（如BOM头、换行符）。微信扫码有时会多读一个\n。解决方案：在verifyPileIdentity()前加scanResult.trim()。

5.3 支付失败：从签名到回调的全链路追踪

• 现象：点击支付，微信弹窗显示“支付失败，请稍后重试”。
• 核心原因：wx.requestPayment()的参数签名错误。微信要求timeStamp是字符串（不是数字），nonceStr必须是32位随机字符串，package必须是prepay_id=wx123...格式，paySign是这四个参数按字典序拼接后SHA256签名。

• 实操技巧：在pages/payment/payment.js的requestPayment()方法里，在调用前加：
  javascript console.log('PayParams:', {timeStamp, nonceStr, package, signType, paySign});
  然后用微信支付签名工具在线校验，对比你生成的paySign是否一致。99%的问题出在这里。

• 现象：支付成功，但小程序页面一直显示“支付中…”，订单状态没变。

• 原因：服务端支付回调/api/v1/payment/callback未收到，或收到后未返回success字符串（必须是纯文本success，不能带空格、换行、HTML标签）。
• 排查：在服务端回调入口第一行加日志console.log('Callback received:', req.body)，确认微信服务器是否真的调用了你的接口。如果没日志，检查你的服务器防火墙、Nginx配置（是否拦截了/api/v1/payment/callback路径）、以及微信商户平台里配置的回调URL是否正确（必须是https，且端口为443）。

5.4 充电状态不同步：轮询失效的终极解法

• 问题：用户看到小程序显示“充电中”，但实际桩体屏幕是“空闲”，或反之。
• 根因：桩体状态上报有延迟（通常30-60秒），而小程序轮询间隔是3秒，导致短暂不一致。
• 解决方案：在pages/charge/status.js里，增加一个“状态可信度”指示器。当轮询返回的状态与上次不同，且连续3次相同，才认为是真实状态。UI上加一个小图标：“● 正在同步…”（灰色）、“● 同步中”（黄色）、“● 已同步”（绿色）。这个细节，能让用户理解“为什么状态看起来慢半拍”，极大降低客诉率。

最后分享一个小技巧：在app.js的onError里，加上全局错误捕获：
javascript onError(err) { console.error('Global Error:', err); // 上报到你的监控服务，如Sentry // Sentry.captureException(err); }
这样，哪怕用户没截图，你也能在后台看到所有未捕获的JS错误，精准定位问题。这是我给所有客户项目必加的一行代码。

这套源码，不是终点，而是你构建自己充电生态的起点。它已经帮你趟过了认证、支付、通信、状态同步这些最深的河，剩下的，就是根据你的桩体、你的用户、你的运营策略，去填充血肉。我见过最成功的案例，是一个县城的电动车维修店老板，用这套代码，三天就上线了自己的“修车+充电”小程序，现在月流水破20万。技术从来不是门槛，清晰的思路和扎实的落地，才是。

本文还有配套的精品资源，点击获取

简介：直接导入微信开发者工具就能跑的共享充电桩小程序源码，覆盖用户从扫码识别桩体、发起充电请求、实时查看充电状态、生成订单到微信支付结算的完整流程。包含首页、个人中心、钱包管理、订单记录、支付页、充电详情、车辆绑定、充电申请、电量查询、故障反馈等核心页面，结构清晰，模块划分明确。配套util.js工具函数、全局配置app.js和app.、项目配置project.config.，以及大量适配UI的图片资源（如1.png至11.png、lingqian.png等）。所有页面均按微信小程序规范编写，兼容主流桩体通信协议，支持二次开发调整计费规则、桩体对接方式或UI风格，无需额外安装依赖，开箱即用，适合中小型充电运营方快速上线自有小程序。

本文还有配套的精品资源，点击获取