微信小程序——数值比较
在这个案例中，我们将创建一个简单的小程序，用于比较两个用户输入的数字。用户可以输入两个数字，然后点击"比较"按钮，小程序会自动判断这两个数字的大小。
index.js
这是我们的逻辑层代码，负责处理用户输入和比较数字。
```javascript// index.jsPage({
data: {
num1: '',
num2: '',
result: ''
},
// 用户输入第一个数字时触发 inputNum1(e) {
this.setData({ num1: e.detail.value });
},
// 用户输入第二个数字时触发 inputNum2(e) {
this.setData({ num2: e.detail.value });
},
// 点击"比较"按钮时触发 compare() {
const num1 = parseFloat(this.data.num1);
const num2 = parseFloat(this.data.num2);
if (isNaN(num1) || isNaN(num2)) {
this.setData({ result: '请确保输入的数字是正确的!' });
return;
}
if (num1 > num2) {
this.setData({ result: '第一个数字大!' });
} else if (num1 < num2) {
this.setData({ result: '第二个数字大!' });
} else {
this.setData({ result: '两个数字相等!' });
}
}
});
```
app.json
这是我们的应用配置文件，用于定义小程序的基本信息。
```json// app.json{
"pages": [
"index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "",
"onLoad": true },
"style": {
"navigationBarTextStyle": "black"
}
}
```
index.wxml
这是我们的视图层代码，负责定义小程序的界面结构。
```wxml
{{result}}
```
index.wxss
这是我们的样式层代码，负责定义小程序的样式。
```css/* index.wxss */
page {
background-color: f7f7f7;
}
input[type="number"] {
width:200px;
height:40px;
font-size:16px;
padding:10px;
border-radius:5px;
border: none;
box-shadow:0010px rgba(0,0,0,0.1);
}
button[type="primary"] {
width:200px;
height:40px;
font-size:16px;
padding:10px;
border-radius:5px;
background-color: 4cd964;
color: fff;
border: none;
box-shadow:0010px rgba(0,0,0,0.1);
}
button[type="primary"]:active {
background-color: 3e8e41;
}
```
效果展示
当用户输入两个数字，然后点击"比较"按钮时，小程序会自动判断这两个数字的大小，并显示结果。
例如，如果用户输入第一个数字为10，第二个数字为20，则小程序会显示"第二个数字大!"。
如果用户输入第一个数字为20，第二个数字为10，则小程序会显示"第一个数字大!"。
如果用户输入两个相同的数字，如10和10，则小程序会显示"两个数字相等!"。
