这学期上了通识课《微信小程序设计》，最近打算整理一下这学期的一些小作业。
一、案例描述
设计一个微信小程序，后台生成0到100的随机整数，用户猜整数，在输入框输入用户猜的数字，点击提交按钮，小程序将用户输入的整数与后台生成的随机整数进行比较，输出结果。同时输出用户提交的数量。如果用户猜不出来，点击按钮查看答案。
二、设计思路 1、页面设计思路
由于用户输入的数字需要在后台与随机整数进行比较，我们可以通过输入框的输入组件获取用户输入。接下来通过视图组件显示提示信息和输入时间。最后，还有一个提交按钮，按钮组件。我们也可以设计一个查看答案的按钮地图场景，先通过隐藏命令隐藏答案，如果用户点击按钮查看答案则显示答案。
2.逻辑层设计思路
由于后台需要生成一个0到100的随机整数，所以我们可以在js文件中定义一个随机函数来生成一个随机整数。同时，我们还需要一个函数来判断用户输入的大小和系统的随机整数，并输出相应的结果。在判断函数中猜数字游戏设计UI界面，我们可以定义一个变量i，用于计数。
三、程序设计 1、页面设计
首先定义一个输入框，通过输入组件获取用户输入。代码如下：
接下来通过view组件获取并显示后台提示信息和输入时间
提示信息：{{tips}}
输入次数：{{i}}
最后提交和查看回答按钮可以通过按钮组件实现
我们可以通过视图组件显示答案
答案：{{rand}}
2.逻辑层设计
首先通过onLoad函数生成一个0到100的随机整数，代码如下：
onLoad:function(){
r=parseInt(Math.random()*101);
},
接下来通过input组件绑定的num函数获取用户输入的数字。代码如下：
num:function(e){
this.setData({
random:parseInt(e.detail.value)
})
},
得到随机数和用户输入的数字后，我们就可以进行判断并输出提示信息，可以实现如下：
judge: function(){
i++
if(this.data.random == r){
this.setData({
tips:"恭喜你，猜对了！"
})
}else if(this.data.random > r){
this.setData({
tips:"你输入过大！"
})
}else{
this.setData({
tips:"你输入过小！"
})
}
this.setData({
i:i
})
},
我们还需要一个函数来控制答案的显示，代码如下：
answer:function(){
this.setData({
rand:r,
flag:false
})
},
至此猜数字游戏设计，我们的基本功能已经实现。
4.页面美化
基本功能实现后，我们就可以通过修改wxss文件来美化我们的程序了。
我们可以给页面一个背景色，然后让input有一个边框，然后修改button按钮的样式。
代码如下：
page{
background: #f1f0f6
}
input{
background: #fff;
height: 120rpx;
margin: 10px;
padding-left: 8px;
border: solid 1px silver
}
button{
margin: 50rpx 0rpx;
background-color: red;
color: white;
}
五、源码 1.js文件代码
var rand,i=0,r,random,tips;
Page({
data: {
flag:true,
random:'',
tips:'',
times:''
},
onLoad:function(){
r=parseInt(Math.random()*101);
console.log(r)
},
num:function(e){
this.setData({
random:parseInt(e.detail.value)
})
},
judge: function(){
i++
if(this.data.random == r){
this.setData({
tips:"恭喜你，猜对了！"
})
}else if(this.data.random > r){
this.setData({
tips:"你输入过大！"
})
}else{
this.setData({
tips:"你输入过小！"
})
}
this.setData({
i:i
})
},
answer:function(){
this.setData({
rand:r,
flag:false
})
},
})
2.wxml文件代码
猜数字小游戏
提示信息：{{tips}}
输入次数：{{i}}
答案：{{rand}}
3.wxss文件代码
page{
background: #f1f0f6
}
input{
background: #fff;
height: 120rpx;
margin: 10px;
padding-left: 8px;
border: solid 1px silver
}
button{
margin: 50rpx 0rpx;
background-color: red;
color: white;
}
