微信小程序开发简单入门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">  

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})  

 }  

<!--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>