免费可商用!纯手搓带壳截图小程序源码,手把手教你替换自己的流量主广告
- 2026-09-25 00:55:52
免费可商用!纯手搓带壳截图小程序源码,手把手教你替换自己的流量主广告最近整理手搓了一套「带壳截图」微信小程序源码，支持把普通截图一键套上 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、圆角、铺满 机型缩放：30% ~ 200% 自由调节 高清导出：使用 Canvas 2D 离屏渲染，所见即所得 激励视频广告解锁保存：每天只需看一次广告，0 点自动重置 源码为微信小程序原生项目，直接导入微信开发者工具即可运行。 
下载后解压，得到 miniprogram 项目目录。 
打开「微信开发者工具」 选择「导入项目」 选择解压后的项目目录 AppID 填写你自己的小程序 AppID（测试号也可以） 等待依赖加载完成，点击「编译」 首次运行如果提示机型列表为空，检查 miniprogram/app.js 里的 TEST_DEVICES 数组是否正常加载。 项目里已经接好了激励视频广告，位置在保存到相册的环节。 用户每天第一次保存时需要看一次激励视频，看完之后当天再保存直接免费，次日 0 点重置。 你只需要把广告位 ID 换成你自己的即可。 步骤 1：开通流量主 步骤 2：创建激励视频广告位 步骤 3：替换源码中的广告位 ID 步骤 4：真机测试 开发者工具通常无法播放真实广告，建议： 想改什么文件位置 修改机型参数（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 里添加对应配置。 本源码仅供学习交流及个人项目使用。 项目中涉及的机型模板图片版权归原作者所有，请勿用于商业售卖或侵犯品牌权益。 流量主收益归替换后的小程序账号所有者所有，请遵守微信公众平台相关规范。 如果你在使用过程中遇到机型对不准、广告不显示、保存失败等问题，欢迎在评论区留言，我会尽量回复。 觉得有用的话，可以点个赞或者转发给需要的朋友。
项目介绍
主要功能
源码获取
快速导入运行
重点：如何改成自己的流量主广告
登录 微信公众平台 进入你的小程序后台 左侧菜单找到「推广」→「流量主」 按提示开通（需要累计独立访客达到 1000）
进入「流量主」→「广告管理」 点击「新建广告位」 选择广告类型为 「激励式视频」 填写广告位名称，比如：保存解锁广告 创建成功后，复制广告位 ID，格式类似：adunit-xxxxxxxxxxxxxxxx
打开文件：miniprogram/pages/result/result.js 找到第 4 行：const AD_UNIT_ID = 'adunit-415e8640beca1462' 把引号里的 ID 换成你刚刚复制的广告位 ID，例如：const AD_UNIT_ID = 'adunit-1234567890abcdef' 保存文件，重新编译即可。
点击开发者工具顶部的「预览」 用手机微信扫码体验 点击「保存到相册」，看是否能正常弹出广告 完整观看后，确认能保存成功
常见调整项
注意事项
免责声明
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
