WeChat-Applet ermöglicht das Teilen von Shake-Lotterie-Codes (Bild)

In diesem Artikel werden hauptsächlich relevante Informationen zum einfachen Beispielimplementierungscode des WeChat-Miniprogramms Shake and Draw vorgestellt. Freunde, die es benötigen, können darauf verweisen.

WeChat Miniprogramm Shake Shake Lottery

WeChat Mini-Programmverzeichnis

Um Miniprogramme und Miniprogrammentwicklung besser zu verstehen, werfen wir zunächst einen Blick auf das Projektverzeichnis.

Schauen Sie sich zunächst die Datei app.json im Stammverzeichnis an. Sie können sehen, dass im Array von „Seiten“ jede Schnittstelle konfiguriert ist und jedes Verzeichnis der Schnittstelle enthält Dateien

Schauen wir uns als nächstes den Seitenordner an. Wir können sehen, dass jede Seite zwei Dateien enthalten muss, eine davon ist js Der Eingang zu jeder Schnittstelle, die WXML-Datei ist die Layoutdatei jeder Schnittstelle und wxss ist die Stildatei.

Schauen Sie sich als Nächstes den Protokollordner an. Im Protokollordner befindet sich eine weitere logs.json-Datei als im Indexordner, Protokolle Die .json-Datei konfiguriert die Titelinformationen einer Schnittstelle.

Um die Struktur des Projekts besser zu verstehen, nehmen wir ein gwenn-Diagramm.

Shake-Projektbeispiel

Werfen wir zunächst einen Blick auf die Testergebnisse

Bild hinzufügen Ressourcen

index.js

Wie bereits erwähnt, überwacht und verarbeitet diese Datei den Lebenszyklus des Applets Funktion, deklarieren Sie globale Variablen und rufen Sie die umfangreiche API auf, die vom Framework bereitgestellt wird und dem Logikcode entspricht, wenn Wir schreiben das mobile Endgerät.

//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

Diese Datei ist die Konfigurationsdatei. Wir brauchen hier keine Konfiguration.

index.wxss

index.wxss ist das Stylesheet des gesamten Miniprogramms, beispielsweise dieser Lotterie, die dem Shake-Stil entspricht. Wer sich mit CSS auskennt, wird es auf jeden Fall kennen.

/**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 ist die Strukturdatei der Seite und muss bei Bedarf konfiguriert werden. Hier finden Sie die Dokumentbeschreibung

<!--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>

Das Obige ist der Inhalt des WeChat-Applets zur Implementierung der Shake-Lotterie-Codefreigabe (Bild). Für weitere verwandte Inhalte zahlen Sie bitte Achtung auf die chinesische PHP-Website (www.php.cn)!

Das obige ist der detaillierte Inhalt vonWeChat-Applet ermöglicht das Teilen von Shake-Lotterie-Codes (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!