注冊(cè)登錄

微信小程序開(kāi)發(fā)簡(jiǎn)單入門(mén)Demo 石頭剪刀布

2017-12-05
導(dǎo)讀:2017年6月14日,微信小程序開(kāi)發(fā)簡(jiǎn)單入門(mén)Demo已經(jīng)是當(dāng)下最熱門(mén)的話題,下面將從多方面來(lái)談?wù)勎⑿判〕绦蜷_(kāi)發(fā)簡(jiǎn)單入門(mén)Demo 石頭剪刀布相關(guān)的內(nèi)容。...

微信小程序開(kāi)發(fā)簡(jiǎn)單入門(mén)Demo已經(jīng)是當(dāng)下最熱門(mén)的話題,下面將從多方面來(lái)談?wù)勎⑿判〕绦蜷_(kāi)發(fā)簡(jiǎn)單入門(mén)Demo 石頭剪刀布相關(guān)的內(nèi)容。

在本篇小Demo中,我們主要運(yùn)用到了以下知識(shí):

1、事件的綁定

2、微信小程序的條件判斷語(yǔ)句

3、事件對(duì)象數(shù)據(jù)的傳遞

4、js的random函數(shù)運(yùn)用

話不多說(shuō),先上demo的運(yùn)行截圖:

由于我們只是對(duì)整個(gè)demo邏輯的實(shí)現(xiàn),我對(duì)界面就比較隨意。我們主要是運(yùn)用下小程序中以上用到的知識(shí)點(diǎn),界面優(yōu)化可以交給各位讀者自己實(shí)現(xiàn)自己的小游戲Demo的時(shí)候進(jìn)行優(yōu)化。

 

//index.js  

//獲取應(yīng)用實(shí)例  

var app = getApp()  

Page({  

  data:{  

    // text:"這是一個(gè)頁(yè)面"  

    //0是石頭、1是剪刀、2是布  

    game:[0,1,2],  

    computer:null,  

    my:null,  

  },  

  onLoad:function(options){  

    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)  

    console.log("----onLoad-----")  

  },  

  onReady:function(){  

    // 頁(yè)面渲染完成  

    console.log("----onReady-----")  

  },  

  onShow:function(){  

    // 頁(yè)面顯示  

    console.log("----onShow-----")  

  },  

  onHide:function(){  

    // 頁(yè)面隱藏  

    console.log("----onHide-----")  

  },  

  onUnload:function(){  

    // 頁(yè)面關(guān)閉  

    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代碼。首先我們?cè)赿ata中寫(xiě)了一個(gè)gama數(shù)組,用來(lái)對(duì)應(yīng)石頭剪刀布的每一種情況,0對(duì)應(yīng)石頭,1對(duì)應(yīng)剪刀、2對(duì)應(yīng)布。

其中computer用來(lái)記錄計(jì)算機(jī)所出的情況,my用來(lái)記錄我們選擇的情況。

 

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)主要用來(lái)處理點(diǎn)擊事件,其中e是方法的回調(diào),當(dāng)我們觸發(fā)了點(diǎn)擊事件,小程序會(huì)調(diào)用該方法并傳入一個(gè)Object對(duì)象,這個(gè)Object對(duì)象主要存儲(chǔ)了點(diǎn)擊事件的一些信息。其中當(dāng)我們點(diǎn)擊剪刀的時(shí)候,我們可以看到在Object的currentTarget下有個(gè)dataset中有個(gè)choose記錄了我們的選擇。

繼續(xù)看,我們使用了Math中的round函數(shù)和Math中的random函數(shù),其中random會(huì)產(chǎn)生0-1之間的數(shù),當(dāng)我們*2時(shí),random函數(shù)就會(huì)生成0-2之間的一個(gè)隨機(jī)自然數(shù),然后我們通過(guò)round函數(shù),進(jìn)行四舍五入。接著通過(guò)this.setData({computer:random})我們將得到的0-2之間的隨機(jī)數(shù)設(shè)置給computer對(duì)象。因此我們就完成了使計(jì)算機(jī)隨機(jī)選擇石頭剪刀布中的一種情況。

最后是我們選擇的情況,我們this.setData({my:e.target.dataset.choose}),將我們的選擇設(shè)置給my對(duì)象。

接下來(lái)我們來(lái)看我們的布局文件

 

<!--index.wxml-->  

<view class="container">  

  <view wx:if="{{computer==0}}">  

    計(jì)算機(jī):石頭  

  </view>  

  <view wx:elif="{{computer==1}}">  

    計(jì)算機(jī):剪刀  

  </view>  

  <view wx:elif="{{computer==2}}">  

    計(jì)算機(jī):布  

  </view>  

  <view wx:else>  

    計(jì)算機(jī):你個(gè)渣渣  

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

 

其實(shí)沒(méi)什么好說(shuō)的,就是一個(gè)wx:if的判斷語(yǔ)句,通過(guò)我們之前設(shè)置的computer和my對(duì)象,進(jìn)行顯示計(jì)算機(jī)和我們的選擇,其中條件邏輯包括wx:if、wx:elif和wx.else。
再來(lái)看我們的image標(biāo)簽,就說(shuō)兩點(diǎn),一點(diǎn)是事件的綁定和事件對(duì)象數(shù)據(jù)的傳輸:

1、事件的綁定:

 

touchstart

手指觸摸

 

 

touchmove

手指觸摸后移動(dòng)

 

 

touchcancel

手指觸摸動(dòng)作被打斷,如來(lái)電提醒,彈窗

 

 

touchend

手指觸摸動(dòng)作結(jié)束

 

 

tap

手指觸摸后離開(kāi)

 

 

longtap

手指觸摸后,超過(guò)350ms再離開(kāi)

 

 微信小程序為我們提供了以上的冒泡事件列表,那會(huì)有人問(wèn),什么叫冒泡事件呢,其實(shí)學(xué)Android的小朋友都知道,在安卓中事件的傳遞都是通過(guò)父控件一層層往下分發(fā)。

而在微信小程序中這個(gè)冒泡事件其實(shí)很形象,就是當(dāng)事件觸發(fā)時(shí),會(huì)從觸發(fā)的控件一層層往父控件進(jìn)行傳遞。而非冒泡事件則不會(huì)向上父控件進(jìn)行傳遞事件。

其中bind事件綁定不會(huì)阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。

在這里因?yàn)槲覀儫o(wú)所謂要不要要不要阻止事件向父控件傳遞,所以我們就用bindtap進(jìn)行事件綁定就好了。事件綁定已key,value的形式進(jìn)行綁定,我們通過(guò) bindtap="btnclick"綁定了我們之前定義的事件處理方法。

2、事件對(duì)象數(shù)據(jù)的傳遞

在組件中可以定義數(shù)據(jù),這些數(shù)據(jù)將會(huì)通過(guò)事件傳遞給SERVICE。 

書(shū)寫(xiě)方式: 以data-開(kāi)頭,多個(gè)單詞由連字符-鏈接,不能有大寫(xiě)(大寫(xiě)會(huì)自動(dòng)轉(zhuǎn)成小寫(xiě))如data-element-type,最終在event.target.dataset中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType。

其中我們看到我們這里寫(xiě)了一個(gè)data-choose并讓它對(duì)應(yīng)石頭剪刀布的對(duì)應(yīng)的值,當(dāng)我們點(diǎn)擊這個(gè)image的時(shí)候,我們就能通過(guò)我們事件處理方法中的e.target.dataset.choose進(jìn)行獲取控件傳遞過(guò)來(lái)的值。

最后我們就是根據(jù)計(jì)算機(jī)隨機(jī)產(chǎn)生的結(jié)果和我們選擇的結(jié)果,進(jìn)行輸贏結(jié)果的判斷,然后進(jìn)行輸出就好了。

以上整個(gè)demo就完成了,這個(gè)demo還是主要偏基礎(chǔ),希望幫助剛?cè)腴T(mén)小程序的小朋友有個(gè)簡(jiǎn)單的demo進(jìn)行參考和練手。

 


重磅推薦:小程序開(kāi)店目錄

第一部分:小商店是什么

第二部分:如何開(kāi)通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分:小商店可以賣(mài)什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開(kāi)發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開(kāi)店