2026免服务器带壳截图小程序源码，原生微信小程序带流量主广告接口

项目介绍

最近整理了一套「带壳截图」微信小程序源码，支持把普通截图一键套上 iPhone、iPad、MacBook、Apple Watch、华为、三星等 27 款主流机型外壳，还能自定义背景色、渐变、透明底、比例裁切、缩放大小。

效果接近网页版，但完全跑在微信小程序里，生成速度快、支持保存到相册，适合做成工具类小程序。

主要功能

• 27 款机型模板：iPhone 17 全系列、iPhone 8、iPad / MacBook / iMac / Watch、华为 Mate / Pura / 折叠屏 / 手表 / 笔记本 / 电视、三星 S 系列等
• 多种背景：纯色、透明、渐变
• 多种比例预设：1:1、4:3、9:16、圆角、铺满
• 机型缩放：30% ~ 200% 自由调节
• 高清导出：使用 Canvas 2D 离屏渲染，预览区不闪烁
• 激励视频广告解锁保存：每天只需看一次广告，0 点自动重置

源码为微信小程序原生项目，直接导入微信开发者工具即可运行。

快速导入运行

1. 打开「微信开发者工具」
2. 选择「导入项目」
3. 选择解压后的项目目录
4. AppID 填写你自己的小程序 AppID（测试号也可以）
5. 等待依赖加载完成，点击「编译」

首次运行如果提示机型列表为空，检查 miniprogram/app.js 里的 TEST_DEVICES 数组是否正常加载。

如何改成自己的流量主广告

项目里已经接好了激励视频广告，位置在保存到相册的环节。
用户每天第一次保存时需要看一次激励视频，看完之后当天再保存直接免费，次日 0 点重置。

你只需要把广告位 ID 换成你自己的即可。

步骤 1：开通流量主

1. 登录 微信公众平台
2. 进入你的小程序后台
3. 左侧菜单找到「推广」→「流量主」
4. 按提示开通（需要累计独立访客达到 1000）

步骤 2：创建激励视频广告位

1. 进入「流量主」→「广告管理」
2. 点击「新建广告位」
3. 选择广告类型为 「激励式视频」
4. 填写广告位名称，比如：保存解锁广告
5. 创建成功后，复制广告位 ID，格式类似：adunit-xxxxxxxxxxxxxxxx

步骤 3：替换源码中的广告位 ID

打开文件：miniprogram/pages/result/result.js

找到第 4 行：const AD_UNIT_ID = ‘adunit-415e8640beca1462’

把引号里的 ID 换成你刚刚复制的广告位 ID，例如：const AD_UNIT_ID = ‘adunit-1234567890abcdef’

保存文件，重新编译即可。

真机测试

开发者工具通常无法播放真实广告，建议：

1. 点击开发者工具顶部的「预览」
2. 用手机微信扫码体验
3. 点击「保存到相册」，看是否能正常弹出广告
4. 完整观看后，确认能保存成功

注意事项

1. 广告位 ID 必须是你自己小程序后台创建的，复制别人的或用测试 ID 会导致广告无法加载。
2. 如果广告拉取失败（网络问题、未开通流量主、开发者工具环境），代码已经做了兜底处理：会直接放行保存，避免核心功能被广告卡住。
3. 上架前请检查各机型模板的 screenRadius 是否与实际模板图匹配，部分机型可能需要微调。
4. 模板图片存放在 miniprogram/images/templates/，如需新增机型，把 PNG 素材放进去，并在 app.js 里添加对应配置。

免责声明

本源码仅供学习交流及个人项目使用。
项目中涉及的机型模板图片版权归原作者所有，请勿用于商业售卖或侵犯品牌权益。
流量主收益归替换后的小程序账号所有者所有，请遵守微信公众平台相关规范。

如果你在使用过程中遇到机型对不准、广告不显示、保存失败等问题，欢迎联系，我会尽量回复。

觉得有用的话，可以点个赞或者转发给需要的朋友。