T5_`_V$4`DI$]TWFZFA]P~I.png

前言

本篇文章是用UniApp开发的，但是由于调用的API只是被UniApp封装好的微信API，所以整个功能是可以完全使用微信小程序原生开发的。

如果想用原生小程序开发，在调用uni.xxx类似的API方法时，只需要将 uni 替换成 wx 即可。

某些配置文件内容，会从uniapp和微信小程序两个维度去进行说明，方便不同框架的程序员来开发使用。

先来展示一下看看叭

Q[{17UU686%]9{}F~TA`TOX.png

自定义顶部栏

微信小程序是自带一个顶部标题栏的，需要手动配置才会隐藏。

uniapp 是在 page.json 文件中配置当前路由

{
    "path" : "pages/eat/eat",
    "style" :                                                                                    
    {
        "navigationBarTitleText": "吃点啥",
        "enablePullDownRefresh": false,
        "navigationStyle": "custom"
    }
}
复制代码

"navigationStyle": "custom"表示自定义当前页面顶部栏

微信小程序 则是直接在当前页面的json文件中配置

{
    "navigationStyle": "custom"
}
复制代码

画流星

去掉了微信顶部栏之后，就可以直接做一个全屏的动画效果了，我这里做的是流星，大家也可以在我其他文章中找不同的动画效果替换上去。

<view class="tn-satr">
    <view class="sky"></view>
    <view class="stars">
            <view class="falling-stars">
                    <view class="star-fall"></view>
                    <view class="star-fall"></view>
                    <view class="star-fall"></view>
                    <view class="star-fall"></view>
            </view>
            <view class="small-stars">
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
            </view>
            <view class="medium-stars">
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
                    <view class="star"></view>
            </view>
    </view>
</view>
复制代码

.tn-satr {
        position: fixed;
        width: 100%;
        height: 600px;
        overflow: hidden;
        flex-shrink: 0;
        z-index: 998;
}
.stars {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 400px;
}
.star {
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
}
.small-stars .star {
        position: absolute;
        width: 3px;
        height: 3px;
}
.small-stars .star:nth-child(2n) {
        opacity: 0;
        -webkit-animation: star-blink 1.2s linear infinite alternate;
        animation: star-blink 1.2s linear infinite alternate;
}
.small-stars .star:nth-child(1) {
        left: 40px;
        bottom: 50px;
}
.small-stars .star:nth-child(2) {
        left: 200px;
        bottom: 40px;
}
.small-stars .star:nth-child(3) {
        left: 60px;
        bottom: 120px;
}
.small-stars .star:nth-child(4) {
        left: 140px;
        bottom: 250px;
}
.small-stars .star:nth-child(5) {
        left: 400px;
        bottom: 300px;
}
.small-stars .star:nth-child(6) {
        left: 170px;
        bottom: 80px;
}
.small-stars .star:nth-child(7) {
        left: 200px;
        bottom: 360px;
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
}
.small-stars .star:nth-child(8) {
        left: 250px;
        bottom: 320px;
}
.small-stars .star:nth-child(9) {
        left: 300px;
        bottom: 340px;
}
.small-stars .star:nth-child(10) {
        left: 130px;
        bottom: 320px;
        -webkit-animation-delay: .5s;
        animation-delay: .5s;
}
.small-stars .star:nth-child(11) {
        left: 230px;
        bottom: 330px;
        -webkit-animation-delay: 7s;
        animation-delay: 7s;
}
.small-stars .star:nth-child(12) {
        left: 300px;
        bottom: 360px;
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
}
@-webkit-keyframes star-blink {
        50% {
                width: 3px;
                height: 3px;
                opacity: 1;
        }
}
@keyframes star-blink {
        50% {
                width: 3px;
                height: 3px;
                opacity: 1;
        }
}
.medium-stars .star {
        position: absolute;
        width: 3px;
        height: 3px;
        opacity: 0;
        -webkit-animation: star-blink 1.2s ease-in infinite alternate;
        animation: star-blink 1.2s ease-in infinite alternate;
}
.medium-stars .star:nth-child(1) {
        left: 300px;
        bottom: 50px;
}
.medium-stars .star:nth-child(2) {
        left: 400px;
        bottom: 40px;
        -webkit-animation-delay: .4s;
        animation-delay: .4s;
}
.medium-stars .star:nth-child(3) {
        left: 330px;
        bottom: 300px;
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
}
.medium-stars .star:nth-child(4) {
        left: 460px;
        bottom: 300px;
        -webkit-animation-delay: .9s;
        animation-delay: .9s;
}
.medium-stars .star:nth-child(5) {
        left: 300px;
        bottom: 150px;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
}
.medium-stars .star:nth-child(6) {
        left: 440px;
        bottom: 120px;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
}
.medium-stars .star:nth-child(7) {
        left: 200px;
        bottom: 140px;
        -webkit-animation-delay: .8s;
        animation-delay: .8s;
}
.medium-stars .star:nth-child(8) {
        left: 30px;
        bottom: 480px;
        -webkit-animation-delay: .3s;
        animation-delay: .3s;
}
.medium-stars .star:nth-child(9) {
        left: 460px;
        bottom: 400px;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
}
.medium-stars .star:nth-child(10) {
        left: 150px;
        bottom: 10px;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
}
.medium-stars .star:nth-child(11) {
        left: 420px;
        bottom: 450px;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
}
.medium-stars .star:nth-child(12) {
        left: 340px;
        bottom: 180px;
        -webkit-animation-delay: 1.1s;
        animation-delay: 1.1s;
}
@keyframes star-blink {
        50% {
                width: 4px;
                height: 4px;
                opacity: 1;
        }
}
.star-fall {
        position: relative;
        border-radius: 2px;
        width: 80px;
        height: 2px;
        overflow: hidden;
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
}
.star-fall:after {
        content: "";
        position: absolute;
        width: 50px;
        height: 2px;
        background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
        background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
        left: 100%;
        -webkit-animation: star-fall 3.6s linear infinite;
        animation: star-fall 3.6s linear infinite;
}
.star-fall:nth-child(1) {
        left: 80px;
        bottom: -100px;
}
.star-fall:nth-child(1):after {
        -webkit-animation-delay: 2.4s;
        animation-delay: 2.4s;
}
.star-fall:nth-child(2) {
        left: 200px;
        bottom: -200px;
}
.star-fall:nth-child(2):after {
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
}
.star-fall:nth-child(3) {
        left: 430px;
        bottom: -50px;
}
.star-fall:nth-child(3):after {
        -webkit-animation-delay: 3.6s;
        animation-delay: 3.6s;
}
.star-fall:nth-child(4) {
        left: 400px;
        bottom: 100px;
}
.star-fall:nth-child(4):after {
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
}
@-webkit-keyframes star-fall {
        20% {
                left: -100%;
        }
        100% {
                left: -100%;
        }
}
@keyframes star-fall {
        20% {
                left: -100%;
        }
        100% {
                left: -100%;
        }
}
复制代码

D0CQ6@CLTMKZUPPB)B0SSY8.png

画流动的波浪

为了不让天上的星星太孤单，就得画一个波浪来陪伴！！skr！！！

<view class="tnwave waveAnimation">
        <view class="waveWrapperInner bgTop">
                <view class="wave waveTop" style="background-image: url('')"></view>
        </view>
        <view class="waveWrapperInner bgMiddle">
                <view class="wave waveMiddle" style="background-image: url('')"></view>
        </view>
        <view class="waveWrapperInner bgBottom">
                <view class="wave waveBottom" style="background-image: url('')"></view>
        </view>
</view>
复制代码

波浪的素材是三张图片，放在下面自取哦~~

$[_S8)UU$YIYMU`P{TIP4IBI.png$

bgTop 和 bgMiddle 中的image路径用的都是第一个哦，bgBottom 用的是第二个。

用各种 P 图工具，可以用白色背景把 稀土掘金技术社区 签名给隐藏掉的哦~

.template-outset {
        background-image: linear-gradient(to top, #4C3FAE 20%, #6E26BA 80%);
        width: 100vw;
        height: 100vh;
}
@keyframes move_wave {
        0% {
                transform: translateX(0) translateZ(0) scaleY(1)
        }
        50% {
                transform: translateX(-25%) translateZ(0) scaleY(1)
        }
        100% {
                transform: translateX(-50%) translateZ(0) scaleY(1)
        }
}
.tnwave {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
}
.waveWrapperInner {
        position: absolute;
        width: 100%;
        overflow: hidden;
        height: 100%;
}
.wave {
        position: absolute;
        left: 0;
        width: 200%;
        height: 100%;
        background-repeat: repeat no-repeat;
        background-position: 0 bottom;
        transform-origin: center bottom;
}
.bgTop {
        opacity: 0.4;
}
.waveTop {
        background-size: 50% 45px;
}
.waveAnimation .waveTop {
        animation: move_wave 4s linear infinite;
}
.bgMiddle {
        opacity: 0.6;
}
.waveMiddle {
        background-size: 50% 40px;
}
.waveAnimation .waveMiddle {
        animation: move_wave 3.5s linear infinite;
}
.bgBottom {
        opacity: 0.95;
}
.waveBottom {
        background-size: 50% 35px;
}
.waveAnimation .waveBottom {
        animation: move_wave 2s linear infinite;
}
复制代码

`4YVI32YLYWD2}A`X4%6VUT.png

页面布局

为了让用户进来一眼就能知道是可以摇一摇的，我们需要加一个摇一摇的动图，放在最显眼的位置。

<view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
        <view class="tn-flex tn-flex-col-center tn-flex-row-center">
                <view class="tn-shadow-blur" style="background-image:url('');width: 170rpx;height: 170rpx;background-size: cover;">
                </view>
        </view>
</view>
复制代码

摇一摇素材

D96_8)V2`Y9O%$J2DD]TYO9.png

.tn-flex {
  display: -webkit-flex;
  display: flex;
}
.tn-flex-direction-column {
  flex-direction: column;
}
.tn-flex-col-center {
  align-items: center;
}
.tn-flex-row-center {
  justify-content: center;
}
.tn-shadow-blur {
  position: relative;
}
.tn-shadow-blur::before {
  content: " ";
  display: block;
  background: inherit;
  filter: blur(10rpx);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 10rpx;
  left: 10rpx;
  z-index: -1;
  opacity: 0.4;
  transform-origin: 0 0;
  border-radius: inherit;
  transform: scale(1, 1);
}
复制代码

然后加上自己喜欢的文字

<view class="tn-text-center tn-color-gray--disabled" style="padding: 60vh 0 0 0;">
        <view class="" style="font-size: 45rpx;">
                摇一摇
        </view>
        <view class="tn-color-gray--disabled tn-text-df tn-padding-top">
                摇到什么吃什么
        </view>
</view>
复制代码

.tn-text-center {
  text-align: center;
}
.tn-color-gray--disabled {
    color: #E6E6E6 !important;
}
.tn-padding-top {
    padding-top: 30rpx;
}
复制代码

QJO6$99ZA5}ALCI262L6JI7.png

因为我做了一个领取外卖券的小程序，所以我在下面放了一个按钮，方便用户领券。

摇一摇，摇到什么吃什么

进入页面就需要开始监听用户摇动手机的动作，所以需要把监听代码放到 onShow 生命周期中。

onShow() {
    let _this = this
    let acc = true
    // 监听摇一摇
    uni.startAccelerometer({
            success: function() {
                    // 执行摇一摇
                    uni.onAccelerometerChange(function(res) {
                            let page = getCurrentPages()
                            let currentPage = page[page.length - 1]
                            if(currentPage.route === 'pages/eat/eat'){
                                    if (res.x > 1 || res.y > 1 || res.z > 1) {
                                    // if (res.x > 3 || res.y > 3 || res.z > 3) {
                                            if(acc){
                                                    acc = false
                                                    uni.vibrateLong({
                                                            success() {
                                                                    // 随机摇一个值
                                                                    Array.prototype.random = function() {
                                                                            let idx = Math.floor(Math.random() * this
                                                                                    .length);
                                                                            return this[idx];
                                                                    }
                                                                    let arr = ['黄焖鸡米饭', '炒饭', '炒面', '木桶饭', '咖喱饭', '汉堡薯条',
                                                                            '披萨意面', '沙拉/轻食', '螺蛳粉', '酸辣粉', '热干面', '重庆小面',
                                                                            '河南焖面', '兰州拉面', '陕西凉面', '山西刀削面', '北京炸酱面',
                                                                            '东北烤冷面', '包子饺子', '豆浆油条', '肉夹馍', '煎饼果子', '成都冒菜',
                                                                            '炸鸡炸串', '麻辣香锅', '麻辣烫', '中式快餐盒饭'
                                                                    ];
                                                                    uni.showModal({
                                                                            title: '摇到了',
                                                                            content: arr.random(),
                                                                            showCancel: true,
                                                                            confirmText: '领券吃它',
                                                                            cancelText: '重新摇',
                                                                            success(res) {
                                                                                    if (res.confirm) {
                                                                                            _this.handelCoupon()
                                                                                    }
                                                                                    acc = true
                                                                            }
                                                                    })
                                                            }
                                                    });
                                            }
                                    }
                            }
                    })
            }
    })
}
复制代码

通过 uni.startAccelerometer 方法监听用户摇一摇的动作

监听摇一摇的同时，为了避免跳出当前页之后还在监听，所以需要判断是否停留在当前页，所以需要用到 getCurrentPages方法获取当前页的路由。

由于不知道用户是横着摇、竖着摇、斜着摇，所以需要判断 x、y、z三个方向的值。

之前写的三个值都大于 3 ，经过某些 iPhone 用户测试，发现并不那么灵敏，所以改成了 1

为了防止摇的时候一直出现随机值，在监听方法外部定义了一个 acc 的值，用于判断是否已经摇出来了。

摇出随机值之后，需要给用户一个反馈信息，所以用了 uni.vibrateLong 方法来给一个长震动，让用户手机震动500ms

随机值可以自定义，想吃什么就添加什么，摇到什么就吃什么！

体验一下

由于摇一摇和震动无法体现在文章中，所以大家可以关注我的公众号猿来是前端底部栏有小程序菜单，亦可以直接在微信中搜索小程序嗒嗒吃喝玩乐小工具体验哦。

【今天吃什么】微信小程序炫酷摇一摇来告诉你！

前言

先来展示一下看看叭

自定义顶部栏

画流星

画流动的波浪

页面布局

摇一摇，摇到什么吃什么

体验一下

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【今天吃什么】微信小程序炫酷摇一摇来告诉你！

前言

先来展示一下看看叭

自定义顶部栏

画流星

画流动的波浪

页面布局

摇一摇，摇到什么吃什么

体验一下

热门文章

最新文章

相关课程

相关电子书

相关实验场景