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

一、运行效果

二、知识储备

（一）Page()函数

（二）数据绑定

（三）事件绑定

（四）事件对象

（五）this关键字

（六）setData()方法

（七）条件渲染

（八）<block>标签

（九）hidden属性

三、实现步骤

（一）准备工作

• 1、创建项目-比较数字，不采用模板
  
  -单击确定按钮
  
• 清空页面结构
  
• 初始化页面样式
  
• 配置窗口表现
  

（二）实现页面结构

• 在pages/index/index.wxml文件里实现页面结构
  
• 查看预览效果
  

（三）实现页面样式

• 为了页面好看，编写页面文件index.wxss
  
• 查看预览效果
  

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

1、给文本框绑定输入事件

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

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

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

Page({
  // 定义变量
  num1: 0,
  num2: 0,
  // 定义输入事件处理函数
  inputNum1(e) {
    // 获取用户输入的数字
    this.num1 = Number( e.detail.value )
  },
  inputNum2(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文件，设置比较结果文本组件
  
• 查看预览效果
  

（六）运行程序，查看效果

• 启动PC端自动真机测试
  

（七）运行程序，查看效果

• 录屏显示操作
• 三种比较结果