目录
比较数字大小
功能描述
准备工作
页面内容
设置页面事件
页面绑定事件
比较大小
按钮绑定事件
比较事件
设置结果显示
页面样式
功能截图
总结
比较数字大小
本案例将实现“比较数字大小”微信小程序，它的功能是当用户输入两个数字后，点击“比较”按钮可以自动比较这两个数字的大小。
功能描述
有两个输入框，可以输入数字，输入后点击“比较”按钮，按钮下方会显示比较结果。
比较结果有3种情况：
如果第1个数字比第2个数字大，则比较结果为“第1个数大”；
如果第2个数字比第1个数字大，则比较结果为“第2个数大”；
如果第1个数字和第2个数字相等，则比较结果为“两数相等”。
准备工作
1.创建项目文件夹，创建小程序-选择不使用模版
2.配置导航栏。在pages/index/index.json文件中配置页面导航栏，具体代码如下
页面内容
在pages/index/index.wxml文件中编写“比较数字大小”微信小程序的页面内容，
具体代码如下：
<!--index.wxml-->
<view class="container"><view><text>请输入第1个数字：</text><input type="number" /></view><view><text>请输入第2个数字：</text><input type="number" /></view><button type="primary">比较</button><view><text>比较结果：</text></view>
</view>
设置页面事件
在pages/index/index.js文件中编写。
具体代码如下：
// index.js
Page({num1: 0, // 保存第1个数字num2: 0, // 保存第2个数字num1Input: function (e) {this.num1 = Number(e.detail.value)},num2Input: function (e) {this.num2 = Number(e.detail.value)},
})
页面绑定事件
在pages/index/index.wxml文件中对两个输入框绑定事件，
具体代码如下：
<input type="number" bindinput="num1Input"/>
<input type="number" bindinput="num2Input"/>比较大小
按钮绑定事件
首先在pages/index/index.wxml文件中找到button组件，
为它的tap事件绑定事件处理函数compare()，具体代码如下：
<button bindtap="compare">比较</button>
比较事件
在pages/index/index.js文件中，设置比较事件并对结果进行赋值。
具体代码如下：
data: {result: ''},compare: function () {var str = ''if (this.num1 > this.num2) {str = '第一个数字大'} else if (this.num1 < this.num2) {str = '第二个数字大'} else {str = '两数相等'}this.setData({result: str})}
设置结果显示
设置比较事件结果文本显示在pages/index/index.wxml中显示。
具体代码如下：
<text wx:if="{{result}}">比较结果：{{result}}</text>
页面样式
简单设置了输入框的样式，具体代码如下：
/**index.wxss**/
page {height: 100vh;display: flex;flex-direction: column;
}
.scrollarea {flex: 1;overflow-y: hidden;
}.container input {border: 1rpx solid red;width:60vw;height:5vh;
}功能截图
至此，“比较数字大小”微信小程序已经开发完成。
总结
小程序中的交互与网页的交互有很多相同的地方，都需要先设置页面结构然后绑定事件。
不同在于，需要注意小程序的语法和文件内容。
