全解小程序猜数字游戏 04《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232

进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有详细的变现教程等你来。

社区有奖励 下面有投票

本文也有评论区、点赞、收藏有抽奖,评论区抽取,3天内开奖

前言

《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
本系列文章参考《微信小程序开发实战》并对新手做出补充说明
教程出完后将会有变现直播,请关注CSDN社区活动公告:https://bbs.csdn.net/forums/A757291228?spm=1001.2014.3001.6682&typeId=19380。

在社区中发文每周将会在活跃前十送出:

  • 一本实物书籍
  • 多份实物小礼品
  • 每月送出机械键盘等奖励

教程所需

由于小程序开发需要一定的基础,这些基础需要提前掌握,本教程只对小程序开发进行零基础说明。

  • 微信小程序开发工具,下载链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  • JavaScript基础

  • HTML基础

目录 持续更新:

小程序的 HelloWord 01《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序获取头像试试水 02《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序仿微信发现页 03《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序猜数字游戏 04《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》

一、多页面访问

首先该demo有多个页面,这些页面进入到首页后可以互相查看:

首先页面就是两个按钮,一看就是一个 view 里面有两个 button,简简单单是不是?index.wxml 的代码如下:

<view><button>开始游戏</button><button>游戏规则</button>
</view>

在这里插入图片描述
接着我们发现在我目录中有两个文件夹,一个是 game 还有一个是 ru,这个不急,咱们先给首页加上合适的事件。我们需要点击按钮跳转到其它页面,这个时候就需要添加事件,事件是一个js函数,咱们在前端index.wxml中使用bindtap绑定不同按钮对应需要执行的事件:

<view><button bindtap="startGame">开始游戏</button><button bindtap="toRules">游戏规则</button>
</view>

在这里插入图片描述
此时咱们在index.js中写下对应的函数响应:

  startGame(){},toRules(){},

在这里插入图片描述
那我们需要怎样跳转页面呢?这个时候就需要使用 wx.navigateTo({}),此时代码写成:

  startGame(){wx.navigateTo({url: '/pages/game/game',})},toRules(){wx.navigateTo({url: '/pages/ru/ru',})},

在这里插入图片描述

此时只需要在 navigateTo 中传入 url 参数即可,这些 url参数表示需要跳转页面的文职,其中 ru/ru 直接会默认跳转到对应的 wxml 文件。

接着咱们创建文件夹 ru 与 game:
在这里插入图片描述
随后在创建的两个目录的json文件中添加基本的json内容,否则会 出错呢:

{"usingComponents": {}
}


接下来还需要一个点,就是在app.json中配置对应的文件目录:

"pages": ["pages/index/index","pages/game/game","pages/ru/ru","pages/logs/logs"]

在这里插入图片描述
不配置就等于没注册,没注册肯定是找不到,这个一定要注意,接下来,我们点击对应的按钮就可以跳转到对应的界面了。

二、开始游戏页面随机值生成

既然已经可以进入游戏开始页了,咱们就可以开始设置一个随机值, 这个随机值就是用户需要回答的答案。

在游戏界面 game.wxml 文件响应前,会执行一些 game.js 里面的一些js函数,这些函数对应着当前页面的一个状态,例如:
在这里插入图片描述
此时可以看到页面中有对应的注释说明每个事件在什么时候调用。接下来我们需要在 onload 加载时就创建一个随机数。此时可以写一个js的函数如下:

inital(){this.setData({answei:Math.round(Math.random()*100),count:0,tip:'',x:0,isGame:true});},

在这里插入图片描述

在代码中调用了当前页面的 setData 方法,this.setData()为当前页面设置页面所需的值,需要把对应的值放到花括号中,添加到setData中进行设置:

{answei:Math.round(Math.random()*100),count:0,tip:'',x:0,isGame:true}

其中 answei 的值等于 Math.round(Math.random()*100),其中 Math.random() 将会得到一个大于1小于0的小数,那么如果想取一个0到100的数就需要乘 100,接着 Math.round() 的作用是四舍五入取整,此时就可以得到一个0到100的整数了。
在该init方法中还设置了count 用于累计猜测次数,tip当前提示,x为猜测值,isGame表示是否游戏结束。

三、判断所猜数字正确与否

接下来在游戏界面 game.wxml 中输入如下代码编写界面:

<view><text>猜数字游戏</text><form><input type="number" placeholder="请输入1-100你要猜的数"></input><button form-type="reset">确定</button></form>
</view>

在这里插入图片描述

inpuit="number" 表示当前 input接收数字输入,placeholder 表示该输入框的提示语,button 按钮的 form-type=“reset” 表示在按下按钮后其 form 内的内容将会重置。

接着在输入框 input 与 按钮button 上绑定事件:

  <form><input  bindblur="getNumber" type="number" placeholder="请输入1-100你要猜的数"></input><button bindtap="guess" form-type="reset">确定</button></form>

在这里插入图片描述
其中 bindblur 表示当前input 失去焦点后,将会响应一个事件,这个事件是 getNumber,button 按钮点击后将会响应 guess 事件。

此时去 game.js 中编写这两个事件,首先查看 getNumber:

getNumber(e){this.setData({x:e.detail.value});console.log(this.data.x)},

此时响应页面中按钮失去焦点后,将会有一个值传递到该函数中,这个值包含在 e参数中,使用 e.detail.value 即可获取到传入 input 中输入的值。此时使用 setData 设置当前值中的猜测值 x 为输入框的内容值。

接着查看 guess 函数代码:

guess(){let x=this.data.x;if(x<0){wx.showToast({title: '不能小于0',})}else if(x>100){wx.showToast({title: '不能大于100',})}else{let count=this.data.count+1;let tip=this.data.tip;if(x==this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 对了!';this.setData({isGame:false});}else if(x>this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 大了!';}else{tip+='\n第'+count+' 回合 猜:'+x+' 小了!';}this.setData({tip:tip,count:count})}},

首先 let x=this.data.x; 定义一个局部变量x,赋值为猜测的值x,方便之后的计算。
接着判断猜测之是否大于100或者小于0,因为这两者是范围之外不再进行判断,所以最开始使用 if进行判断:

 if(x<0){wx.showToast({title: '不能小于0',})}else if(x>100){wx.showToast({title: '不能大于100',})}

以上代码中 wx.showToast 表示调用微信小程序接口弹出提示,传入的参数 title 为提示内容。

在以上完整代码 esle 部分中就是合理输入时进行的响应。在else 部分中:

 let count=this.data.count+1;let tip=this.data.tip;

创建两个变量,一个是 count记录猜测次数,另外一个 tip 为提示当前是对是错。

if(x==this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 对了!';this.setData({isGame:false});}

接着判断 x 是否等于最开始设置 answei(才发现因为打错了,不要在意就用着吧),如果等于就直接设置 tip的值为 第 某次回答 猜对了。其中count是表示第几次的变量,x是当前猜测的值。最后设置一个 isGame 这个变量为 false,表示游戏结束。

接着的 esle if 和 else 表示是否猜大或者猜小:

else if(x>this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 大了!';
}else{tip+='\n第'+count+' 回合 猜:'+x+' 小了!';
}

其中 else if 表示 x 的值是否猜大了,猜大使用 tip加上当前的记录;另外的else 表示猜小的情况,同理记录 tip。

此时已经有了tip记录,将 tip 记录反馈至界面 game.wxml之中,只需要在前端加一个 text 即可,这个text 输出对应的 tip值:

在这里插入图片描述
最后我们也要将 isGame 用上,当猜对后应该显示一个重新开始的按钮,那么此时在前端页面中加上一个 view 用于显示重新开始按钮:

在这里插入图片描述
在 view 之中 wx:if="{{isGame==false}}" 表示使用 if 判断,isGame 是否等于 false,等于false 表示当前游戏结束,此时满足条件将会显示该部分内容,也就是显示重新开始按钮。在 "{{isGame==false}}" 中会自动解析 isGame的值与 flase 进行对比。

在重新开始处绑定的点击事件 regame 事件只需要重新在事件中调用 init 函数即可:
在这里插入图片描述

 regame(){this.inital();},

此时即使猜对了,页面也还是会显示内容确定内容:
在这里插入图片描述
该逻辑不合理,再到 form 中添加一个 wx:if 判断 isGame 的值是否等于 true,如果等于true 就显示,不等于则不显示:
在这里插入图片描述
此时完美解决:
在这里插入图片描述
还剩一个规则页过于简单,大家就自己搞定了。

四、最后关键完整代码

game.wxml

<view><text>猜数字游戏</text><form wx:if="{{isGame==true}}"><input  bindblur="getNumber" type="number" placeholder="请输入1-100你要猜的数"></input><button bindtap="guess" form-type="reset">确定</button></form><view wx:if="{{isGame==false}}"><button bindtap="regame">重新开始</button></view><text>{{tip}}</text>
</view>

game.js

Page({/*** 页面的初始数据*/data: {},inital(){this.setData({answei:Math.round(Math.random()*100),count:0,tip:'',x:0,isGame:true});},getNumber(e){this.setData({x:e.detail.value});console.log(this.data.x)},guess(){let x=this.data.x;if(x<0){wx.showToast({title: '不能小于0',})}else if(x>100){wx.showToast({title: '不能大于100',})}else{let count=this.data.count+1;let tip=this.data.tip;if(x==this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 对了!';this.setData({isGame:false});}else if(x>this.data.answei){tip+='\n第'+count+' 回合 猜:'+x+' 大了!';}else{tip+='\n第'+count+' 回合 猜:'+x+' 小了!';}this.setData({tip:tip,count:count})}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.inital();console.log(this.data.answei)},regame(){this.inital();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.wxml

<view><button bindtap="startGame">开始游戏</button><button bindtap="toRules">游戏规则</button>
</view>

index.js

 startGame(){wx.navigateTo({url: '/pages/game/game',})},toRules(){wx.navigateTo({url: '/pages/ru/ru',})},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sublime text 3 安装、添加命令行启动、汉化、注册码

1. 安装sublime&#xff1a; 下载&#xff1a;http://www.sublimetext.com/3 添加命令行启动&#xff1a;设置环境变量->计算机->右键属性->高级系统设置->环境变量->系统变量->Path->编辑&#xff0c;加入";安装路径"(如&#xff1a;;D:\Progr…

Linux下的用户和组

2019独角兽企业重金招聘Python工程师标准>>> 用户和组 GNU/Linux 通过用户和用户组实现访问控制 —— 包括对文件访问、设备使用的控制。Linux 默认的访问控制机制相对简单直接&#xff0c;不过还有一些更加高级的机制&#xff0c;包括 ACL 和 LDAP Authentication.…

漫画C语言 做个聊天软件你不懂也得懂

学完C语言做不出东西&#xff1f;不存在的&#xff0c;咱们做一个最“隐私”的聊天器&#xff0c;就俩人&#xff0c;你和我。咱们聊天的信息你知我知没别人知。 对了&#xff0c;本文评论区点赞、收藏抽奖。 社区也有抽奖&#xff0c;本周社区抽奖帖子 &#xff1a;https://b…

【Microstation】第一章:Microstation三维模型构建概述

MicroStation 是国际上和AutoCAD齐名的二维和三维CAD设计软件&#xff0c;第一个版本由Bentley兄弟在1986年开发完成。其专用格式是DGN&#xff0c;并兼容AutoCAD的DWG/DXF等格式。 MicroStation是Bentley 工程软件系统有限公司在建筑、土木工程、交通运输、加工工厂、离散制造…

libgdx游戏引擎开发笔记(十)SuperJumper游戏例子的讲解(篇四)---- 主游戏界面内部框架编写...

上一讲&#xff0c;我们已经实现了点击play进入游戏界面但仅仅是个黑屏 今天&#xff0c;我们就试着编写代码让它出现游戏的一些简单场景。还是在上一讲的代码基础上&#xff0c;我们创建两个类&#xff1a;World 和 WorldRenderer 1.Word类&#xff1a; 12345678910111213141…

看看《System.CommandLine》

记得之前出过几篇.net tool工具的文章&#xff0c;当时的做法是所有工具的语法分析全部自己解释&#xff0c;自己执行&#xff0c;语法的解释占了大部分时间&#xff0c;反而工具的功能被弱化了。其实微软有一个CommandLine框架在缓慢的发展着&#xff0c;至今都没有正式发布&a…

Sublime Text 3 import Anaconda 无法正常补全模块名解决办法

Sublime Text 3 Anaconda配置 在安装Sublime Text3之后我们总会安装一些插件&#xff0c;比如Python的Anaconda自动补全插件。但是&#xff0c;装好之后发现import 时无法像别的IDE里面那样自动补全模块名&#xff0c;就像图中一样&#xff1a; 解决办法在Sublime Text的git…

Android之添加固定图标到桌面

我的QQ群 1 需求 Android之添加固定图标到桌面 2 部分实现 在AndroidManifest.xml里面添加如下权限 <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /><uses-permission android:name="com.android.launcher.perm…

想做程序员?不同方向入门路线全解

学习计算机编程有很多方向如果你没有一个正确的路线&#xff0c;那么就会&#xff1a; 就会跟上面所说的那样&#xff0c;被迫成为一个全栈&#xff0c;这是比较尴尬的。 若你想比较准确的针对某个方向学习&#xff0c;那就继续往下看吧。 一、程序员分为哪几个方向 随着…

【转】OpenGL超级宝典笔记——纹理映射Mipmap

原文地址 http://my.oschina.net/sweetdark/blog/177812 , 感谢作者&#xff0c;若非法转载请联系本人。 目录[-] MipmappingMipmap过滤构建Mip层Mipmaps 硬件生成LOD&#xff08;多细节层次&#xff09;偏好纹理对象管理多个纹理常驻纹理纹理优先级回顾Mipmapping Mipmap是一个…

【Microstation】第二章:Microstation三维建模基础知识

本章的主要内容包括模型的显示样式(线框、光滑)、三维定位(V、T、S、F)、Microstation常见的坐标系统(世界坐标系、ACS辅助坐标系、精确绘图坐标系、)和Microstation的工作区域(2D和3D)。 一、显示样式 二、三维定位 三维定位在Microstation中显得尤为重要,常见…

实现 EF Core 6 自定义查询标记

前言在《EF Core使用Simple Logging输出日志》中&#xff0c;我们介绍了查询标记 TagWith&#xff0c;它可以帮助我们快速定位到需要的日志&#xff1a;而在 .NET 6 中&#xff0c;新增了另外一个查询标记 TagWithCallSite&#xff0c;它可以标记出代码的位置&#xff1a;var u…

0运维?微信小程序云开发增删查改【05】

在创建小程序时&#xff0c;选择云开发&#xff1a; 随后进入项目之后&#xff0c;此时整个目录如下&#xff1a; 此时我们如图目录即可找到首页位置&#xff1a; 接着咱们清除 index.wxml 代码内容&#xff1a; 在 index.wxml 中加入如下代码&#xff1a; <view> …

【Microstation】第三章:Microstation三维模型构建与编辑

本章主要讲述三维基本实体绘制、三维构造元素绘制、三维模型编辑。 一、三维基本体素绘制 对于立方体、圆柱、球、圆锥等这些基本立体单位,MS提供了专门的绘图工具。 基本体素绘制有两种方式: (1)精确绘图工具 (2&

文件系统管理相关命令

查看文件系统相关属性的命令&#xff1a;blkidblkid是一个查看磁盘设备属性相关信息的命令行工具blkid -L LABEL | UUID :根据UUID查看对应的设备是哪个blkid [-ghlv] [-c file] [-w file] [-o format][-s tag] [-t NAMEvalue] device [device ...]-i&#xff1a;显示io限制lsb…

Android之实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果

1 需求 实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果,页面滑动的时候,图标也左右滑动,但是只是显示其中的一个 https://www.captainai.net/st/ 2 代码实现 xml布局实现 <LinearLayoutandroid:id="@+id/mainLl"android:layout_width="24d…

你都用 Python 来做什么?

你们都用python做些什么呢&#xff1f; 在开发中 python 这一个语言就像是小叮当&#xff0c;而 python 的第三方库则是“百宝箱”&#xff0c;你只要想着对某一个方向进行开发&#xff0c;那么这个“百宝箱”就会给你想要的东西。 由于我是在开发多年后接触到的 python&#…

Android之tint图片着色器

1、爆照 上面是原图,下面是点击效果。 2、介绍 设置着色模式用的。这个模式共有6种,分别为: multiply screen src_in(默认) src_over src_atop add android:tint 属性可以改变图片颜色 3 源代码 colors.xml <?xml version="1.0" encoding="utf-8&qu…

关于 Oracle分页数据重复的问题

2019独角兽企业重金招聘Python工程师标准>>> 先说问题吧。最近在测试一个新的模块&#xff0c;发现列表数据的前三页数据竟然是一样的。第一反应是 pageNo 的问题&#xff0c;debug一看&#xff0c;pageNo是正确的&#xff0c;然后一层层debug下去&#xff0c;所有参…

10分钟做一个新闻问答web站点[iVX低代码实战]

一、创建首页 进入到iVX线上编辑器后&#xff0c;选择相对定位。 点击创建后进入到 IDE 之中&#xff1a; 我们在第一步中首先创建一个首页。点击左侧组件栏中的页面组件&#xff0c;创建一个页面&#xff1a; 接着重命名该页面为Home&#xff0c;在页面中创建一个行&#x…