新年快到了，大家来摇一个自己的新年签呀

“ PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛”

新年快到了，想不想看看自己新的一年运势如何呢？正好我也想哈哈，不过玩儿别人的没意思，刚好有时间我们来自己实现一个摇一摇，摇出自己的新年签~

1.准备工作

• 微信公众平台注册小程序
• 下载微信开发者工具
• 熟悉一下小程序开发文档（这里主要用到了加速度计这个功能） 以上准备好之后我们就可以开始着手开发我们的摇新年签的小程序啦。

2.创建项目

我们的实现思路是：首先加一张新年抽签的背景图片渲染一下我们新年签的节日气氛哈哈，然后加上一首欢快的的背景音乐，再写上我们摇一摇抽取新年签的功能，废话不多说直接上代码~

// index.wxml

<view class="content" style="{{'background-image:'+('url('+imageURL+')')+';height:100vh;'}}">
    <text class="title">摇一摇抽取新年签~</text>
</view>

// index.js

Page({
    data: {
      imageURL: "../../static/22.jpg",
      myKey: '暴富',
      keyArr: ['暴富', '升职', '加薪', '变瘦', '变美', '脱单', '中大奖', '变帅', '长高', '变白']
    },
    onLoad: function(options) {
      const vm = this
      // 页面创建时执行
      const innerAudioContext = wx.createInnerAudioContext();
      innerAudioContext.autoplay = true;
      innerAudioContext.src = 'http://music.163.com/song/media/outer/url?id=504624714.mp3';
      innerAudioContext.loop = true;
      innerAudioContext.play();
      // 开启加速度计监听
      wx.startAccelerometer({
        success: function(res) {
          wx.showToast({
            title: '开启摇一摇',
          })
        }
      })
      // 监听摇一摇距离
      wx.onAccelerometerChange(function (e) {
        if (e.x > 1) {
          wx.showToast({
            title: '摇一摇成功',
            icon: 'success',
            duration: 2000
          })
          let i = 0
          setInterval(() => {
            if (i > 20) {
              clearInterval()
            } else {
              vm.setData({ myKey: vm.data.keyArr[Math.floor(Math.random() * 10)] })
              i++
            }
          }, 50)
        }
      })
    },
    onShow: function() {
      // 页面出现在前台时执行
    },
    onReady: function() {
      // 页面首次渲染完毕时执行
    },
    onHide: function() {
      // 页面从前台变为后台时执行
    },
    onUnload: function() {
      // 页面销毁时执行
    },
    onPullDownRefresh: function() {
      // 触发下拉刷新时执行
    },
    onReachBottom: function() {
      // 页面触底时执行
    },
    onShareAppMessage: function () {
      // 页面被用户分享时执行
    },
    onPageScroll: function() {
      // 页面滚动时执行
    },
    onResize: function() {
      // 页面尺寸变化时执行
    },
    // 自由数据
    customData: {
      hi: 'MINA'
    }
  })

// index.wxss
.content {
  padding: 0 40rpx;
  background-size:100% 100%;
    -moz-background-size:100% 100%;
}
.content image {
  width: 100%;
}
.content .title {
  display: block;
  text-align: center;
  /* font-weight: bold; */
  font-size: 50rpx;
  color: rgb(254, 254, 67);
  padding-top: 17vh;
}
.content .operate {
  text-align: center;
  margin-top: 15vh;
  margin-bottom: 30rpx;
  font-size: 60rpx;
  font-weight: bold;
  color: #fff;
}

.content .operate .btn {
  width: 200rpx;
  height: 100rpx;
  display: inline-block;
}
.content .operate .btn:first-of-type {
  margin-right: 40rpx;
}
.content .bottomContent {
  position: relative;
  top: 100rpx;
}
.content .message {
  font-size: 34rpx;
  margin: 15rpx 0rpx;
  color: orchid;
  margin-top: 35rpx;
  text-align: center;
}

以上就是整体实现的大致代码了。

3.项目预览

最后，希望每位童鞋都能抽到自己的幸运签，新的一年，万事如意，心想事成~