小程序 - 比较数字大小

<!--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文件中编写。

具体代码如下：

javascript 复制代码

// 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文件中对两个输入框绑定事件，

具体代码如下：

html 复制代码

<input type="number" bindinput="num1Input"/>
<input type="number" bindinput="num2Input"/>

比较大小

按钮绑定事件

首先在pages/index/index.wxml文件中找到button组件，

为它的tap事件绑定事件处理函数compare()，具体代码如下：

html 复制代码

<button bindtap="compare">比较</button>

比较事件

在pages/index/index.js文件中，设置比较事件并对结果进行赋值。

具体代码如下：

javascript 复制代码

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中显示。

具体代码如下：

XML 复制代码

<text wx:if="{{result}}">比较结果：{{result}}</text>

页面样式

简单设置了输入框的样式，具体代码如下：

css 复制代码

/**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;
}

功能截图

至此，"比较数字大小"微信小程序已经开发完成。

总结

小程序中的交互与网页的交互有很多相同的地方，都需要先设置页面结构然后绑定事件。

不同在于，需要注意小程序的语法和文件内容。