微信小程序学习用精品demo:麻将骰子:附详细教程

2016-12-28

核心知识点:


微信小程序框架中的单向数据绑定应用

微信小程序框架中按钮组件的使用以及的事件绑定技术

微信小程序框架中视图模版的定义与使用

flex弹性布局

界面:


[attach]1453[/attach]


[attach]1454[/attach]


下面介绍项目的目录结构:


微信小程序学习用精品demo:麻将骰子:附详细教程


涉及知识点:

– 微信小程序框架中的单向数据绑定应用

– 微信小程序框架中按钮组件的使用以及的事件绑定技术

– 微信小程序框架中视图模版的定义与使用

– flex弹性布局


app.json

{

  "pages":[

    "pages/index/index"

  ],

  "window":{

    "navigationBarBackgroundColor": "#333333",  

    "navigationBarTextStyle":"white",

    "navigationBarTitleText": "麻将骰子",

    "backgroundColor":"#ffffff",

    "backgroundTextStyle":"light",

    "enablePullDownRefresh":false

  },

  "networkTimeout": {

    "request": 10000,

    "downloadFile": 10000

  },

  "debug": true

}

index.js

Page({

  global : {

      timer : null ,

      isRand : false

  },

  data: {

    dice : ['first','second','third','fourth','fifth','sixth'],

    buttonType : 'primary',

    buttonValue : '摇一摇',

    isShow:'hidden',

    num1 : 0,

    num2 : 0,

    num3 : 0,

    total: 0

  },

  shakeClick: function () { 

    let me = this;

    this.global.isRand = !this.global.isRand;

    if ( this.global.isRand ) {

      this.global.timer = setInterval(function (){

        let num1 = Math.floor(Math.random()*6);

        let num2 = Math.floor(Math.random()*6);

        let num3 = Math.floor(Math.random()*6);

        me.setData({num1 : num1});

        me.setData({num2 : num2});

        me.setData({num3 : num3});

        me.setData({total : num1+num2+num3+3});

      },50);

    } else {

      clearInterval(this.global.timer);

    }


    this.setData({

      dice: this.data.dice, 

      buttonType : (this.global.isRand) ? 'default' : 'primary',

      buttonValue : (this.global.isRand) ? '停止' : '摇一摇',

      isShow: (this.global.isRand) ? 'hidden':'show',

    });


  },

})

index.wxss

/*外部公共容器样式*/

.flex-container{

  display:flex;

  height: 100vh;

  background-color:#666666;

  flex-direction : column;

  justify-content: center;

  align-items: center;

  color: #fff;

}


.dice-box{

  padding: 10px;


.second-row{

  display:flex;

  flex-direction : row;

  justify-content: space-around;

}


/* 骰子容器公用样式 */

.face {

  display: flex;

  margin: 5px;

  padding: 4px;

  background-color:#ffffff;

  width: 108px;

  height: 108px;

  object-fit: contain;

  border-radius:10%;

  box-shadow: inset 0 5px white,

              inset 0 -5px #bbb,

              inset 5px 0 #d7d7d7,

              inset -5px 0 #d7d7d7;

}



/* 筛子中的点的样式 */

.pip {

  display: block;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  margin:4px;

  background-color: #333;

  box-shadow: inset 0 3px #111,

              inset 0 -3px #555;

}


/* 面公用样式 */



/* 第一面布局方式:元素水平居中且垂直居中 */

.first {

  justify-content: center;

  align-items: center;

}


/* 第二面布局方式 */

.second {

  justify-content: space-between;

}

/* 右对齐 */

.second .pip:last-child {

  align-self: flex-end;

}


/* 第三面布局方式 */

.third {

  justify-content: space-between;

}

.third .pip.third-item-center {

  align-self: center; 

}

.third .pip:last-child {

  align-self: flex-end;

}



/* 第四面布局方式 */

.fourth {

  justify-content: space-between; 

}

.fourth .column {

  display: flex;

  flex-direction: column;

  justify-content: space-between; 

}


/* 第五面布局方式 */

.fifth {

  justify-content: space-between; 

}

.fifth .column {

  display: flex;

  flex-direction: column;

  justify-content: space-between; 

}

.fifth .column.fifth-column-center{

  justify-content: center;

}


/* 第六面布局方式 */

.sixth { 

  justify-content:space-between;

}

.sixth .column {

  display: flex;

  flex-direction:column;

  justify-content:space-between;

}


.button-box{

  padding-top: 100px;

  width:80%;


}

index.wxml

<!-- 骰子模版视图 -->


<template name="first">

 <view class="first face">

 <span class="pip"></span>

 </view>

</template>


<template name="second">

 <view class="second face">

 <span class="pip"></span>

 <span class="pip"></span>

 </view>

</template>


<template name="third">

 <view class="third face">

 <span class="pip"></span>

 <span class="pip third-item-center"></span>

 <span class="pip"></span>

 </view>

</template>


<template name="fourth">

 <view class="fourth face">

 <!--按照列排列两个点-->

 <view class="column">

 <span class="pip"></span>

 <span class="pip"></span>

 </view>

 <!--按照列排列另外两个点-->

 <view class="column">

 <span class="pip"></span>

 <span class="pip"></span>

 </view>

 </view>

</template>


<template name="fifth">

 <view class="fifth face">

 <!--按照列排列两个点-->

 <view class="column">

 <span class="pip"></span>

 <span class="pip"></span>

 </view>

 <!--按照列排列中间一个点-->

 <view class="column fifth-column-center">

 <span class="pip"></span> 

 </view>

 <!--按照列排列另外两个点--> 

 <view class="column">

 <span class="pip"></span>

 <span class="pip"></span>

 </view>

 </view>

</template>


<template name="sixth">

 <view class="sixth face">

 <!--按照列排列三个点-->

 <view class="column">

 <span class="pip"></span>

 <span class="pip"></span>

 <span class="pip"></span>

 </view> 

 <!--按照列排列另外三个点-->

 <view class="column">

 <span class="pip"></span>

 <span class="pip"></span>

 <span class="pip"></span>

 </view>

 </view>

</template>


<!-- 展示视图 -->

<view class="flex-container"> 

 <view class="result" style="visibility:{{isShow}}">

 <text>恭喜,您摇到的数字是:{{total}}</text>

 </view>

 <view class="dice-box">

 <block>

 <template is="{{dice[num1]}}"></template>

 </block>

 </view>

 <view class="second-row">

 <view class="dice-box">

 <block>

 <template is="{{dice[num2]}}"></template>

 </block>

 </view>

 <view class="dice-box">

 <block>

 <template is="{{dice[num3]}}"></template>

 </block>

 </view>

 </view>

 <view class="button-box">

 <button type="{{buttonType}}" bindtap="shakeClick" >{{buttonValue}}</button>

 </view>

</view>

 


骰子点数的样式:

微信小程序学习用精品demo:麻将骰子:附详细教程微信小程序学习用精品demo:麻将骰子:附详细教程微信小程序学习用精品demo:麻将骰子:附详细教程

微信小程序学习用精品demo:麻将骰子:附详细教程微信小程序学习用精品demo:麻将骰子:附详细教程微信小程序学习用精品demo:麻将骰子:附详细教程


程序运行截图:

点击“摇一摇”按钮,进入摇骰子过程,每个骰子独立随机计数:

微信小程序学习用精品demo:麻将骰子:附详细教程


点击停止结束摇骰子,显示最终的结果:

微信小程序学习用精品demo:麻将骰子:附详细教程


项目地址及下载:


https://github.com/awdz424/WeChat-app-dice




0
收藏