微信小程序案例：比较数字大小（含代码）

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序开发实战
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序案例：比较数字大小（含代码）

一、案例分析

  “比较数字大小”微信小程序中有两个输入框，可以输入数字，输入后点击“比较”按钮，按钮下方会显示比较结果。

比较结果有3种情况。

• 如果第1个数字比第2个数字大，则比较结果为“第1个数大”；
• 如果第2个数字比第1个数字大，则比较结果为“第2个数大”；
• 如果第1个数字和第2个数字相等，则比较结果为“两数相等”。

二、知识储备

1. Page()函数

  在微信小程序中，页面交互的代码写在页面的JS文件中，每个页面都需要通过Page()函数进行注册。需要注意的是，Page()函数只能写在微信小程序每个页面对应的JS文件中，并且每个页面只能注册一个。

  Page()函数的参数是一个对象，通过该对象可以指定页面初始数据、页面生命周期回调函数和页面事件处理函数。调用Page()函数的示例代码如下。

Page({
  // 页面初始数据
  data: {},
  // 页面生命周期回调函数，以onLoad()为例
  onLoad: function () {  console.log('onLoad()函数执行了') },
  // 页面事件处理函数，以onPullDownRefresh()为例
  onPullDownRefresh: function () { console.log('onPullDownRefresh()函数执行了') }
})

• 页面初始数据
    页面初始数据是指页面第一次渲染时所用到的数据。下面演示如何定义页面初始数据，示例代码如下。

data: {
  msg1: 'Hello',
  msg2: 'World'
},

• 页面生命周期回调函数
    在微信小程序中，页面的生命周期是指每个页面“加载→渲染→销毁”的过程，每个页面都有生命周期。
    如果想要在某个特定的时机进行特定的处理，则可以通过页面生命周期回调函数来完成。
    页面生命周期回调函数用于实现在特定的时间点执行特定的操作，随着页面生命周期的变化，页面生命周期回调函数会自动执行。
   
  页面生命周期回调函数如下表。
• 页面事件处理函数
    在微信小程序中，用户可能会在页面上进行一些操作，例如上拉、下拉、滚动页面等，如何在发生这些操作的时候进行处理呢？可以通过页面事件处理函数来完成。
    页面事件处理函数用于监听用户的行为。
   
  常见的页面事件处理函数如下表。
  

2. 数据绑定

  微信小程序提供了Mustache语法（又称为双大括号语法）用于实现数据绑定，可将data中的数据通过 Mustache 语法输出到页面上。

演示如何通过数据绑定将数据显示在页面中

• 步骤一： 打开pages/index/index.js文件，在`data中定义一个message数据。

Page({
  data: {
    message: 'Hello World'
  }
})

• 步骤二： 在pages/index/index.wxml文件中编写页面结构。
  通过Mustache语法将data中的数据显示在页面中

<view>{{ message }}</view>

简单数据绑定的页面效果如下图。

  页面上显示了message变量对应的值，也就是把“Hello World”渲染到页面代码中{{ message }}所在的位置，实现了从逻辑层到视图层的数据显示。

3. 事件绑定

  在微信小程序中，事件是视图层到逻辑层的通信方式，通过给组件绑定事件，可以监听用户的操作行为，然后在对应的事件处理函数中进行相应的业务处理。例如，为页面中的按钮绑定事件，当用户点击按钮时，就产生了事件。

在微信小程序中，常见的事件如下表。

注意：点击事件、长按事件、触摸事件都属于冒泡事件，其他事件属于非冒泡事件。

  若要为组件绑定事件，可以通过为组件添加“bind+事件名称”属性或“catch+事件名称”属性来完成，属性的值为事件处理函数，当组件的事件被触发时，会主动执行事件处理函数。
bind和catch的区别在于，bind不会阻止冒泡事件向上冒泡，而catch可以阻止冒泡事件向上冒泡。

演示如何为组件绑定事件

• 步骤一： 在pages/index/index.wxml文件中给button组件绑定tap事件，事件处理函数为compare()函数。

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

bindtap表示绑定tap事件。
在触屏手机中，tap事件在用户手指触摸button组件离开后触发，而在微信开发者工具中，tap事件在鼠标单击button组件时触发。

• 步骤二： 在pages/index/index.js文件的Page({ })中定义compare()函数。

compare: function () {
  console.log('比较按钮被点击了')
},

单击“比较”按钮，控制台中输出的结果如下图。

事件处理函数的简写形式

  由于compare()函数是{ }对象的方法，所以可以将compare()函数写成方法的简写形式，即省略compare后面的冒号和function关键字，示例代码如下。

compare () {
  console.log('比较按钮被点击了')
},

4. 事件对象

  在开发微信小程序的过程中，有时需要获取事件发生时的一些信息，例如事件类型、事件发生的时间、触发事件的对象等，此时可以通过事件对象来获取。

  当事件处理函数被调用时，微信小程序会将事件对象以参数的形式传给事件处理函数。

事件对象的属性如下表。

演示事件对象的使用

  修改pages/index/index.js文件中的compare()函数，通过参数接收事件对象，并将事件对象输出到控制台。

compare: function (e) {
  console.log(e)
},

函数参数e表示事件对象

单击“比较”按钮，控制台中输出的结果如下图。

从上图中可以看出，控制台成功输出了事件对象的相关信息。

事件对象属性中的target和currentTarget属性的对比。

演示事件对象属性中target和currentTarget的区别

• 步骤一： 在pages/index/index.wxml文件中编写页面结构。

<view bindtap="viewtap" id="outer">
  outer
  <view id="inner">
      inner
  </view>
</view>

• 步骤二： 在pages/index/index.js文件中添加viewtap()事件处理函数。

viewtap: function (e) {
  console.log(e.target.id + '-' + e.currentTarget.id)
},

  使用e.target.id或e.currentTarget.id都可以获取发生事件的组件的id，由于outer和inner的id不同，因此可以区分这两个组件。

  运行程序测试，当单击outer时，控制台中的输出结果为outer-outer，而单击inner时，控制台中的输出结果为inner-outer。

  由此可见，e.target获取的是子元素的属性值集合，而e.currentTarget获取到的是父元素的属性值集合。

5. this关键字

  在微信小程序开发过程中，有时需要在函数中访问页面中定义的一些数据，或者调用页面中定义的一些函数，此时可以通过this关键字来实现。

  this关键字代表当前页面对象。

演示this关键字的使用

Page({
  data: { num: 1 },		// 定义data数据
  test: function () {		// 定义test()函数
    console.log('test()函数执行了')
  }, 
  onLoad: function () {
    console.log(this.data.num)	// 通过this关键字访问data中的num数据
    this.test()			// 通过this关键字调用test()函数
  }
})

6. setData()方法

  在微信小程序开发过程中，虽然通过数据绑定可以将data中定义的数据渲染到页面，但是如果数据发生了变化，页面并不会同步更新数据。

  为了实现在数据变化时使页面同步更新，微信小程序提供了setData()方法，该方法可以立即改变data中的数据，并通过异步的方式将数据渲染到页面上。

  setData()方法通过this关键字调用，该方法的基本语法格式如下。

this.setData(data[, callback])

setData()方法的参数如下表。

注意：

• 第1个参数data是object类型的数据，以key: value的形式将data中的key对应值设置成value；
• 第2个参数callback是回调函数，可以省略。

演示setData()方法的使用

• 步骤一： 在pages/index/index.js文件中编写页面中所需的数据message和事件处理函数changeText()。

Page({
  data: { message: 'Hello World' },
  changeText: function () {
    this.setData({ message: 'hello 微信小程序'  })
  }
})

• 步骤二： 在pages/index/index.wxml文件中编写页面结构。
  给view组件绑定了tap事件，事件处理函数为changeText()。

<view bindtap="changeText">{{ message }}</view>

运行代码，在微信开发者工具中单击前和单击后的页面效果如下图。

7. 条件渲染

  在微信小程序开发过程中，如果需要根据不同的判断结果显示不同的组件，可以使用条件渲染来实现。

  条件渲染通过标签的wx:if控制属性来完成。

  使用wx:if=“{{ val }}”来判断是否需要渲染标签对应的组件，如果变量val的值为true，则渲染组件并输出；变量val的值为false，则不渲染组件，示例代码如下。

<view wx:if="{{ condition }}">True</view>

通过变量condition的值来控制是否渲染view组件

  给标签设置了wx:if控制属性后，可以为后面的标签设置wx:elif、wx:else控制属性。wx:elif控制属性表示当前面标签的if条件不满足时，继续判断elif（else if）的条件；wx:else控制属性表示当前面的if条件不满足时，渲染else对应的组件。wx:else控制属性也可以直接出现在wx:if控制属性的后面，示例代码如下。

<view wx:if="{{ count < 1 }}">0</view>
<view wx:elif="{{ count == 1 }}">1</view>
<view wx:else>2</view>

8. 标签

  通过<block>标签可以创建一个容器，该标签并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接收控制属性。

<block>标签的示例代码如下。

<block wx:if="{{ true }}">
  <view>view1</view>
  <view>view2</view>
</block>

  <block>标签中wx:if控制属性的值为true，在页面上会渲染出<block>组件内部的两个view组件。

9. hidden属性

  除wx:if控制属性外，hidden属性也可以控制组件的显示与隐藏，条件为true时隐藏组件里面的内容，条件为false时显示组件里面的内容，示例代码如下。

<text hidden="{{ hidden }}">hidden为true时不显示</text>

hidden与wx:if的区别：

• wx:if控制属性的初始渲染条件为false，只有条件第一次变为true的时候才开始渲染，hidden属性所在的组件始终会被渲染，只是简单的控制显示与隐藏。
• wx:if控制属性有更大的切换开销而hidden属性有更高的初次渲染开销。
• 在需要频繁切换显示和隐藏的情境下用hidden更好，而如果运行时条件不太可能会改变则用wx:if控制属性更好。

三、案例实现

1. 准备工作

• 步骤一：创建项目
  在微信开发者工具中创建一个新的微信小程序项目，项目名称为“比较数字大小”，模板选择“不使用模板”。
• 步骤二：配置导航栏
  在pages/index/index.json文件中配置页面导航栏。
• 步骤三：复制素材
  复制pages/index/index.wxss文件到本项目中。

“比较数字大小”微信小程序的目录结构

2.实现“比较数字大小”微信小程序的页面结构

编写“比较数字大小”微信小程序的页面结构

3. 获取并保存用户输入的数字

实现步骤：

• 在pages/index/index.wxml文件中找到第1个数字输入区域的input组件，为它的input事件绑定事件处理函数num1Input()；
• 找到第2个数字输入区域的input组件，为它的input事件绑定事件处理函数num2Input()；
• 在pages/index/index.js文件的Page({ })中编写事件处理函数num1Input()和num2Input()，用于获取并保存用户输入的数字。

4. 判断数字大小并显示结果

实现步骤：

• 在pages/index/index.wxml文件中找到button组件，为它的tap事件绑定事件处理函数compare()；
• 在pages/index/index.js文件的Page({ })中编写页面所需的数据和事件处理函数compare()，用于实现当用户手指触摸“比较”按钮时对用户输入的2个数字进行比较；
• 在pages/index/index.wxml文件中找到比较结果显示的位置，通过条件渲染控制text组件的显示与隐藏，并绑定result显示比较结果。

5、完整代码展示

index.wxml

<!--index.wxml-->
<view>
  <text>请输入第1个数字：</text>
  <input type="number" bindinput="num1Input" />
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number" bindinput="num2Input" />
</view>
<button bindtap="compare">比较</button>
<view>
  <text wx:if="{{ result }}">比较结果：{{ result }}</text>
</view>

index.wxss

/**index.wxss**/
view {
  margin: 50rpx;
}

input {
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}

button {
  margin: 50rpx;
}

button {
  color: #fff;
  background: #369;
  letter-spacing: 12rpx;
}

index.js

// index.js
Page({
  data: {
    result: ''
  },
  num1: 0, // 保存第1个数字
  num2: 0, // 保存第2个数字
  num1Input: function (e) {
    this.num1 = Number(e.detail.value)
  },
  num2Input: function (e) {
    this.num2 = Number(e.detail.value)
  },
  compare: function () {
    var str = ''
    if (this.num1 > this.num2) {
      str = '第1个数大'
    } else if (this.num1 < this.num2) {
      str = '第2个数大'
    } else {
      str = '两数相等'
    }
    this.setData({
      result: str
    })
  }
})

index.json

{
  "navigationBarTitleText": "比较数字大小"
}

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。