我们接下来看一下page文件夹，可以看到每个页面需要包含两个文件，一个是js文件，是每个界面的入口，wxml的文件是每个界面的布局文件，wxss是样式文件。
接下来看一下logs文件夹，在logs文件夹中比index文件夹中多出了一个logs.json的文件，logs.json这个文件配置了一个界面的title的信息。为了更好的理解项目的结构，我们来一张gif图。
摇一摇项目实例我们首先看一下测试效果
添加图片资源
index.js之前说过这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的API，相当于我们写移动端时候的逻辑代码。
//index.js//获取应用实例varapp=getApp()Page({data:{circleList:[],//圆点数组awardList:[],//奖品数组colorCircleFirst:'#FFDF2F',//圆点颜色1colorCircleSecond:'#FE4D32',//圆点颜色2colorAwardDefault:'#F5F0FC',//奖品默认颜色colorAwardSelect:'#ffe400',//奖品选中颜色indexSelect:0,//被选中的奖品indexisRunning: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;//圆点设置varleftCircle=7.5;vartopCircle=7.5;varcircleList=[];for(vari=0;i24;i++){if(i==0){topCircle=15;leftCircle=15;}elseif(i6){topCircle=7.5;leftCircle=leftCircle+102.5;}elseif(i==6){topCircle=15leftCircle=620;}elseif(i12){topCircle=topCircle+94;leftCircle=620;}elseif(i==12){topCircle=565;leftCircle=620;}elseif(i18){topCircle=570;leftCircle=leftCircle-102.5;}elseif(i==18){topCircle=565;leftCircle=15;}elseif(i24){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设置varawardList=[];//间距,怎么顺眼怎么设置吧.vartopAward=25;varleftAward=25;for(varj=0;j8;j++){if(j==0){topAward=25;leftAward=25;}elseif(j3){topAward=topAward;//166.6666是宽.15是间距.下同leftAward=leftAward+166.6666+15;}elseif(j5){leftAward=leftAward;//150是高,15是间距,下同topAward=topAward+150+15;}elseif(j7){leftAward=leftAward-166.6666-15;topAward=topAward;}elseif(j8){leftAward=leftAward;topAward=topAward-150-15;}varimageAward=this.data.imageAward[j];awardList.push({topAward:topAward,leftAward:leftAward,imageAward:imageAward});}this.setData({awardList:awardList})},//开始游戏startGame:function(){if(this.data.isRunning)returnthis.setData({isRunning:true})var_this=this;varindexSelect=0vari=0;vartimer=setInterval(function(){indexSelect++;//这里我只是简单粗暴用y=30x+200函数做的处理.可根据自己的需求改变转盘速度i+=30;if(i1000){//去除循环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.wxssindex.wxss是整个小程序的样式表,如这个摇奖对应得摇一摇样式。对css熟悉的肯定不会陌生。
/index.wxss/.container-out{height:600rpx;width:650rpx;background-color:#b136b9;margin:100rpxauto;border-radius:40rpx;box-shadow:010px0#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:inset3px3px3px#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:05px0#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:05px0#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.wxmlindex.wxml是页面的结构文件，如果有需要就需要配置。这里大家可以参照项目的文档说明
!--index.wxml--viewviewwx:for="{{circleList}}"style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color:{{(index%2==0)?colorCircleFirst:colorCircleSecond}};"/viewviewviewwx:for="{{awardList}}"style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color:{{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"imagesrc="{{item.imageAward}}"/image/viewviewbindtap="startGame"style="background-color:{{isRunning?'#e7930a':'#ffe400'}}"START/view/view/view
