微信小程序开发实例：猜数字小游戏

这学期选修了《微信小程序设计》这门通识课，最近准备把本学期的部分小作业整理一下。

一、案例描述

设计一个微信小程序，由后台生成一个0~100的随机整数，用户猜这个整数，并在输入框中输入用户猜的数字，点击提交按钮，小程序将用户输入的整数与后台生成的随机整数进行比较，并输出结果。同时输出用户提交的次数。如果用户猜不出来，点击按钮可查看答案。

二、设计思路

1.页面设计思路

由于需要用户输入数字与后台随机整数进行比较，我们可以通过输入框input组件获得用户输入。接下来通过view组件显示提示信息和输入次数。最后还要有提交按钮，即button组件。我们还可以设计一个查看答案的按钮，通过hidden命令先将答案隐藏，如果用户点击查看答案按钮则显示答案。

2.逻辑层设计思路

由于需要后台生成一个0~100的随机整数，所以我们可以在js文件中定义一个random函数，用来生成随机整数。同时，我们还需要一个函数来判断用户输入与系统随机整数大小，并输出相应的结果。在判断函数中，我们可以定义一个变量i，用来计数。

三、程序设计

1.页面设计

首先通过input组件定义一个输入框来获得用户输入，代码如下：

<input placeholder=&#