带壳截图大家应该都见过吧，这次给大家分享一个带壳截图的小程序源码，经过测试呢，是完全可以运行的，这里依旧免费提供给大家，希望大家能够多多关注本站以及公众号，哈哈，再次感谢了。
来看看这个小程序吧，首先个大家看一个展示图。
基本上就是把自己自己截好的图片重新编辑一下，加一个手机框架，小程序自带多组框架，如果有能力的也可以自己再加一些最新的手机框架，还是挺实用的吧。
代码就不放了，放一下他的手机框架数据：
bgSrc: [ {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-silver.png",
srcs: [ {
name: "银 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-silver.png",
checked: "true",
isCDN: "true"
}, {
name: "深空灰",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-space-gray.png",
isCDN: "true"
}, {
name: "金 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-gold.png",
isCDN: "true"
}, {
name: "无刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-no.png",
isCDN: "true"
} ],
title: "iPhone 11 Pro/Max",
originBgFrame: [ 0, 0, 509, 1020 ],
originPicFrame: [ 37, 27, 436, 944 ],
originBgOffset: [ 80, 40 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-desk-2.png",
srcs: [ {
name: "带刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-desk-2.png",
checked: "true",
isCDN: "true"
}, {
name: "无刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-desk-no.png",
isCDN: "true"
} ],
title: "iPhone 11 Pro 充电",
originBgFrame: [ 0, 0, 943, 1055 ],
originPicFrame: [ 487, 323, 310, 670 ],
originBgOffset: [ 0, 0 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-in-hand-01.png",
srcs: [ {
name: "带刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-in-hand-01.png",
checked: "true",
isCDN: "true"
}, {
name: "无刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-in-hand-01-no.png",
isCDN: "true"
} ],
title: "iPhone 11 Pro 手持",
originBgFrame: [ 0, 0, 872, 591 ],
originPicFrame: [ 365, 104, 168, 363 ],
originBgOffset: [ 0, 0 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-in-hand-02.png",
srcs: [ {
name: "带刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-in-hand-02.png",
checked: "true",
isCDN: "true"
}, {
name: "无刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-in-hand-02-no.png",
isCDN: "true"
} ],
title: "iPhone 11 Pro 手持",
originBgFrame: [ 0, 0, 713, 980 ],
originPicFrame: [ 272, 145, 263, 569 ],
originBgOffset: [ 0, 0 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-plants.png",
srcs: [ {
name: "带刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-plants.png",
checked: "true",
isCDN: "true"
}, {
name: "无刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-plants-no.png",
isCDN: "true"
} ],
title: "iPhone 11 Pro 多肉",
originBgFrame: [ 0, 0, 900, 756 ],
originPicFrame: [ 82, 170, 193, 417 ],
originBgOffset: [ 0, 0 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-card.png",
srcs: [ {
name: "带刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-card.png",
checked: "true",
isCDN: "true"
}, {
name: "无刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-pro-max-card-no.png",
isCDN: "true"
} ],
title: "iPhone 11 Pro 黑卡",
originBgFrame: [ 0, 0, 829, 728 ],
originPicFrame: [ 129, 124, 187, 403 ],
originBgOffset: [ 0, 0 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-white.png",
srcs: [ {
name: "白 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-white.png",
checked: "true",
isCDN: "true"
}, {
name: "黑 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-black.png",
isCDN: "true"
}, {
name: "红 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-red.png",
isCDN: "true"
}, {
name: "黄 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-yellow.png",
isCDN: "true"
}, {
name: "无刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-11-black-no.png",
isCDN: "true"
} ],
title: "iPhone 11",
originBgFrame: [ 0, 0, 497, 993 ],
originPicFrame: [ 40, 32, 414, 900 ],
originBgOffset: [ 80, 40 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-8-plus-grey.png",
srcs: [ {
name: "黑 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-8-plus-grey.png",
checked: "true",
isCDN: "true"
}, {
name: "银 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-8-plus-silver.png",
isCDN: "true"
}, {
name: "金 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-8-plus-gold.png",
isCDN: "true"
} ],
title: "iPhone 7/8 Plus",
originBgFrame: [ 0, 0, 446, 916 ],
originPicFrame: [ 27, 101, 393, 699 ],
originBgOffset: [ 80, 40 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-se-space-gray.png",
srcs: [ {
name: "深空灰",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-se-space-gray.png",
checked: "true",
isCDN: "true"
}, {
name: "玫瑰金",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-se-rose-gold.png",
isCDN: "true"
}, {
name: "金 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-se-gold.png",
isCDN: "true"
}, {
name: "银 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/iphone-se-gold.png",
isCDN: "true"
} ],
title: "iPhone SE/5s/5",
originBgFrame: [ 0, 0, 383, 801 ],
originPicFrame: [ 26, 111, 329, 585 ],
originBgOffset: [ 80, 40 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/huawei/huawei-mate30.png",
srcs: [ {
name: "带刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/huawei/huawei-mate30.png",
isCDN: "true",
checked: "true"
}, {
name: "无刘海",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/huawei/huawei-mate30-no.png",
isCDN: "true"
} ],
title: "Huawei Mate 30",
originBgFrame: [ 0, 0, 360, 668 ],
originPicFrame: [ 35, 22, 288, 625 ],
originBgOffset: [ 40, 24 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-10-pro-sky-blue.png",
srcs: [ {
name: "星空蓝",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-10-pro-sky-blue.png",
checked: "true",
isCDN: "true"
}, {
name: "无摄像头",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-10-pro-sky-blue-no.png",
isCDN: "true"
} ],
title: "小米10 Pro",
originBgFrame: [ 0, 0, 600, 1199 ],
originPicFrame: [ 31, 20, 537, 1163 ],
originBgOffset: [ 64, 58 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-mix-3-no.png",
srcs: [ {
name: "无后盖",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-mix-3-no.png",
checked: "true",
isCDN: "true"
} ],
title: "小米MIX 3",
originBgFrame: [ 0, 0, 468, 880 ],
originPicFrame: [ 46, 36, 374, 810 ],
originBgOffset: [ 40, 20 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-mix-3-palace.png",
srcs: [ {
name: "故宫版",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-mix-3-palace.png",
checked: "true",
isCDN: "true"
}, {
name: "经典黑",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-mix-3-black.png",
isCDN: "true"
} ],
title: "小米MIX3 带后盖",
originBgFrame: [ 0, 0, 782, 880 ],
originPicFrame: [ 341, 28, 382, 828 ],
originBgOffset: [ 64, 58 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-mix-alpho-2.png",
srcs: [ {
name: "星空蓝",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/xiaomi/xiaomi-mix-alpho-2.png",
checked: "true",
isCDN: "true"
} ],
title: "小米MIX Alrha",
originBgFrame: [ 0, 0, 604, 881 ],
originPicFrame: [ 198, 204, 264, 572 ],
originBgOffset: [ 0, 0 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/oppo/oppo-reno3-pro.png",
srcs: [ {
name: "日出印象",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/oppo/oppo-reno3-pro.png",
isCDN: "true",
checked: "true"
}, {
name: "无摄像头",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/oppo/oppo-reno3-pro-no.png",
isCDN: "true"
} ],
title: "OPPO Reno3 Rro",
originBgFrame: [ 0, 0, 600, 1181 ],
originPicFrame: [ 52, 40, 496, 1102 ],
originBgOffset: [ 30, 20 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/oppo/one-plus7-pro-black.png",
srcs: [ {
name: "黑 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/oppo/one-plus7-pro-black.png",
isCDN: "true",
checked: "true"
} ],
title: "One Plus 7 Pro",
originBgFrame: [ 0, 0, 538, 980 ],
originPicFrame: [ 57, 29, 423, 914 ],
originBgOffset: [ 0, 40 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/samsung/samsung-galaxy-note-10.png",
srcs: [ {
name: "星空蓝",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/samsung/samsung-galaxy-note-10.png",
isCDN: "true",
checked: "true"
}, {
name: "无摄像头",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/samsung/samsung-galaxy-note-10-no.png",
isCDN: "true"
} ],
title: "Samsung Note 10",
originBgFrame: [ 0, 0, 702, 1256 ],
originPicFrame: [ 83, 53, 533, 1140 ],
originBgOffset: [ 40, 24 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/samsung/samsung-galaxy-s10-silver.png",
srcs: [ {
name: "黑 色",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/samsung/samsung-galaxy-s10-silver.png",
isCDN: "true",
checked: "true"
}, {
name: "无摄像头",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/samsung/samsung-galaxy-s10-silver-no.png",
isCDN: "true"
} ],
title: "Samsung S10",
originBgFrame: [ 0, 0, 642, 1228 ],
originPicFrame: [ 56, 51, 530, 1117 ],
originBgOffset: [ 40, 40 ]
}, {
selectedSrcIndex: 0,
selectedSrc: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/apple-watch-42mm-silver.png",
srcs: [ {
name: "银 蓝",
src: "https://7569-uiunion-screenshot-168-1301433344.tcb.qcloud.la/mockups/apple/apple-watch-42mm-silver.png",
isCDN: "true",
checked: "true"
} ],
源码下载的话，老样子，关注公众号：阳光艺创站
关键词：带壳截图
昨天公众号刚刚开通了流量主，哈哈，希望大家多多支持，也让我更有动力去给带分享免费的优质的资源。
如果觉得还的话可以把公众号分享给自己的好友哦。
本站唯一公众号：阳光艺创站
唯一交流群：660459637
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3sjnhpi8du80w
版权属于：安好屋
转载时须注明出处及本声明
