【小程序源码】带壳截图小程序完整源码

博主：安好屋
发布时间：2020 年 04 月 11 日
1733次浏览
2 条评论
16929字数
分类：杂物间

带壳截图大家应该都见过吧，这次给大家分享一个带壳截图的小程序源码，经过测试呢，是完全可以运行的，这里依旧免费提供给大家，希望大家能够多多关注本站以及公众号，哈哈，再次感谢了。

来看看这个小程序吧，首先个大家看一个展示图。

带壳截图小程序完整版

基本上就是把自己自己截好的图片重新编辑一下，加一个手机框架，小程序自带多组框架，如果有能力的也可以自己再加一些最新的手机框架，还是挺实用的吧。

代码就不放了，放一下他的手机框架数据：

        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

版权属于：安好屋
转载时须注明出处及本声明

最后修改：2020 年 04 月 14 日 05 : 05 PM

好吧，我穷的快要被消灭了。

2 条评论

Αིུ༊྄ཻℜ࿐
October 30th, 2020 at 09:23 pm

8҉9҉4҉6҉4҉4҉

回复

发表评论取消回复

评论 *

私密评论

名称 *

邮箱 *

地址