WeChat アプレットでシェイク宝くじコードの共有が可能 (写真)

この記事では、WeChat ミニ プログラム Shake and Lottory の簡単な例の実装コードに関する関連情報を主に紹介します。Shake and Lottory の機能が実装されているので、必要な友達は参照してください。

WeChat ミニ プログラム Shake and Lottory

WeChat ミニ プログラム ディレクトリ

ミニ プログラムとミニ プログラム開発をより深く理解するために、まずプロジェクト ディレクトリを見てみましょう。

まず、ルート ディレクトリにある app.json ファイルを見てください。「ページ」の 配列 に、各インターフェイスが設定され、各インターフェイス ファイルのディレクトリが含まれていることがわかります

次にページフォルダーを見てください。各ページには 2 つのファイルが含まれている必要があります。1 つは各インターフェースの入り口となる js ファイルです。wxss です。スタイルファイル。

次に、logs フォルダーに、インデックス フォルダーよりも追加の logs.json ファイルがあります。logs.json ファイルは、インターフェイスのタイトル情報を構成します。

プロジェクトの構造をより深く理解するために、gif図を見てみましょう。

プロジェクトの例を試してみましょう

まずテスト効果を見てみましょう

写真を追加しますリソース

index.js

前に、このファイルはアプレットライフサイクル関数を呼び出し、グローバル変数を宣言し、フレームワークによって提供される豊富なAPIを呼び出します。これは、モバイル端末を作成するときのロジックコードに相当します。

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

このファイルは設定ファイルです。ここでは設定は必要ありません。

index.wxss

index.wxssは、シェイクスタイルに対応したこのくじなどのミニプログラム全体のスタイルシートです。 cssに詳しい人は間違いなく馴染みがあるでしょう。

/**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はページの構造ファイルであり、必要に応じて設定する必要があります。ここでは、プロジェクトのドキュメントの説明を参照できます

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

上記は、シェイク宝くじのコード共有を実現するための WeChat アプレットの内容です (写真) さらに関連するコンテンツについては、PHP 中国語 Web サイト ( www.php.cn)!

以上がWeChat アプレットでシェイク宝くじコードの共有が可能 (写真)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。