微信小程序入门Demo(石头剪刀布)
2016-10-21 13:37
260 查看
前言:这是本人第一次写博客,希望对和我一样刚入门微信小程序的新手们有所帮助。因为本人主要做安卓开发,对web前端知识也只是用了一天时间恶补了下。对于微信小程序,我会由浅入深,和大家一起多总结多学习。
还记得一年多前,我刚自学Java,当初蠢蠢欲动写了一个石头剪刀布的小游戏。如今作为微信小程序刚入门的小白,我花了一个小时重新写了一个石头剪刀布的小Demo,希望把最近学的一些知识融合进去。也希望自己能和当初学Java入门一样,能够不断努力,不断进步。
最可怕的敌人,就是没有坚强的信念. ——罗曼•罗兰
在本篇小Demo中,我们主要运用到了以下知识:
1、事件的绑定
2、微信小程序的条件判断语句
3、事件对象数据的传递
4、js的random函数运用
话不多说,先上demo的运行截图:
由于我们只是对整个demo逻辑的实现,我对界面就比较随意。我们主要是运用下小程序中以上用到的知识点,界面优化可以交给各位读者自己实现自己的小游戏Demo的时候进行优化。
[javascript] view
plain copy
//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用来记录我们选择的情况。
[javascript] view
plain copy
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对象。
接下来我们来看我们的布局文件
[html] view
plain copy
<!--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、事件的绑定:
微信小程序为我们提供了以上的冒泡事件列表,那会有同学问,什么叫冒泡事件呢,其实学Android的小朋友都知道,在安卓中事件的传递都是通过父控件一层层往下分发。
而在微信小程序中这个冒泡事件其实很形象,就是当事件触发时,会从触发的控件一层层往父控件进行传递。而非冒泡事件则不会向上父控件进行传递事件。
其中bind事件绑定不会阻止冒泡事件向上冒泡,
在这里因为我们无所谓要不要要不要阻止事件向父控件传递,所以我们就用bindtap进行事件绑定就好了。事件绑定已key,value的形式进行绑定,我们通过 bindtap="btnclick"绑定了我们之前定义的事件处理方法。
2、事件对象数据的传递
在组件中可以定义数据,这些数据将会通过事件传递给SERVICE。 书写方式: 以
其中我们看到我们这里写了一个data-choose并让它对应石头剪刀布的对应的值,当我们点击这个image的时候,我们就能通过我们事件处理方法中的e.target.dataset.choose进行获取控件传递过来的值。
最后我们就是根据计算机随机产生的结果和我们选择的结果,进行输赢结果的判断,然后进行输出就好了。
以上整个demo就完成了,这个demo还是主要偏基础,希望帮助刚入门小程序的小朋友有个简单的demo进行参考和练手。
这也是我第一次写博客,希望大家有什么意见和好的建议在评论区告诉我。
还记得一年多前,我刚自学Java,当初蠢蠢欲动写了一个石头剪刀布的小游戏。如今作为微信小程序刚入门的小白,我花了一个小时重新写了一个石头剪刀布的小Demo,希望把最近学的一些知识融合进去。也希望自己能和当初学Java入门一样,能够不断努力,不断进步。
最可怕的敌人,就是没有坚强的信念. ——罗曼•罗兰
在本篇小Demo中,我们主要运用到了以下知识:
1、事件的绑定
2、微信小程序的条件判断语句
3、事件对象数据的传递
4、js的random函数运用
话不多说,先上demo的运行截图:
由于我们只是对整个demo逻辑的实现,我对界面就比较随意。我们主要是运用下小程序中以上用到的知识点,界面优化可以交给各位读者自己实现自己的小游戏Demo的时候进行优化。
[javascript] view
plain copy
//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用来记录我们选择的情况。
[javascript] view
plain copy
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对象。
接下来我们来看我们的布局文件
[html] view
plain copy
<!--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再离开 |
而在微信小程序中这个冒泡事件其实很形象,就是当事件触发时,会从触发的控件一层层往父控件进行传递。而非冒泡事件则不会向上父控件进行传递事件。
其中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进行参考和练手。
这也是我第一次写博客,希望大家有什么意见和好的建议在评论区告诉我。
相关文章推荐
- 微信小程序入门Demo(石头剪刀布)
- 微信小程序开发 ▎入门Demo:石头剪刀布
- 微信小程序入门Demo(石头剪刀布)
- 微信小程序入门——怎么建多个项目?(导入官方Demo程序进行学习)
- 微信小程序入门学习-- 简易Demo:计算器
- 微信小程序入门教程+案例demo
- 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新
- 微信小程序 —— 快递查询Demo(入门)
- 微信小程序入门教程+案例demo
- 微信小程序入门教程+案例demo
- 微信小程序入门教程+案例demo
- 微信小程序入门教程+案例demo
- [微信小程序] 通过快速启动demo分析小程序入门关键点
- Ogre简单的demo程序 入门必备
- 微信小程序开发入门教程
- 使用微信小程序开发前端【快速入门】
- 微信小程序简单demo
- iOS蓝牙开发入门05--模仿demo写程序
- 【入门篇】Nginx + FastCGI 程序(C/C++) 搭建高性能web service的Demo及部署发布