微信小程序開發(fā)簡單入門Demo 石頭剪刀布
微信小程序開發(fā)簡單入門Demo已經(jīng)是當(dāng)下最熱門的話題，下面將從多方面來談?wù)勎⑿判〕绦蜷_發(fā)簡單入門Demo 石頭剪刀布相關(guān)的內(nèi)容。
在本篇小Demo中，我們主要運用到了以下知識：
1、事件的綁定
2、微信小程序的條件判斷語句
3、事件對象數(shù)據(jù)的傳遞
4、js的random函數(shù)運用
話不多說，先上demo的運行截圖：
由于我們只是對整個demo邏輯的實現(xiàn)，我對界面就比較隨意。我們主要是運用下小程序中以上用到的知識點，界面優(yōu)化可以交給各位讀者自己實現(xiàn)自己的小游戲Demo的時候進行優(yōu)化。
//index.js
//獲取應(yīng)用實例
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(){
// 頁面關(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代碼。首先我們在data中寫了一個gama數(shù)組，用來對應(yīng)石頭剪刀布的每一種情況，0對應(yīng)石頭，1對應(yīng)剪刀、2對應(yīng)布。
其中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)，當(dāng)我們觸發(fā)了點擊事件，小程序會調(diào)用該方法并傳入一個Object對象，這個Object對象主要存儲了點擊事件的一些信息。其中當(dāng)我們點擊剪刀的時候，我們可以看到在Object的currentTarget下有個dataset中有個choose記錄了我們的選擇。
繼續(xù)看，我們使用了Math中的round函數(shù)和Math中的random函數(shù)，其中random會產(chǎn)生0-1之間的數(shù)，當(dāng)我們*2時，random函數(shù)就會生成0-2之間的一個隨機自然數(shù)，然后我們通過round函數(shù)，進行四舍五入。接著通過this.setData({computer:random})我們將得到的0-2之間的隨機數(shù)設(shè)置給computer對象。因此我們就完成了使計算機隨機選擇石頭剪刀布中的一種情況。
最后是我們選擇的情況，我們this.setData({my:e.target.dataset.choose})，將我們的選擇設(shè)置給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的判斷語句，通過我們之前設(shè)置的computer和my對象，進行顯示計算機和我們的選擇，其中條件邏輯包括wx:if、wx:elif和wx.else。
再來看我們的image標(biāo)簽，就說兩點，一點是事件的綁定和事件對象數(shù)據(jù)的傳輸：
1、事件的綁定：
touchstart
手指觸摸
touchmove
手指觸摸后移動
touchcancel
手指觸摸動作被打斷，如來電提醒，彈窗
touchend
手指觸摸動作結(jié)束
tap
手指觸摸后離開
longtap
手指觸摸后，超過350ms再離開
微信小程序為我們提供了以上的冒泡事件列表，那會有人問，什么叫冒泡事件呢，其實學(xué)Android的小朋友都知道，在安卓中事件的傳遞都是通過父控件一層層往下分發(fā)。
而在微信小程序中這個冒泡事件其實很形象，就是當(dāng)事件觸發(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并讓它對應(yīng)石頭剪刀布的對應(yīng)的值，當(dāng)我們點擊這個image的時候，我們就能通過我們事件處理方法中的e.target.dataset.choose進行獲取控件傳遞過來的值。
最后我們就是根據(jù)計算機隨機產(chǎn)生的結(jié)果和我們選擇的結(jié)果，進行輸贏結(jié)果的判斷，然后進行輸出就好了。
以上整個demo就完成了，這個demo還是主要偏基礎(chǔ)，希望幫助剛?cè)腴T小程序的小朋友有個簡單的demo進行參考和練手。
-
微信小程序商城系統(tǒng)開發(fā)其實很簡單
微信小程序商城系統(tǒng)開發(fā)其實很簡單，只需要五步就可以完成，整個過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情
第二部分：如何開通一個小商店
- 關(guān)注官方公眾號 -
咨詢電話：4006-089-731