这学期选修了《微信小程序设计》这门通识课,最近准备把本学期的部分小作业整理一下。
一、案例描述
设计一个微信小程序,由后台生成一个0~100的随机整数,用户猜这个整数,并在输入框中输入用户猜的数字,点击提交按钮,小程序将用户输入的整数与后台生成的随机整数进行比较,并输出结果。同时输出用户提交的次数。如果用户猜不出来,点击按钮可查看答案。
二、设计思路
1.页面设计思路
由于需要用户输入数字与后台随机整数进行比较,我们可以通过输入框input组件获得用户输入。接下来通过view组件显示提示信息和输入次数。最后还要有提交按钮,即button组件。我们还可以设计一个查看答案的按钮,通过hidden命令先将答案隐藏,如果用户点击查看答案按钮则显示答案。
2.逻辑层设计思路
由于需要后台生成一个0~100的随机整数,所以我们可以在js文件中定义一个random函数,用来生成随机整数。同时,我们还需要一个函数来判断用户输入与系统随机整数大小,并输出相应的结果。在判断函数中,我们可以定义一个变量i,用来计数。
三、程序设计
1.页面设计
首先通过input组件定义一个输入框来获得用户输入,代码如下:
<input placeholder=&#