基于网页的微信小程序——摇色子

本文主要是介绍摇色子这个小程序的具体内容

效果预览：

下面给出程序的主要代码：

- [ ] 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>

**

2.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%;

}

**

3.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',
    });

  },
})

Log页面的主要代码：

**

> logwxml:

**

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

log.wxss:

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

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
}

**

> 页面实现效果

**：