微信小程序-比较效果

一、运行效果

二、比较数字

（一）准备工作

1、创建项目

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

（二）实现页面结构

• 在pages/index/index.wxml文件里实现页面结构
  
• 查看预览效果
  
• 为了页面好看，编写页面样式文件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: 2px solid #aaa;
}
.btn{
  background-color: #1aad19;
  color: white;
  font-size: 15px;
}
.result{
  margin-top: 2vh;
  padding: 3vw;
}

（三）获取并保存

1、给文本框输入事件

pages/index/index.wxml文件，第一个文本框绑定了事件处理函数inputNum1，第二个文本框绑定了事件处理函数inputNum2

2、在页面脚本文件里编写事件处理函数

pages/index/index.js文件，定义两个变量，编写两个输入事件处理函数

// index.js
Page({
  // 定义变量
  num1:0,
  num2:0,
  // 定义输入事件处理函数
  inputNum1:function(e) {
    // 获取用户输入的数字
    this.num1 = Number(e.detail.value)
  },
  inputNum2:function(e) {
    // 获取用户输入的数字
    this.num2 = Number(e.detail.value)
  }
})

（四）判断数字大小并显示结构

1、给按钮绑定点击事件

• pages/index/index.wxml文件，给按钮绑定事件处理函数compare
  

2、定义一个比较结果字符串变量

• pages/index/index.js文件，在data属性里定义一个字符串变量result，初值为空字符串
  

3、编写比较事件处理函数

• pages/index/index.js文件，定义比较事件处理函数compare
  

4、在页面上显示比较结果

• pages/index/index.wxml文件，设置比较结果文本组件
  

（五）启动真机调式

• 三种比较结果

• 第一个数大
  

• 第二个数大
  

• 两数相等