学习打卡 微信小程序 12月1日 | 您所在的位置:网站首页 › 打卡小程序搭建教程 › 学习打卡 微信小程序 12月1日 |
来晚了来晚了 一.多页面访问 打开index.wxml写入 保存后,有这两个选项出来,我们需要添加事件。继续在index.wxml中写入 我们添加了事件,还需要去index.js里实现 接着通过wx.navigateTo({})来实现转跳页面,继续在index.js中写入 不过我们写入的路径,现在还没有,需要我们自己去创建ru和game 可以去app.json中写入:第一种方式
第二种方式点击右键创建game和ru,还需要这两个目录中的json文件写入 { "usingComponents": {} }不配置就等于没注册,没注册肯定是找不到,这个一定要注意,接下来,我们点击对应的按钮就可以跳转到对应的界面了。 二.开始游戏界面随机值生成 既然已经可以进入游戏开始页了,咱们就可以开始设置一个随机值, 这个随机值就是用户需要回答的答案。 在游戏界面 game.wxml 文件响应前,会执行一些 game.js 里面的一些js函数,这些函数对应着当前页面的一个状态,例如: 此时可以看到页面中有对应的注释说明每个事件在什么时候调用。接下来我们需要在 onload 加载时就创建一个随机数。 此时可以继续在game.js中写入js的函数如下:
在代码中调用了当前页面的 setData 方法,this.setData()为当前页面设置页面所需的值,需要把对应的值放到花括号中,添加到setData中进行设置 其中 answei 的值等于 Math.round(Math.random()*100),其中 Math.random() 将会得到一个大于1小于0的小数,那么如果想取一个0到100的数就需要乘 100,接着 Math.round() 的作用是四舍五入取整,此时就可以得到一个0到100的整数了。 在该init方法中还设置了count 用于累计猜测次数,tip当前提示,x为猜测值,isGame表示是否游戏结束。 三.所猜数字是否正确 在游戏界面game.wxml中写入 inpuit="number" 表示当前 input接收数字输入,placeholder 表示该输入框的提示语,button 按钮的 form-type=“reset” 表示在按下按钮后其 form 内的内容将会重置。 然后在input和button上绑定事件 其中 bindblur 表示当前input 失去焦点后,将会响应一个事件,这个事件是 getNumber,button 按钮点击后将会响应 guess 事件. 接着我们继续去game.js中编写事件 此时响应页面中按钮失去焦点后,将会有一个值传递到该函数中,这个值包含在 e参数中,使用 e.detail.value 即可获取到传入 input 中输入的值。此时使用 setData 设置当前值中的猜测值 x 为输入框的内容值。 首先 let x=this.data.x; 定义一个局部变量x,赋值为猜测的值x,方便之后的计算。接着判断猜测之是否大于100或者小于0,因为这两者是范围之外不再进行判断,所以最开始使用 if进行判断. wx.showToast 表示调用微信小程序接口弹出提示,传入的参数 title 为提示内容。 创建两个变量,一个是 count记录猜测次数,另外一个 tip 为提示当前是对是错。 接着判断 x 是否等于最开始设置 answei(才发现因为打错了,不要在意就用着吧),如果等于就直接设置 tip的值为 第 某次回答 猜对了。其中count是表示第几次的变量,x是当前猜测的值。最后设置一个 isGame 这个变量为 false,表示游戏结束。 此时已经有了tip记录,将 tip 记录反馈至界面 game.wxml之中,只需要在前端加一个 text 即可,这个text 输出对应的 tip值: 最后我们也要将 isGame 用上,当猜对后应该显示一个重新开始的按钮 继续在game.wxml中写入一个 view 用于显示重新开始按钮: 在 view 之中 wx:if="{{isGame==false}}" 表示使用 if 判断,isGame 是否等于 false,等于false 表示当前游戏结束,此时满足条件将会显示该部分内容,也就是显示重新开始按钮。在 "{{isGame==false}}" 中会自动解析 isGame的值与 flase 进行对比。 在重新开始处绑定的点击事件 regame 事件只需要重新在事件中调用 init 函数即可: 接着在game.js中写入 此时即使猜对了,页面也还是会显示内容确定内容。这样逻辑不合理,再到 form 中添加一个 wx:if 判断 isGame 的值是否等于 true,如果等于true 就显示,不等于则不显示。 打开game.wxml中写入: 以上就是这次学习的全部内容了。 |
CopyRight 2018-2019 实验室设备网 版权所有 |