微信小程序案例3-1 比较数字

一、运行效果

二、知识储备

（一）Page()函数

（二）数据绑定

（三）事件绑定

（四）事件对象

（五）this关键字

（六）setData()方法

（七）条件渲染

（八）<block>标签

（九）hidden属性

三、实现步骤

（一）准备工作

• 创建微信小程序 - 比较数字，不采用模板
  
• 单击【确定】按钮
  
• 清空页面结构
  
• 初始化页面样式
  
• 配置窗口表现
  

（二）实现页面结构

• 在pages/index/index.wxml文件里实现页面结构
  

<!--index.wxml-->
<view class="input"><text>请输入第1个数字：</text><input type="number" />
</view>
<view class = "input"><text>请输入第2个数字：</text><input type="number" />
</view>
<button class='btn'>比较</button>
<view class="result"><text>比较结果：</text>
</view>

• 查看预览效果
  

（三）实现页面样式

• 为了页面好看，编写页面样式文件pages/index/index.wxss
  

/**index.wxss**/
page {height: 100vh;display: flex;flex-direction: column;padding: 20rpx;
}
.input {height: 6vh;width: 100%;padding: 3vw;display: flex;    
}
.input > input {background-color: antiquewhite;width: 45vw;border: 1px solid #aaa
}
.btn {background-color: #1AAD19;color: white;font-size: 15px;
}
.result {margin-top: 2vh;padding: 3vw;
}

（四）获取并保存用户输入的数字

（五）判断数字大小并显示结果