端午即将来临,端午节,又称端阳节、龙舟节、重五节、天中节等,是集拜神祭祖、祈福辟邪、欢庆娱乐和饮食为一体的民俗大节。是我国四大传统节日之一。

今天给大家奉上一款小程序,端午节送祝福的,只有前端页面,直接上传到小程序后台就可以用!

该小程序的作用就是祝福语生成距离端午节也不远了,可以抓住机会蹭一波流量用户可以点击直接发送祝福语给好友,分享的时候会显示用户名字可以自动识别用户头像和名字,用户黏度比较高

 完整代码

 app.js

App({
    isIos: 0,
    data: {
        version: 1.5,
        systemInfo: {},
        userInfo: {},
        loginInfo: {},
        gGaoSet: [],
        authorizeUserInfo: !1,
        versionIsShow: !1,
        shareImg: "",
        shareTitle: "",
        moveBtnisShow: !1,
        guanggaoisShow: !1,
        musicLine: !0,
        cutMusic: !1,
        shutMusic: !0,
        mp4Url: "https://cdn.zhuangb123.com/dwj/mp_3.mp3",
        isShow: !1,
        isOPen: 0
    },
    onLaunch: function(a) {
        var t = this;
        wx.cloud.init(), wx.showShareMenu({
            withShareTicket: !1
        }), wx.getSystemInfo({
            success: function(a) {
                t.data.systemInfo = a, -1 != a.system.indexOf("iOS") && (t.isIos = !0);
            }
        }), t.appInitData(), t.data.shutMusic && t.appPlayBgMusic(), wx.removeStorageSync("gGaoSet"), 
        this.initData(a);
    },
    appInitData: function() {
        var a = this;
        a.data.userInfo = wx.getStorageSync("userInfo"), a.data.loginInfo = wx.getStorageSync("loginInfo"), 
        a.data.userInfo && a.data.loginInfo ? a.data.authorizeUserInfo = !0 : a.data.authorizeUserInfo = !1;
    },
    appPlayBgMusic: function(a) {
        var t = this;
        a ? (t.data.musicLine = !0, wx.playBackgroundAudio({
            dataUrl: t.data.mp4Url,
            success: function(a) {
                wx.onBackgroundAudioPause(function() {
                    t.data.musicLine = !1;
                }), wx.onBackgroundAudioStop(function() {
                    console.log(t.data.musicLine), t.data.musicLine && wx.playBackgroundAudio({
                        dataUrl: t.data.mp4Url
                    });
                });
            }
        })) : (t.data.musicLine = !1, wx.stopBackgroundAudio());
    },
    onShow: function(a) {
        var t = this;
        t.data.shutMusic && (t.data.cutMusic ? t.appPlayBgMusic(!1) : t.appPlayBgMusic(!0)), 
        wx.getStorageSync("is_first") || (wx.setStorageSync("is_first", "no"), wx.cloud.callFunction({
            name: "userid",
            data: {},
            success: function(a) {},
            fail: console.error
        }));
    },
    onHide: function() {
        var a = this;
        a.data.shutMusic && (a.data.musicLine = !1, a.appPlayBgMusic(!1));
    },
    initData: function(a) {
        this.data.share_data = a.query;
    }
});

 app.json

{
    "pages": [
        "pages/index/index",
        "pages/wishdetail/wishdetail",
        "pages/ds/ds",
        "pages/MoreMoremoney/MoreMoremoney",
        "pages/sendreceived/sendreceived",
        "pages/mywish/mywish"
    ],
	"requiredBackgroundModes": ["audio", "location"],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#91BF15",
        "navigationBarTitleText": "端午节包粽子",
        "navigationBarTextStyle": "white"
    },
    "sitemapLocation": "sitemap.json"
}

 app.wxss

.item {
    align-items: center;
}

.item,.item-top {
    display: flex;
    justify-content: center;
}

.item-top {
    align-items: flex-start;
}

.item-bottom {
    align-items: flex-end;
    display: flex;
    justify-content: center;
}

.content {
    position: relative;
    width: 100%;
}

.shang {
    animation: swing 1s linear infinite;
    height: 120rpx;
    top: 20%;
    width: 120rpx;
}

.gd,.shang {
    position: absolute;
    right: 0rpx;
    z-index: 8;
}

.gd {
    animation: huxi 1s linear infinite;
    height: 144rpx;
    margin-right: 10rpx;
    top: 33%;
    width: 144rpx;
}

@-webkit-keyframes huxi {
    0% {
        transform: scale(1,1);
    }

    50% {
        transform: scale(1.1,1.1);
    }

    100% {
        transform: scale(1,1);
    }
}

@-webkit-keyframes swing {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-20rpx);
    }

    60%,80%,100% {
        transform: rotate(15deg) translateX(-20rpx);
    }

    70%,90% {
        transform: rotate(-15deg) translateX(-20rpx);
    }
}

.page-bg-box {
    overflow: hidden;
    position: relative;
}

.page-bg-box,.page-icon {
    height: 100vh;
    width: 100%;
}

.content-float {
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.loadinghintcell {
    color: #000;
    font-size: 24rpx;
    text-align: center;
}

.box-image>image {
    height: 100%;
    width: 100%;
}

.btns-active:active {
    transform: scale(.9,.9);
    transition: .2s ease;
}

button {
    border: none;
    display: inline-block;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    width: 100%;
}

.button-hover,button {
    background: transparent;
}

button::after,button::before {
    background: transparent;
    border: none;
    opacity: 0;
}

.mini-banner {
    background: #eee;
    bottom: 0;
    height: 150rpx;
    height: auto;
    left: 0;
    margin: 0 auto;
    position: fixed;
    text-align: center;
    width: 750rpx;
    z-index: 999;
}

.mini-banner .banner-box {
    display: inline-block;
    height: 100%;
    width: 100%;
}

.rotating {
    animation: rotate 2s linear infinite;
    transition-property: -webkit-transform;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(1turn);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.date-image {
    background: #eee;
    left: -50000px;
    margin: 0 auto;
    position: fixed;
    text-align: center;
    top: 50rpx;
    z-index: 9999;
}

.adbox {
    bottom: 0rpx;
    height: auto;
    left: 10%;
    margin: auto;
    position: absolute;
    width: 80%;
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐