概述

前面我們講了如何開始微信小程式搭建和一些元件的介紹。微信小元件和微信小程式入門

微信小程式目錄

為了更好的理解小程式和小程式開發，我們首先來看一下專案的目錄。
首先看下根目錄下的app.json的檔案，可以看到在”pages”的數組裡，裡面配置了每個介面，且包含了每個介面檔案的目錄

我們接下來看一下page資料夾，可以看到每個頁面需要包含兩個檔案，一個是js檔案，是每個介面的入口，wxml的檔案是每個介面的佈局檔案，wxss是樣式檔案。

接下來看一下logs資料夾，在logs資料夾中比index資料夾中多出了一個logs.json的檔案，logs.json這個檔案配置了一個介面的title的資訊。
為了更好的理解專案的結構，我們來一張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 == '#FFDF2F') {
        _this.setData({
          colorCircleFirst: '#FE4D32',
          colorCircleSecond: '#FFDF2F',
        })
      } else {
        _this.setData({
          colorCircleFirst: '#FFDF2F',
          colorCircleSecond: '#FE4D32',
        })
      }
    }, 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: '恭喜您',
          content: '獲得了第' + (_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?'#e7930a':'#ffe400'}}">START</view>
  </view>
</view>