前言
- 微信小程序框架中的单向数据绑定应用
- 微信小程序框架中按钮组件的使用以及的事件绑定技术
- 微信小程序框架中视图模版的定义与使用
- CSS3 flex弹性布局（参考的是阮一峰前辈的Flex教程一文中的骰子实例）
骰子 小游戏
创建一个默认小程序项目
Page/Index
index.js
Page({ global : { timer : null , isRand : false }, data: { dice : ['first','second','third','fourth','fifth','sixth'], buttonType : 'primary', buttonValue : '摇一摇', num : 0 }, shake : function () { let me = this; this.global.isRand = !this.global.isRand; if ( this.global.isRand ) { this.global.timer = setInterval(function (){ let num = Math.floor(Math.random()*6); me.setData({num : num}); },50); } else { clearInterval(this.global.timer); } this.setData({ dice: this.data.dice, buttonType : (this.global.isRand) ? 'default' : 'primary', buttonValue : (this.global.isRand) ? '点击停止' : '摇一摇', }); }, })
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> <!--index.wxml--> <view class="flex-container"> <view class="dice-box"> <block><template is="{{dice[num]}}"></template></block> </view> <view class="button-box"> <button type="{{buttonType}}" size="mini" bindtap="shake" >{{buttonValue}}</button> </view> </view>
index.wxss
.flex-container{ display:flex; height: 100vh; background-color:#292929; flex-direction : column; justify-content: center; align-items: center; color: #fff; } .dice-box{ padding: 10px; } /* 筛子容器公用样式 */ .face { display: flex; margin: 5px; padding: 4px; background-color:#e7e7e7; width: 104px; height: 104px; 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-around; }
效果图
