WeChat applet enables sharing of shake lottery codes (picture)

This article mainly introduces the relevant information on the implementation code of a simple example of the WeChat mini program Shake and Draw. The function of shake and draw is implemented here. Friends who need it can refer to

WeChat Mini Program Shake Shake the lottery

WeChat mini program directory

In order to better understand mini programs and mini program development, let’s first take a look at the project directory.

First look at the app.json file in the root directory. You can see that in the array of "pages", each interface is configured and contains each Directory of interface files

Let’s take a look at the page folder. We can see that each page needs to contain two files, one is js The file is the entrance to each interface, the wxml file is the layout file of each interface, and wxss is the style file.

Next, take a look at the logs folder. There is one more logs.json file in the logs folder than in the index folder, logs The .json file configures the title information of an interface.

In order to better understand the structure of the project, let's take a gif diagram.

Shake Project Example

Let’s first take a look at the test results

Add picturesResources

##index.js

As mentioned before, this file monitors and processes the

life cycle of the applet Functions , declare global variables , and call the rich API provided by framework, which is equivalent to the logic code when we write the mobile terminal.

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  circleList: [],//圆点数组
  awardList: [],//奖品数组
  colorCircleFirst: '#FFDF2F',//圆点颜色1
  colorCircleSecond: '#FE4D32',//圆点颜色2
  colorAwardDefault: '#F5F0FC',//奖品默认颜色
  colorAwardSelect: '#ffe400',//奖品选中颜色
  indexSelect: 0,//被选中的奖品index
  isRunning: false,//是否正在抽奖
  imageAward: [
   '../../images/1.jpg',
   '../../images/2.jpg',
   '../../images/3.jpg',
   '../../images/4.jpg',
   '../../images/5.jpg',
   '../../images/6.jpg',
   '../../images/7.jpg',
   '../../images/8.jpg',
  ],//奖品图片数组
 },

 onLoad: function () {
  var _this = this;
  //圆点设置
  var leftCircle = 7.5;
  var topCircle = 7.5;
  var circleList = [];
  for (var i = 0; i < 24; i++) {
   if (i == 0) {
    topCircle = 15;
    leftCircle = 15;
   } else if (i < 6) {
    topCircle = 7.5;
    leftCircle = leftCircle + 102.5;
   } else if (i == 6) {
    topCircle = 15
    leftCircle = 620;
   } else if (i < 12) {
    topCircle = topCircle + 94;
    leftCircle = 620;
   } else if (i == 12) {
    topCircle = 565;
    leftCircle = 620;
   } else if (i < 18) {
    topCircle = 570;
    leftCircle = leftCircle - 102.5;
   } else if (i == 18) {
    topCircle = 565;
    leftCircle = 15;
   } else if (i < 24) {
    topCircle = topCircle - 94;
    leftCircle = 7.5;
   } else {
    return
   }
   circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
  }
  this.setData({
   circleList: circleList
  })
  //圆点闪烁
  setInterval(function () {
   if (_this.data.colorCircleFirst == &#39;#FFDF2F&#39;) {
    _this.setData({
     colorCircleFirst: &#39;#FE4D32&#39;,
     colorCircleSecond: &#39;#FFDF2F&#39;,
    })
   } else {
    _this.setData({
     colorCircleFirst: &#39;#FFDF2F&#39;,
     colorCircleSecond: &#39;#FE4D32&#39;,
    })
   }
  }, 500)
  //奖品item设置
  var awardList = [];
  //间距,怎么顺眼怎么设置吧.
  var topAward = 25;
  var leftAward = 25;
  for (var j = 0; j < 8; j++) {
   if (j == 0) {
    topAward = 25;
    leftAward = 25;
   } else if (j < 3) {
    topAward = topAward;
    //166.6666是宽.15是间距.下同
    leftAward = leftAward + 166.6666 + 15;
   } else if (j < 5) {
    leftAward = leftAward;
    //150是高,15是间距,下同
    topAward = topAward + 150 + 15;
   } else if (j < 7) {
    leftAward = leftAward - 166.6666 - 15;
    topAward = topAward;
   } else if (j < 8) {
    leftAward = leftAward;
    topAward = topAward - 150 - 15;
   }
   var imageAward = this.data.imageAward[j];
   awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
  }
  this.setData({
   awardList: awardList
  })
 },
 //开始游戏
 startGame: function () {
  if (this.data.isRunning) return
  this.setData({
   isRunning: true
  })
  var _this = this;
  var indexSelect = 0
  var i = 0;
  var timer = setInterval(function () {
   indexSelect++;
   //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
   i += 30;
   if (i > 1000) {
    //去除循环
    clearInterval(timer)
    //获奖提示

    wx.showModal({
     title: &#39;恭喜您&#39;,
     content: &#39;获得了第&#39; + (_this.data.indexSelect + 1) + "个优惠券",
     showCancel: false,//去掉取消按钮
     success: function (res) {
      if (res.confirm) {
       _this.setData({
        isRunning: false
       })
      }
     }
    })
   }
   indexSelect = indexSelect % 8;
   _this.setData({
    indexSelect: indexSelect
   })
  }, (200 + i))
 }
})

index.json

This file is the

configuration file. We don't need configuration here.

index.wxss

index.wxss is the style sheet of the entire mini program. For example, this lottery corresponds to the shake style. Those who are familiar with css will definitely be familiar with it.

/**index.wxss**/

.container-out {
 height: 600rpx;
 width: 650rpx;
 background-color: #b136b9;
 margin: 100rpx auto;
 border-radius: 40rpx;
 box-shadow: 0 10px 0 #871a8e;
 position: relative;
}

.container-in {
 width: 580rpx;
 height: 530rpx;
 background-color: #871a8e;
 border-radius: 40rpx;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
}

/**小圆球
box-shadow: inset 3px 3px 3px #fff2af;*/

.circle {
 position: absolute;
 display: block;
 border-radius: 50%;
 height: 20rpx;
 width: 20rpx;
}

.content-out {
 position: absolute;
 height: 150rpx;
 width: 166.6666rpx;
 background-color: #f5f0fc;
 border-radius: 15rpx;
 box-shadow: 0 5px 0 #d87fde;
}

/**居中 加粗*/

.start-btn {
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 border-radius: 15rpx;
 height: 150rpx;
 width: 166.6666rpx;
 background-color: #ffe400;
 box-shadow: 0 5px 0 #e7930a;
 color: #f6251e;
 text-align: center;
 font-size: 55rpx;
 font-weight: bolder;
 line-height: 150rpx;
}

.award-image {
 position: absolute;
 margin: auto;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 height: 140rpx;
 width: 130rpx;
}

index.wxml

index.wxml is the structure file of the page and needs to be configured if necessary. Here you can refer to the

document description of the project

<!--index.wxml-->
<view class="container-out">
 <view class="circle" wx:for="{{circleList}}" 
 style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;
 background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};">
 </view>
 <view class="container-in">
  <view class="content-out" wx:for="{{awardList}}" 
  style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;
  background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
   <image class="award-image" src="{{item.imageAward}}"></image>
  </view>
  <view class="start-btn" bindtap="startGame" 
  style=" background-color:{{isRunning?&#39;#e7930a&#39;:&#39;#ffe400&#39;}}">START</view>
 </view>
</view>

The above is the content of the WeChat applet to realize the shake lottery code sharing (picture). For more related content, please pay attention to the PHP Chinese website (www .php.cn)!

The above is the detailed content of WeChat applet enables sharing of shake lottery codes (picture). For more information, please follow other related articles on the PHP Chinese website!