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

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

带壳截图小程序完整版

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

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

        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
好吧,我穷的快要被消灭了。