简介一套可直接运行的微信小程序源码面向想学习小程序开发或尝试流量主变现的开发者用抛硬币的趣味玩法解决日常选择困难场景。压缩包共24个文件包含10个png图片资源、5个json配置、4个js逻辑、3个wxss样式及2个wxml页面结构整体仅1.54MB结构精简适合快速上手。已有64人学习下载。通过微信开发者工具导入即可运行无需配置合法域名降低了部署门槛项目自带流量主相关设置为后续广告接入预留了路径。对于初学者可参照页面、样式、逻辑分离的代码组织方式理解小程序基础架构对有运营需求的开发者则可在此基础上接入广告组件将趣味工具转化为收益入口。整体轻量实用适合作为微信小程序练手或直接发布运营的素材。1. 抛硬币小程序的流量主逻辑一个随机数能养活一个项目生活里最贵的其实是决定。起不起床、叫不叫外卖、打不打扫抛个硬币就把选择权交给天意。这款抛硬币小游戏源码本质上就是一个“轻决策工具”核心逻辑只有一个随机数页面也只有两三个但它符合微信小程序最容易变现的两个特征使用频次高、用户思考成本低。它不请求后端、不依赖第三方接口也不需要配置合法域名微信开发者工具打开就能跑通替换 AppID 和广告位 ID 后就能提交审核。作为带流量主的微信小程序源码它的运营重心不在功能复杂度而在广告位的摆放节奏、分享回流设计和随机结果的视觉呈现。接下来按源码结构、随机数实现、流量主接入、发布配置和运营优化五个方向拆开讲把能直接复现的步骤和容易踩的坑一并写清楚。2. 页面骨架与随机数逻辑pages/coins、app.json、util.js 是怎么配合的拿到源码先别急着点编译。这个项目没有复杂网络依赖看清楚哪些文件需要改、哪些文件只是开发者工具生成的本地配置后面换 AppID、换广告位才不会到处翻代码。2.1 解压后的文件清单哪些要改哪些不能提交源码包里包含的文件并不多对应关系可以按下表理解文件/目录作用是否需要修改app.json小程序全局配置页面路由、窗口样式、基础库版本都在这需要确认页面路径和标题app.js全局生命周期与公共变量广告实例常从这里初始化需要替换广告位 IDapp.wxss全局样式文件一般不动project.config.json开发者工具工程配置包含 appid、编译选项必须替换为你的 AppIDproject.private.config.json本机私有配置工具自动生成不随项目提交utils/util.js抛硬币随机函数等公共方法核心代码pages/coins抛硬币主页面目录主要改这里pages/about关于页可作为流量主 banner 的承载页可按需修改project.private.config.json 是开发者工具运行后生成的私有配置里面会写入当前机器的 appid 和本地编译状态。它出现在源码包中只是因为原作者导出 zip 时没有清理不影响运行但提交 git 时应该忽略它。app.json 是微信小程序源码里最值得先看的入口。如果页面目录是标准四件套结构配置大概像这样{ pages: [ pages/coins/index, pages/about/index ], window: { navigationBarTitleText: 抛硬币, navigationBarBackgroundColor: #161823, navigationBarTextStyle: white }, style: v2, sitemapLocation: sitemap.json }pages 字段的写法是“目录名/文件名”不需要带.js后缀。微信开发者工具会根据这个列表自动补全页面文件真正运行时也按这里的顺序加载首页。如果你解压后目录里直接是pages/coins/coins.js那么这里就应该写pages/coins/coins需要和实际文件名保持一致。style: v2会启用新版组件样式不影响抛硬币动画但会让默认的 button、view 间距更接近移动端规范。2.2 反面还是正面util.js 里的随机数到底公正吗打开 utils/util.js你会看到一个非常精简的函数通常长这样function tossCoin() { // 0 表示正面1 表示反面 // 这里用 0.5而不是 0.5 return Math.random() 0.5 ? 0 : 1; } module.exports { tossCoin: tossCoin };Math.random() 返回一个[0, 1)区间的浮点数理论上是均匀分布。把它与 0.5 比较正反各占一半。这被称为伪随机因为它由一个确定性算法生成但对抛硬币这种低频交互场景完全够用不需要像安全系统那样引入加密随机源。常见错误是有人写成Math.random() 0.5虽然看起来只是方向不同概率上依然是均等但会造成正反语义和 UI 文案错位调试起来很隐蔽。更危险的是用Math.floor(Math.random() * 1)结果永远是 0。还有一种做法是用Math.round(Math.random())在边界值 0.5 附近容易让新人对结果产生误解不如 0.5直观。为了确认自己的源码没有被改坏可以在开发者工具 Console 或 Node 环境跑一个分布验证let head 0, tail 0, total 100000; for (let i 0; i total; i) { if (Math.random() 0.5) head; else tail; } console.log(正面占比, head / total); console.log(反面占比, tail / total);跑十万次后正面占比大概在 0.498 到 0.502 之间。如果偏差明显超过这个范围说明随机函数可能被套了平均值、固定种子或额外取整操作。对流量主小程序来说随机性不只是公平问题还关系到用户对产品的信任感。一旦多次抛掷结果出现明显规律分享率和留存都会受影响。2.3 让硬币转起来wxml、wxss 和 setData 的配合抛硬币小程序不能用文字直接替代结果那样留存会很差。真正的页面会用一个可点击的硬币视图实现翻转动画。pages/coins/index.wxml 的结构通常是这样view classtoss-page view classcoin {{coinClass}} bindtaponToss view classcoin-face front字/view view classcoin-face back花/view /view text classresult-text{{resultText}}/text /view对应的 wxss 使用 CSS 3D 变换.coin { width: 220rpx; height: 220rpx; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; } .coin.flipping { transform: rotateY(720deg); } .coin-face { position: absolute; width: 100%; height: 100%; border-radius: 50%; backface-visibility: hidden; } .front { background: #f5c242; } .back { transform: rotateY(180deg); background: #a9772e; }这里的动画逻辑是旋转 720 度也就是两圈最后一圈结束正好把背面转到正面。硬币翻转的实现不需要 canvas一个 220rpx 的 view 加 transition 足够。页面 js 中的抛掷处理是这个项目的核心节奏Page({ data: { coinClass: , resultText: 点击硬币开始 }, onToss() { if (this.data.animating) return; const result tossCoin(); this.setData({ animating: true, resultText: }); setTimeout(() { this.setData({ coinClass: flipping, resultText: result 0 ? 正面就它了 : 反面再想想 }); }, 0); setTimeout(() { this.setData({ animating: false }); }, 700); } });animating是一把锁防止用户连续点击导致动画还没完成就进入下一次随机。动画结束后的文案不要写“你赢了”“你输了”抛硬币不涉及输赢用“就它了”“再想想”这种决策辅助语义更容易转成分享话术。3. 流量主接入从开通到把广告嵌进 coins 页面带流量主是这个源码和普通练习项目的最大区别。源码里已经预留了广告组件和实例化代码但广告位 ID 不能从压缩包直接带到你的账号必须自己去申请并替换。3.1 流量主后台创建广告位adunit 不能共用登录微信公众平台进入“流量主”菜单后可以看到广告位列表。创建广告位时要注意banner 广告位、激励视频广告位、插屏广告位是彼此独立的不能用一个 ID 代替另一种类型。下表对比三种常见广告形式的接入差异广告类型接入方式是否主动触发建议位置Bannerad unit-idadunit-xxx被动展示结果页底部、关于页顶部激励视频wx.createRewardedVideoAd()用户点击后触发“再抛一次”“天意加抛”入口插屏wx.createInterstitialAd()页面自然切换从 coins 跳到 about 时创建完成后会得到一个adunit-xxxx格式的 ID。你需要把源码中所有这个格式的字符串替换成自己的一般在 app.js、config.js 或页面 data 中集中声明。只替换一个地方会导致部分页面广告不展示而替换错了类型广告位会一直处于无填充状态。3.2 在 coins 页面插入 bannerwxml 与错误处理在结果文本下方加入一个容器view classad-container ad unit-id{{bannerUnitId}} binderroronAdError/ad /view页面 data 中暴露对应广告位 IDdata: { bannerUnitId: adunit-xxxxxxxx }, onAdError(err) { // 广告组件加载失败时静默处理不对用户弹窗 console.warn(banner ad error, err.detail); }ad是微信原生广告组件宽高由平台控制不能用 CSS 强行缩放。在开发者工具中看到灰色占位是正常的因为工具没有真实广告流量需要真机预览才能看到实际素材。如果你的页面布局是整体居中且底部没有多余空隙广告组件会撑开页面最好在 wxml 中留一个ad-container区域避免广告出现时把硬币动画顶到屏幕外。3.3 激励视频用户主动看完才给一次“天意加抛”激励视频是这类小程序里收益潜力最高的形式因为它把广告变成了用户主动选择的行为。标准接入流程如下let rewardedVideoAd null; Page({ data: { rewardedUnitId: adunit-video-xxxx }, onLoad() { if (wx.createRewardedVideoAd) { rewardedVideoAd wx.createRewardedVideoAd({ adUnitId: this.data.rewardedUnitId }); rewardedVideoAd.onError(err { console.warn(激励视频加载失败, err); }); rewardedVideoAd.onClose(res { if (res res.isEnded) { wx.showToast({ title: 天意已加码, icon: success }); } else { wx.showToast({ title: 完整看完才算数哦, icon: none }); } }); } }, onCoinsMore() { if (!rewardedVideoAd) { wx.showToast({ title: 当前环境暂不支持, icon: none }); return; } rewardedVideoAd.show().catch(() { rewardedVideoAd.load().then(() rewardedVideoAd.show()); }); } });onClose中的res.isEnded用来判断用户是否完整观看广告。只有播放完成才发放奖励是流量主平台的底线不会被轻易判定为异常激励。show().catch()是 Promise 写法当广告没有填充时先 load 再 show能明显提高首次展示成功率。注意wx.createRewardedVideoAd在低版本基础库上不存在所以初始化前一定要先做能力检测。3.4 广告容器高度和页面遮挡加入 banner 后硬币动画默认居中布局广告一旦渲染出来会把页面底部内容往下挤。比较稳妥的做法是在 onReady 里查询广告容器高度动态给页面底部留出空间onReady() { const query wx.createSelectorQuery(); query.select(.ad-container).boundingClientRect(); query.exec((res) { if (res[0]) { this.setData({ adHeight: res[0].height }); } }); }然后在 wxml 根节点上设置内边距view classtoss-page stylepadding-bottom: {{adHeight}}px这样即使广告位没有填充高度为 0页面也不会出现一片空白广告出现时则能保证主操作区不被遮挡。查询广告高度需要在广告真正渲染后执行如果刚好在广告组件正在创建时查询可能拿不到值可以在页面的show生命周期里再查一次。4. 发布前的运营配置合法域名、分享与数据埋点源码能在开发者工具里跑起来和能在微信里上线中间差着很多配置细节。一个带流量主的小程序提审之前必须先过域名、分享、隐私这关。4.1 没有外部网络请求合法域名就可以留空这个抛硬币源码之所以被作者强调“无需设置合法域名”是因为它整个决策过程都在本地完成没有调用wx.request、wx.uploadFile、wx.downloadFile这些接口。发布前可以在项目目录里执行一次扫描grep -r wx.request . --include*.js grep -r wx.uploadFile\|wx.downloadFile . --include*.js grep -r https:// pages utils app.js --include*.js前两条命令如果没有输出说明项目没有发起网络请求。第三条如果只匹配到注释里的地址或广告位说明文字同样不需要配置服务器域名。如果你后续加了数据统计 SDK、天气接口或远程运营开关那么就必须在小程序后台的“开发管理 - 开发设置 - 服务器域名”中配置对应域名而且域名必须已备案且支持 HTTPS。开发者工具里勾选“不校验合法域名”只能帮你跳过本地联调限制线上版本依然受小程序后台配置约束。很多源码作者会故意开这个选项让项目在工具里不报错但直接上传预览后会看到请求全部失败。这个抛硬币项目本身没有问题怕的是有人往里面加了远程图片或接口。4.2 分享到微信聊天onShareAppMessage 要具体到场景抛硬币的天然后续动作是分享给好友让朋友帮忙决定。默认的小程序分享标题是“抛硬币”太弱了。在 pages/coins 的 js 中重写Page({ onShareAppMessage() { return { title: 今天的选择交给硬币起床还是再睡, path: /pages/coins/index?fromshare, imageUrl: /assets/coin-share.png }; } });title 一定不要是“快来玩抛硬币”而要是一个具体两难问题。用户分享到群里的动机是想让朋友参与决策而不是推荐一个 App。path 中的fromshare参数可以在 onLoad 里拿到用来埋点或做后续的智能提示。imageUrl必须是本地资源路径建议使用 5:4 比例这样在聊天卡片中不会拉伸变形。如果没有提供分享图微信会截取当前页面但小程序页面截图经常是一片底色加一枚硬币非常影响点击率。4.3 提审前清单广告位、隐私声明和敏感词这类源码发布时会遇到三种典型被拒原因。第一是 AppID 没有替换干净开发者工具默认还是原作者的测试号。第二是广告位 ID 是别人的提审后广告区域空白或者被微信提示“广告位无效”。第三是文案涉嫌诱导比如在按钮上写“点击领红包”“看广告得奖励”。提交前按下表过一遍检查 project.config.json 中的 appid 是否替换为自己的小程序 AppID全局搜索adunit-确认所有广告位 ID 都已更换在小程序后台“设置 - 服务内容声明 - 用户隐私保护指引”中如实填写如果接入广告需要声明设备信息收集删除开发调试用的console.log和console.warn避免审核细节暴露调试痕迹确认页面文案不出现“赌一把”“下注”“进场费”等敏感词在“关于”页面写清楚小程序用途纯决策工具不存在平台外交易审核备注可以写“本小程序为抛硬币决策工具无支付、无虚拟货币、不涉及直播和 webview仅通过本地随机数实现功能。”审核人员看到这种描述通常会按工具类目快速处理。5. 把运营做厚广告位集中管理、激励视频预加载与结果延迟策略这一章不做过度扩展只把带流量主抛硬币项目真正能用上的三个操作写透。5.1 广告位 ID 集中管理不散落在页面里源码最初可能是开发者在测试时把广告位硬编码在页面里运营阶段再去找会非常麻烦。建议在项目根目录创建一个utils/config.jsmodule.exports { bannerAdUnitId: adunit-banner-xxxx, rewardedVideoAdUnitId: adunit-video-yyyy, enableBanner: true, enableRewardedVideo: true };然后在页面中引入const config require(../../utils/config.js); Page({ data: { bannerUnitId: config.bannerAdUnitId } });这样后续换主体、升级广告位、临时关闭某类广告都只需改一个文件。尤其当你在微信后台重新创建广告位时旧的 adunit 会逐渐失效集中替换比逐个页面检查风险低得多。5.2 激励视频预加载把 load 从点击回调提前到抛掷动作里很多开发者的惯性是在用户点击“再看一次”时才创建激励视频实例这样用户通常会经历一到两秒黑屏或加载动画。更合理的做法是在页面 onLoad 时就创建实例微信会自动开始拉取广告素材在用户点击抛硬币时再调用一次load()让下一轮广告在动画播放期间完成准备。onToss() { if (this.data.animating) return; if (rewardedVideoAd !this._adLoading) { this._adLoading true; rewardedVideoAd.load() .then(() { this._adLoading false; }) .catch(() { this._adLoading false; }); } this.startTossAnimation(); }这里的_adLoading是一个布尔锁防止用户在动画期间连续快速点击造成重复请求。注意load()返回 Promise 的行为在部分基础库版本上不一致稳妥的做法是把它当成可能没有 Promise 的 API先判断是否存在rewardedVideoAd.load().then再做兼容处理。广告加载失败不能影响抛硬币主流程随机结果照常展示广告只是增值入口不要让广告逻辑阻塞动画。5.3 让广告加载和动画节奏绑定而不是等在回调里最后一个可复现的小技巧是把动画时长拉长到与广告预加载窗口基本一致。当前动画 transition 是 0.6 秒加上 setTimeout 700 毫秒正好给激励视频素材一个缓冲期。在真机上如果发现激励视频点击后仍然出现白屏不要急着改广告位 ID先检查是否在onToss前创建了实例。源码里最常见的初始化位置是onLoad但有些作者会写在onReady之后导致用户已经打开页面几秒广告才开始请求。把初始化放在onLoad把预加载放在每次抛掷开始前广告填充率会比点击回调临时创建实例稳定得多。本文还有配套的精品资源点击获取