免费可商用!纯手搓带壳截图小程序源码,手把手教你替换自己的流量主广告
项目介绍
最近整理手搓了一套「带壳截图」微信小程序源码，支持把普通截图一键套上 iPhone、iPad、MacBook、Apple Watch、华为、三星等 27 款主流机型外壳，还能自定义背景色、渐变、透明底、比例裁切、缩放大小。效果接近网页版(https://inteer.top/app/mockup-maker)，但完全跑在微信小程序里，机型素材全在小程序本地文件，无需服务器和域名，生成速度快、支持保存到相册，适合做成工具类小程序。本文把这套源码免费分享给大家使用，并重点教你怎么改成自己的流量主广告位。主要功能
27 款机型模板：iPhone 17 全系列、iPhone 8、iPad / MacBook / iMac / Watch、华为 Mate / Pura / 折叠屏 / 手表 / 笔记本 / 电视、三星 S 系列等多种比例预设：1:1、4:3、9:16、圆角、铺满高清导出：使用 Canvas 2D 离屏渲染，所见即所得激励视频广告解锁保存：每天只需看一次广告，0 点自动重置源码获取
源码为微信小程序原生项目，直接导入微信开发者工具即可运行。下载后解压，得到 miniprogram 项目目录。快速导入运行
AppID 填写你自己的小程序 AppID（测试号也可以）首次运行如果提示机型列表为空，检查 miniprogram/app.js 里的 TEST_DEVICES 数组是否正常加载。重点：如何改成自己的流量主广告
项目里已经接好了激励视频广告，位置在保存到相册的环节。用户每天第一次保存时需要看一次激励视频，看完之后当天再保存直接免费，次日 0 点重置。- 创建成功后，复制广告位 ID，格式类似：adunit-xxxxxxxxxxxxxxxx
- 打开文件：miniprogram/pages/result/result.js
- 找到第 4 行：const AD_UNIT_ID = 'adunit-415e8640beca1462'
- 把引号里的 ID 换成你刚刚复制的广告位 ID，例如：const AD_UNIT_ID = 'adunit-1234567890abcdef'
常见调整项
修改机型参数（screenX/Y/W/H、圆角） miniprogram/app.js添加 / 隐藏机型 miniprogram/app.js 加 hidden: true默认缩放比例 miniprogram/pages/index/index.js背景颜色列表 miniprogram/pages/index/index.js 顶部 BG_COLORS保存广告提示文案 miniprogram/pages/result/result.js注意事项
广告位 ID 必须是你自己小程序后台创建的，复制别人的或用测试 ID 会导致广告无法加载。如果广告拉取失败（网络问题、未开通流量主、开发者工具环境），代码已经做了兜底处理：会直接放行保存，避免核心功能被广告卡住。上架前请检查各机型模板的 screenRadius 是否与实际模板图匹配，部分机型可能需要微调。模板图片存放在 miniprogram/images/templates/，如需新增机型，把 PNG 素材放进去，并在 app.js 里添加对应配置。免责声明
项目中涉及的机型模板图片版权归原作者所有，请勿用于商业售卖或侵犯品牌权益。流量主收益归替换后的小程序账号所有者所有，请遵守微信公众平台相关规范。如果你在使用过程中遇到机型对不准、广告不显示、保存失败等问题，欢迎在评论区留言，我会尽量回复。
10个月宝宝每天需要喝多少奶粉？
