微信小程序入门Demo（石头剪刀布）

前言：这是本人第一次写博客，希望对和我一样刚入门微信小程序的新手们有所帮助。因为本人主要做安卓开发，对web前端知识也只是用了一天时间恶补了下。对于微信小程序，我会由浅入深，和大家一起多总结多学习。

还记得一年多前，我刚自学Java，当初蠢蠢欲动写了一个石头剪刀布的小游戏。如今作为微信小程序刚入门的小白，我花了一个小时重新写了一个石头剪刀布的小Demo，希望把最近学的一些知识融合进去。也希望自己能和当初学Java入门一样，能够不断努力，不断进步。

最可怕的敌人,就是没有坚强的信念. ——罗曼•罗兰

在本篇小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进行参考和练手。

这也是我第一次写博客，希望大家有什么意见和好的建议在评论区告诉我。

微信小程序入门Demo（石头剪刀布）相关推荐

微信小程序入门demo
最近在研究微信小程序,看到了别人的demo,照着做后发现了一些小问题,所以就重写了一个,加了一些自己的理解. 准备工作 IDE搭建知识准备从零开始 app.js app.json app.wxml ...
微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
微信小程序入门---01
目录微信小程序入门一.小程序简介二.第一个小程序二.小程序代码的构成三.WXML模块四.WXSS 样式五.JS 逻辑交互六.组件七.API 八.WXML 模板语法 - 数据绑定九. ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...
微信小程序入门教程---列表渲染多层嵌套循环及wx:key的使用(双层for循环)
前言入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for="{{items} ...
【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战文章目录微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
微信小程序开源Demo精选
微信小程序开源Demo精选原文:微信小程序开源Demo精选 1. 仿QQ应用程序(#社交 #聊天 #SNS) 地址:https://github.com/xiehui999/SmallAppForQ ...
微信小程序入门1--新建微信小程序页面
微信小程序入门1–新建微信小程序页面在新建微信小程序后会自动生成一个DEMO实例,我们可以在实例中修改自己所需的内容,当内容过多时,实例中的页面不足以满足我们的需求,因此需要新建微信小程序页面. 本 ...

微信小程序入门Demo（石头剪刀布）

微信小程序入门Demo（石头剪刀布）相关推荐

最新文章

热门文章