前言：這是本人第一次寫博客，希望對和我一樣剛?cè)腴T微信小程序的新手們有所幫助。因為本人主要做安卓開發(fā)，對web前端知識也只是用了一天時間惡補了下。對于微信小程序，我會由淺入深，和大家一起多總結(jié)多學習。

還記得一年多前，我剛自學Java，當初蠢蠢欲動寫了一個石頭剪刀布的小游戲。如今作為微信小程序剛?cè)腴T的小白，我花了一個小時重新寫了一個石頭剪刀布的小Demo，希望把最近學的一些知識融合進去。也希望自己能和當初學Java入門一樣，能夠不斷努力，不斷進步。

最可怕的敵人,就是沒有堅強的信念. ——羅曼?羅蘭

在本篇小Demo中，我們主要運用到了以下知識：

1、事件的綁定

2、微信小程序的條件判斷語句

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

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

話不多說，先上demo的運行截圖：

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

//index.js //獲取應用實例 var app = getApp() Page({data:{// text:"這是一個頁面"//0是石頭、1是剪刀、2是布game:[0,1,2],computer:null,my:null,},onLoad:function(options){// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)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數(shù)組，用來對應石頭剪刀布的每一種情況，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是方法的回調(diào)，當我們觸發(fā)了點擊事件，小程序會調(diào)用該方法并傳入一個Object對象，這個Object對象主要存儲了點擊事件的一些信息。其中當我們點擊剪刀的時候，我們可以看到在Object的currentTarget下有個dataset中有個choose記錄了我們的選擇。

繼續(xù)看，我們使用了Math中的round函數(shù)和Math中的random函數(shù)，其中random會產(chǎn)生0-1之間的數(shù)，當我們*2時，random函數(shù)就會生成0-2之間的一個隨機自然數(shù)，然后我們通過round函數(shù)，進行四舍五入。接著通過this.setData({computer:random})我們將得到的0-2之間的隨機數(shù)設置給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標簽，就說兩點，一點是事件的綁定和事件對象數(shù)據(jù)的傳輸：

1、事件的綁定：

touchstart	手指觸摸
touchmove	手指觸摸后移動
touchcancel	手指觸摸動作被打斷，如來電提醒，彈窗
touchend	手指觸摸動作結(jié)束
tap	手指觸摸后離開
longtap	手指觸摸后，超過350ms再離開

? 微信小程序為我們提供了以上的冒泡事件列表，那會有同學問，什么叫冒泡事件呢，其實學Android的小朋友都知道，在安卓中事件的傳遞都是通過父控件一層層往下分發(fā)。

而在微信小程序中這個冒泡事件其實很形象，就是當事件觸發(fā)時，會從觸發(fā)的控件一層層往父控件進行傳遞。而非冒泡事件則不會向上父控件進行傳遞事件。

其中bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

在這里因為我們無所謂要不要要不要阻止事件向父控件傳遞，所以我們就用bindtap進行事件綁定就好了。事件綁定已key，value的形式進行綁定，我們通過?bindtap="btnclick"綁定了我們之前定義的事件處理方法。

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

在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會通過事件傳遞給SERVICE。 書寫方式： 以data-開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉(zhuǎn)成小寫)如data-element-type，最終在event.target.dataset中會將連字符轉(zhuǎn)成駝峰elementType。

其中我們看到我們這里寫了一個data-choose并讓它對應石頭剪刀布的對應的值，當我們點擊這個image的時候，我們就能通過我們事件處理方法中的e.target.dataset.choose進行獲取控件傳遞過來的值。

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

以上整個demo就完成了，這個demo還是主要偏基礎，希望幫助剛?cè)腴T小程序的小朋友有個簡單的demo進行參考和練手。

這也是我第一次寫博客，希望大家有什么意見和好的建議在評論區(qū)告訴我。

總結(jié)

以上是生活随笔為你收集整理的微信小程序入门Demo（石头剪刀布）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。