微信小程序开发 ▎入门Demo：石头剪刀布
文章来源：知识库
微信小程序,开发,小应用
2017/03/20 18:00
475
在本篇小Demo中，我们主要运用到了以下知识：
1、事件的绑定
2、微信小程序的条件判断语句
3、事件对象数据的传递
4、js的random函数运用
话不多说，先上demo的运行截图：
由于我们只是对整个demo逻辑的实现，我对界面就比较随意。我们主要是运用下小程序中以上用到的知识点，界面优化可以交给各位读者自己实现自己的小游戏Demo的时候进行优化。
//index.js //获取应用实例 var app = getApp() Page({ data:{ // text:"这是一个页面" //0是石头、1是剪刀、2是布 game:[0,1,2], computer:null, my:null, }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 console.log("----onLoad-----") }, onReady:function(){ // 页面渲染完成 console.log("----onReady-----") }, onShow:function(){ // 页面显示 console.log("----onShow-----") }, onHide:function(){ // 页面隐藏 console.log("----onHide-----") }, onUnload:function(){ // 页面关闭 console.log("----onUnload-----") }, // toLog:function(){ // wx.navigateTo({url:"../logs/logs?id=1"}) // }, btnclick:function(e){ var random=Math.round(Math.random()*2); this.setData({computer:random}) console.log(e.target.dataset.choose) this.setData({my:e.target.dataset.choose}) } })<pre class="javascript" name="code">
首先，我们看page的js代码。首先我们在data中写了一个gama数组，用来对应石头剪刀布的每一种情况，0对应石头，1对应剪刀、2对应布。
其中computer用来记录计算机所出的情况，my用来记录我们选择的情况。
btnclick:function(e){ var random=Math.round(Math.random()*2); this.setData({computer:random}) console.log(e.target.dataset.choose) this.setData({my:e.target.dataset.choose}) }
btnclick:function(e)主要用来处理点击事件，其中e是方法的回调，当我们触发了点击事件，小程序会调用该方法并传入一个Object对象，这个Object对象主要存储了点击事件的一些信息。其中当我们点击剪刀的时候，我们可以看到在Object的currentTarget下有个dataset中有个choose记录了我们的选择。
继续看，我们使用了Math中的round函数和Math中的random函数，其中random会产生0-1之间的数，当我们*2时，random函数就会生成0-2之间的一个随机自然数，然后我们通过round函数，进行四舍五入。接着通过this.setData({computer:random})我们将得到的0-2之间的随机数设置给computer对象。因此我们就完成了使计算机随机选择石头剪刀布中的一种情况。
最后是我们选择的情况，我们this.setData({my:e.target.dataset.choose})，将我们的选择设置给my对象。
接下来我们来看我们的布局文件
<!--index.wxml--> <view class="container"> <view wx:if="{{computer==0}}"> 计算机：石头 </view> <view wx:elif="{{computer==1}}"> 计算机：剪刀 </view> <view wx:elif="{{computer==2}}"> 计算机：布 </view> <view wx:else> 计算机:你个渣渣 </view> <view wx:if="{{my==0}}"> 我：石头 </view> <view wx:elif="{{my==1}}"> 我：剪刀 </view> <view wx:elif="{{my==2}}"> 我：布 </view> <view wx:else> 我： </view> <view class="test"> <view class="imageGroup"> <image type="primary" class="btn" bindtap="btnclick" data-choose="0" src="../../image/shitou.png" class="image"></image> <image type="primary" class="btn" bindtap="btnclick" data-choose="1" src="../../image/jiandao.png" class="image"></image> <image type="primary" class="btn" bindtap="btnclick" data-choose="2" src="../../image/bu.png" class="image"></image> </view> </view> <view wx:if="{{my==computer}}"> 所以，平局了 </view> <view wx:elif="{{my!=computer}}"> <view wx:if="{{computer==0&&my==1}}"> 所以，你输了 </view> <view wx:if="{{computer==0&&my==2}}"> 所以，你赢了 </view> <view wx:if="{{computer==1&&my==0}}"> 所以，你赢了 </view> <view wx:if="{{computer==1&&my==2}}"> 所以，你输了 </view> <view wx:if="{{computer==2&&my==0}}"> 所以，你输了 </view> <view wx:if="{{computer==2&&my==1}}"> 所以，你赢了 </view> </view> </view>
其实没什么好说的，就是一个wx:if的判断语句，通过我们之前设置的computer和my对象，进行显示计算机和我们的选择，其中条件逻辑包括wx:if、wx:elif和wx.else。
再来看我们的image标签，就说两点，一点是事件的绑定和事件对象数据的传输：
1、事件的绑定：
touchstart 手指触摸
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后离开
longtap 手指触摸后，超过350ms再离开
微信小程序为我们提供了以上的冒泡事件列表，那会有人问，什么叫冒泡事件呢，其实学Android的小朋友都知道，在安卓中事件的传递都是通过父控件一层层往下分发。
而在微信小程序中这个冒泡事件其实很形象，就是当事件触发时，会从触发的控件一层层往父控件进行传递。而非冒泡事件则不会向上父控件进行传递事件。
其中bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
在这里因为我们无所谓要不要要不要阻止事件向父控件传递，所以我们就用bindtap进行事件绑定就好了。事件绑定已key，value的形式进行绑定，我们通过 bindtap="btnclick"绑定了我们之前定义的事件处理方法。
2、事件对象数据的传递
在组件中可以定义数据，这些数据将会通过事件传递给SERVICE。
书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在event.target.dataset中会将连字符转成驼峰elementType。
其中我们看到我们这里写了一个data-choose并让它对应石头剪刀布的对应的值，当我们点击这个image的时候，我们就能通过我们事件处理方法中的e.target.dataset.choose进行获取控件传递过来的值。
最后我们就是根据计算机随机产生的结果和我们选择的结果，进行输赢结果的判断，然后进行输出就好了。
以上整个demo就完成了，这个demo还是主要偏基础，希望帮助刚入门小程序的小朋友有个简单的demo进行参考和练手。
为您推荐
热门文章
