微信小程序開發簡單入門Demo 石頭剪刀布
微信小程序開發簡單入門Demo已經是當下最熱門的話題，下面將從多方面來談談微信小程序開發簡單入門Demo 石頭剪刀布相關的內容。
在本篇小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進行參考和練手。
-
微信小程序商城系統開發其實很簡單
微信小程序商城系統開發其實很簡單，只需要五步就可以完成，整個過程包括開發、上線、發布都可以輕松搞定...詳情
第二部分：如何開通一個小商店
- 關注官方公眾號 -
咨詢電話：4006-089-731