简介这是一款面向微信小程序初学者与娱乐开发者的零钱模拟器源码核心玩法是插上充电器后界面数值自动上涨模拟零钱充值效果适合用来练习小程序页面渲染、定时器与状态更新等基础交互逻辑也可作为趣味 Demo 二次修改。资源包共 20 个文件以 json 配置、js 逻辑脚本、wxss 样式与 wxml 结构为主另含少量 txt 说明与 png 图片整体仅 71KB结构轻量、便于快速导入微信开发者工具查看与提交审核无需额外配置合法域名。目前已有 378 人学习下载。通过阅读源码可了解小程序目录组织方式、页面数据绑定与自动增长数值的实现思路并在此基础上替换文案、样式或增长规则快速做出属于自己的趣味小程序。1. 微信零钱模拟器小程序源码一个能跑通的余额动画演示工程前阵子帮朋友做一个线下门店的互动大屏需求很直接扫码进小程序点一下按钮余额数字从 0 滚到 8888配上到账音效和金币掉落动画用来做抽奖前的氛围铺垫。找了一圈现成方案要么是纯静态图要么动画卡得像 PPT。后来翻到这份「微信零钱模拟器」小程序源码拆开跑了一遍发现它把余额滚动、到账提示、按钮状态机这几块拆得挺清楚改起来不费劲。它本质上是一个前端演示工程用小程序原生组件模拟微信零钱的视觉和交互反馈适合做活动暖场、教学演示或者 UI 动效练手。如果你正在找一份能直接导入开发者工具、改几个参数就能用的余额动画源码这份东西值得花十分钟看下去。2. 拆开工程看结构页面栈、数据绑定与动画时序拿到一个 zip 包别急着点编译。先看目录再决定从哪个文件下手改。这份源码的目录结构是典型的小程序原生工程没有用 uni-app 或 taro 那类跨端框架所以依赖少、编译快但也意味着你没法直接复用到 H5 或 App 端。2.1 目录清单与入口文件定位解压后大致是这么几层wechat-balance-simulator/ ├── app.js ├── app.json ├── app.wxss ├── project.config.json ├── sitemap.json └── pages/ ├── index/ │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── logs/ └── ...app.json里注册了页面路径和窗口样式project.config.json里写死了 appid 占位符。我一般先打开project.config.json把appid换成自己的测试号不然开发者工具会提示无权限预览。pages/index/index.js是主逻辑余额数字、按钮状态、定时器都在这里。index.wxml负责结构index.wxss管样式金币动画的 keyframes 也在 wxss 里。提示如果导入后模拟器白屏先检查app.json里pages数组的第一项是不是pages/index/index顺序错了会找不到首页。2.2 余额滚动的数据驱动逻辑余额从 0 涨到目标值核心不是 CSS 动画而是setData配合setInterval做数字递增。源码里这段逻辑写在index.js的startRecharge方法中我把它简化后贴出来// pages/index/index.js Page({ data: { balance: 0, // 当前显示余额单位分 target: 888800, // 目标余额8888.00 元 isRunning: false, // 防止重复点击 step: 0 // 当前递增步长 }, startRecharge() { if (this.data.isRunning) return; this.setData({ isRunning: true, balance: 0 }); const total this.data.target; const duration 2000; // 动画总时长 2 秒 const interval 16; // 约 60fps const steps duration / interval; const increment total / steps; let current 0; this.timer setInterval(() { current increment; if (current total) { current total; clearInterval(this.timer); this.setData({ isRunning: false }); wx.vibrateShort(); // 到账震动反馈 } // 转成元并保留两位小数 this.setData({ balance: (current / 100).toFixed(2) }); }, interval); } });逻辑说明balance存的是分避免浮点误差target是目标值改这个数字就能改最终余额。duration控制动画快慢interval越小越流畅但性能开销越大16ms 是常见折中。isRunning是防抖锁防止用户连点导致多个定时器叠加。到账后调wx.vibrateShort给个触觉反馈这个在小程序里是原生能力不需要额外权限。参数怎么改想把余额改成 6666就把target改成666600想让动画慢一点把duration调到 3000如果低端机上掉帧把interval改成 32牺牲流畅度换稳定性。2.3 按钮状态机与到账提示的联动按钮不是点完就完事它有三个状态可点击、进行中、已完成。源码里用isRunning和balance target两个条件控制按钮文案和禁用态。index.wxml里大概是这样view classbalance-card text classlabel零钱余额/text text classamount¥{{balance}}/text /view button classrecharge-btn disabled{{isRunning}} bindtapstartRecharge {{isRunning ? 到账中... : 立即充值}} /button view classtoast wx:if{{balance 8888.00}} 到账成功 /viewdisabled绑isRunning动画跑的时候按钮变灰防止重复触发。到账提示用wx:if判断余额是否等于目标值等于才显示。这里有个细节balance是字符串toFixed返回字符串所以比较时要用8888.00而不是数字8888。我见过有人改成数字比较结果提示死活不出来查了半天才发现是类型问题。注意wx:if和hidden的区别在于前者会销毁节点后者只是隐藏。到账提示用wx:if没问题但如果提示里有动画反复销毁重建会闪那种场景改用hidden更稳。3. 导入开发者工具到真机预览完整操作链路源码能不能跑取决于你有没有把 appid、编译模式和基础库版本这三样对上。这一章按顺序走一遍从解压到真机看到动画中间涉及几个容易卡住的配置项。3.1 导入项目与 appid 配置打开微信开发者工具选「导入项目」目录指向解压后的根目录。appid 那一栏如果你有自己的小程序账号直接填没有就点「测试号」工具会自动生成一个。project.config.json里的appid字段会被工具覆盖所以不用手动改文件。导入后工具会提示「当前项目使用了测试号部分能力受限」这是正常的。测试号不能真机预览只能模拟器跑。想真机看效果必须用已注册的小程序 appid并且把你的微信号加到开发者列表里。编译模式默认是「普通编译」入口页面选pages/index/index。如果工具报「未找到入口」去app.json里确认pages数组第一项是不是这个路径。3.2 基础库版本与 API 兼容性wx.vibrateShort这个 API 在基础库 1.2.0 以上才支持setInterval倒是没限制。工具右下角有个「详情」按钮点开「本地设置」把「调试基础库」调到 2.20.0 以上基本不会遇到 API 缺失的问题。如果你要把这份源码嵌到自己的项目里注意app.json里的window配置。源码里设了navigationBarTitleText: 零钱模拟器你合并的时候别把这个字段覆盖掉不然标题会变成默认的「WeChat」。{ pages: [pages/index/index], window: { navigationBarBackgroundColor: #07C160, navigationBarTitleText: 零钱模拟器, navigationBarTextStyle: white } }navigationBarBackgroundColor用的是微信绿#07C160和零钱页面视觉一致。想改成别的颜色直接换十六进制值就行但注意navigationBarTextStyle只有black和white两个选项别填其他值。3.3 真机预览与性能观察点工具右上角「预览」生成二维码手机扫码。真机上重点看三件事余额滚动是否跟手、震动反馈是否触发、按钮禁用态是否生效。如果滚动明显卡顿打开手机开发者工具的「性能」面板看setData的调用频率。源码里每 16ms 调一次setData在低端安卓机上可能扛不住。优化手段是把interval调到 32 或 48或者改用wx.createSelectorQuery配合 CSS 变量做纯样式动画但后者改动量大看你的时间预算。震动没反应先确认手机没开静音再检查基础库版本。wx.vibrateShort在部分安卓机型上需要用户授权scope.vibrate但小程序默认不弹授权框失败也不报错属于玄学范畴。我一般会在fail回调里打个日志方便排查。wx.vibrateShort({ success: () console.log(震动成功), fail: (err) console.log(震动失败, err) });4. 避坑与常见问题排查从白屏到数字不动的六条血泪记录这份源码本身不复杂但小程序开发环境的坑一个不少。下面六条是我和身边人实际踩过的按「现象 → 原因 → 解决」写清楚你遇到类似情况可以直接对号入座。4.1 导入后模拟器白屏控制台无报错现象项目导入成功编译通过但模拟器一片空白控制台干干净净。原因app.json里pages数组的路径写错了或者pages/index/index目录下缺了.json文件。小程序要求每个页面必须有同名的.json哪怕内容是空的{}。解决检查pages/index/下是否有index.json没有就新建一个内容写{}。再确认app.json里路径大小写一致Index和index在小程序里是两回事。4.2 余额数字不动按钮点了没反应现象页面渲染正常按钮能点但余额一直是 0。原因setData里的balance被赋成了数字而 WXML 里用了toFixed或者字符串比较。源码里balance初始值是数字0但startRecharge里赋的是(current / 100).toFixed(2)返回字符串。如果中间某处把balance改回数字wx:if的比较就会失效。解决统一balance的类型为字符串初始值改成0.00。或者在 WXML 里用{{balance 8888}}做宽松比较但不推荐容易埋雷。4.3 真机预览提示「不在以下 request 合法域名列表中」现象模拟器正常真机扫码后报域名错误。原因源码里如果有网络请求比如拉取配置而app.json没配request合法域名。这份源码本身没发请求但如果你自己加了接口就会触发。解决开发阶段在「详情 → 本地设置」里勾选「不校验合法域名」真机预览时也勾上。上线前再把域名加到小程序后台的「开发设置」里。4.4 动画跑完后按钮没恢复可点击现象第一次点按钮动画正常跑完后按钮还是灰的点不动。原因isRunning在clearInterval之后没有重置为false或者重置的代码写在了setData回调外面异步时序对不上。解决把this.setData({ isRunning: false })放在clearInterval之后、wx.vibrateShort之前确保状态先复位再触发反馈。如果用了setData的 callback注意 callback 里的this指向。4.5 低端安卓机上数字滚动一顿一顿的现象iOS 上丝滑安卓千元机上像幻灯片。原因setData频率太高每次都要跨线程通信低端机渲染跟不上。解决把interval从 16 调到 32 或 48或者改用wx.createAnimation做纯 CSS 动画只调一次setData。后者性能最好但数字变化需要配合requestAnimationFrame自己算代码量大一倍。4.6 到账提示闪一下就消失现象余额到 8888 后「到账成功」的提示出现不到一秒就没了。原因wx:if的条件是balance 8888.00但setData是异步的最后一次赋值可能先触发isRunning变化导致页面重渲染时条件短暂为假。解决用一个独立的showToast布尔字段控制提示显示在clearInterval之后setData({ showToast: true })再用setTimeout三秒后置回false。别依赖余额数值做显示条件。5. 进阶改造把余额动画接到真实业务数据上源码跑通只是第一步真正要用起来得把写死的target换成接口返回的金额再加一个「重置」按钮方便反复演示。这一章给两个具体改法一个偏数据接入一个偏交互增强。5.1 用云函数或本地缓存模拟数据源最省事的做法是用wx.getStorageSync读本地缓存演示前手动塞一个值进去。但更接近真实场景的是走云开发建一个云函数返回随机金额。// cloudfunctions/getBalance/index.js const cloud require(wx-server-sdk); cloud.init(); exports.main async () { // 模拟从数据库读取用户余额单位分 const balance Math.floor(Math.random() * 1000000) 100000; return { balance }; };页面里调用wx.cloud.callFunction({ name: getBalance, success: (res) { this.setData({ target: res.result.balance }); }, fail: (err) { console.error(获取余额失败, err); // 兜底用默认值别让页面卡死 this.setData({ target: 888800 }); } });参数说明balance返回的是分页面里target也存分保持一致。fail回调里一定要给兜底值不然云函数超时的时候页面就僵住了。云开发需要在小程序后台开通测试号不支持这是硬门槛。5.2 加一个重置按钮方便反复演示演示场景经常需要「再来一次」加个重置按钮比重新编译快得多。在index.wxml里加一行button classreset-btn bindtapresetBalance重置演示/buttonindex.js里补方法resetBalance() { if (this.timer) clearInterval(this.timer); this.setData({ balance: 0.00, isRunning: false, showToast: false }); }注意clearInterval之前先判断this.timer是否存在不然会报clearInterval参数无效。重置后isRunning归位按钮恢复可点整个状态机回到初始态。5.3 用 CSS 变量控制金币动画的节奏源码里金币掉落是纯 CSS keyframes改节奏不用动 JS。找到index.wxss里的keyframes coinFall调整animation-duration和animation-delay就行。.coin { animation: coinFall 1.2s ease-in forwards; } keyframes coinFall { 0% { transform: translateY(-40rpx) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(200rpx) scale(1); opacity: 0; } }1.2s是单枚金币的下落时长ease-in让加速感更自然。想让金币密集一点在 WXML 里多渲染几个.coin节点用wx:for循环每个节点加不同的animation-delay。注意别超过 20 个低端机上 DOM 节点多了会掉帧。5.4 验证改造是否成功的三个检查点改完之后别急着交付按这三步过一遍第一模拟器里点「立即充值」余额从 0 滚到目标值按钮变灰再恢复第二点「重置演示」余额归零提示消失按钮可点第三真机扫码震动触发金币动画不卡顿。三步都过基本就没问题了。从那以后我每次拿到这类演示源码都强制先跑一遍「重置 → 充值 → 再重置」的循环确认状态机没有残留。很多看着能跑的工程第二次点击就翻车后悔药都没得吃。希望这份拆解帮你省下几个小时的排查时间顺利把余额动画接到自己的场景里。本文还有配套的精品资源点击获取