The New Year is coming, everyone shake a New Year’s sign

“PK creative Spring Festival, I am participating in the” Spring Festival Creative submission contest “, please see: Spring Festival Creative Submission Contest”

The New Year is just around the corner. Would you like to see how your fortune looks in the New Year? Just I also want to haha, but play other people’s boring, just have time to ourselves to achieve a shake, shake out their own New Year’s sign ~

1. Preparation

• Wechat public platform registration mini program
• Download the wechat developer tool
• Familiarize yourself with the applets development documentation (accelerometer is used here)

After the above is ready, we can start to develop our New Year’s shake small procedures.

2. Create projects

Our implementation idea is: first of all, add a background picture of the New Year lottery to render the festive atmosphere of our New Year lottery, and then add a cheerful background music, and write that we shake the New Year lottery function, no more nonsense to say directly on the code ~

// index.wxml

<view class="content" style="{{'background-image:'+('url('+imageURL+')')+'; height:100vh; '}}">
    <text class="title">Shake to draw New Year's token ~</text>
</view>
Copy the code

// index.js

Page({
    data: {
      imageURL: ".. /.. /static/22.jpg".myKey: 'get rich'.keyArr: ['get rich'.'promotion'.'pay'.'thin'.'beauty'.'single off'.'Hit the jackpot'.'getting handsome'.'grow'.'white']},onLoad: function(options) {
      const vm = this
      // execute when the page is created
      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();
      // Enable accelerometer listening
      wx.startAccelerometer({
        success: function(res) {
          wx.showToast({
            title: 'Turn it on and shake it.',})}})// Listen to shake the distance
      wx.onAccelerometerChange(function (e) {
        if (e.x > 1) {
          wx.showToast({
            title: 'Shake it off.'.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() {
      // execute when the page appears in the foreground
    },
    onReady: function() {
      // execute when the page is first rendered
    },
    onHide: function() {
      // execute when the page changes from foreground to background
    },
    onUnload: function() {
      // execute when the page is destroyed
    },
    onPullDownRefresh: function() {
      // Execute when a pull-down refresh is triggered
    },
    onReachBottom: function() {
      // execute when the page hits the bottom
    },
    onShareAppMessage: function () {
      // execute when the page is shared by the user
    },
    onPageScroll: function() {
      // execute while the page is scrolling
    },
    onResize: function() {
      // execute when the page size changes
    },
    // Free data
    customData: {
      hi: 'MINA'}})Copy the code

// 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;
}
Copy the code

The above is the overall implementation of the approximate code.

3. Project preview

Finally, I hope every child can draw their own lucky sign, the New Year, all the best, happy to achieve ~