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

在这里插入图片描述

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

在这里插入图片描述

文章目录

    • 一、案例分析
    • 二、知识储备
      • 1. Page()函数
      • 2. 数据绑定
      • 3. 事件绑定
      • 4. 事件对象
      • 5. this关键字
      • 6. setData()方法
      • 7. 条件渲染
      • 8. <block>标签
      • 9. hidden属性
    • 三、案例实现
      • 1. 准备工作
      • 2.实现“比较数字大小”微信小程序的页面结构
      • 3. 获取并保存用户输入的数字
      • 4. 判断数字大小并显示结果
      • 5、完整代码展示

一、案例分析

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

在这里插入图片描述
比较结果有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知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/144485.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

使用Postman轻松搞定文件上传测试

使用Postman轻松搞定文件上传测试

postman经常用于接口测试&#xff0c;但是上传文件参数还是蛮复杂的&#xff0c;记录下过程 01 上传文件参数 1.选择请求方式 选择post请求方式&#xff0c;输入请求地址 2.填写Headers Key&#xff1a;Content-Type &#xff1b; Value&#xff1a;multipart/form-data …
阅读更多...
【机器学习】OpenCV高级图像处理

【机器学习】OpenCV高级图像处理

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 OpenCV高级图像处理图像滤波线性滤波高斯滤波均值滤波双边滤波 非线性滤波中值滤…
阅读更多...
一文带你快速了解GPT 最新模型 o1！国内直接使用 ！

一文带你快速了解GPT 最新模型 o1！国内直接使用 ！

一、GPT-o1简介 北京时间9月13日午夜&#xff0c;OpenAI 正式公开一系列全新 AI 大模型&#xff0c;旨在专门解决难题。这是一个重大突破&#xff0c;新模型可以实现复杂推理&#xff0c;一个通用模型解决比此前的科学、代码和数学模型能做到的更难的问题&#xff0c;OpenAI 发…
阅读更多...
【Unity杂谈】iOS 18中文字体显示问题的调查

【Unity杂谈】iOS 18中文字体显示问题的调查

一、问题现象 最近苹果iOS 18系统正式版推送&#xff0c;周围升级系统的同事越来越多&#xff0c;有些同事发现&#xff0c;iOS 18上很多游戏&#xff08;尤其是海外游戏&#xff09;的中文版&#xff0c;显示的字很奇怪&#xff0c;就像一些字被“吞掉了”&#xff0c;无法显示…
阅读更多...
微信如何发布学生查分？教师平台推荐！

微信如何发布学生查分？教师平台推荐！

学校和老师们都在面临着一个共同的问题&#xff1a;如何高效、便捷地发布学生成绩查询信息&#xff1f;在这个数字化时代&#xff0c;传统的纸质通知和口头传达方式已经无法满足家长和学生的需求。幸运的是&#xff0c;有了易查分这样的在线工具&#xff0c;发布学生查分变得简…
阅读更多...
李章虎律师捐资设立“前沿技术产业化专项基金”

李章虎律师捐资设立“前沿技术产业化专项基金”

随着新一轮技术革命和产业变革的加速演进&#xff0c;全球科技创新进入空前活跃的时期&#xff0c;以人工智能、大数据、区块链等为代表的前沿技术革命方兴未艾&#xff0c;全新的产业格局正在逐渐形成。为聚焦世界前沿技术商业转化应用发展&#xff0c;助力更多企业转型升级赋…
阅读更多...
芯片封装是什么？芯片封装中芯片环氧胶的应用有哪些？

芯片封装是什么？芯片封装中芯片环氧胶的应用有哪些？

芯片封装是什么&#xff1f;芯片封装中芯片环氧胶的应用有哪些&#xff1f; 芯片封装是什么&#xff1f; 芯片封装是集成电路&#xff08;IC&#xff09;制造过程中的关键步骤&#xff0c;它包括以下几个要点&#xff1a; 功能与目的&#xff1a;封装为芯片提供物理保护&#…
阅读更多...
【HarmonyOS 】编译报错：Install Failed: error: failed to install bundle

【HarmonyOS 】编译报错：Install Failed: error: failed to install bundle

此问题是由于支付宝sdk兼容性造成的&#xff0c;目前只能删除支付宝sdk依赖&#xff0c;如下图所示操作&#xff0c;删除后需要点右上角的 Sync Now&#xff0c;并等待 Sync 结束 删除后还需要点右上角的 Sync Now&#xff0c;并等待 Sync 结束 uniapp解决方案&#xff1a; htt…
阅读更多...
重磅首发！2024中国大模型行业应用前景及现状分析——建议收藏观看

重磅首发！2024中国大模型行业应用前景及现状分析——建议收藏观看

本报告由深圳前瞻产业研究院、首钢基金CANPLUS联合华为云共同出品。 报告显示&#xff0c;2023年我国AI大模型行业规模已达到147亿元。AI大模型的行业应用及技术进步能有效提升各行业生产要素的产出效率&#xff0c;并提高了数据要素在生产要素组合中的地位。供给方面&#xf…
阅读更多...
LY3315 SOT23-6 集成充电与电机驱动的控制芯片

LY3315 SOT23-6 集成充电与电机驱动的控制芯片

想要更方便、高效地管理电池充电和驱动电机&#xff1f;那么LY3315是你理想的选择&#xff01;LY3315是一款集成了锂电池充电管理模块、电机驱动模块、马达续流二极管、按键档位控制、保护模块的全集成电机驱动控制芯片。它不仅具备强大的功能&#xff0c;还具有超低的待机电流…
阅读更多...
开始你的博客之旅：从零到一的详细指南

开始你的博客之旅：从零到一的详细指南

创建博客不仅是表达自我的方式&#xff0c;更是与世界分享知识、塑造个人品牌、甚至实现商业变现的强大工具。本文将详细介绍从确定主题到实际运营的每个步骤&#xff0c;帮助你顺利开启个人博客的旅程。 确定博客的主题和目标 在开始博客之前&#xff0c;首先要明确博客的主…
阅读更多...
鸿蒙OpenHarmony【轻量系统芯片移植案例】标准系统方案之瑞芯微RK3568移植案例

鸿蒙OpenHarmony【轻量系统芯片移植案例】标准系统方案之瑞芯微RK3568移植案例

标准系统方案之瑞芯微RK3568移植案例 ​本文章是基于瑞芯微RK3568芯片的DAYU200开发板&#xff0c;进行标准系统相关功能的移植&#xff0c;主要包括产品配置添加&#xff0c;内核启动、升级&#xff0c;音频ADM化&#xff0c;Camera&#xff0c;TP&#xff0c;LCD&#xff0c…
阅读更多...
甜羊浏览器可以抖店多开自动回复

甜羊浏览器可以抖店多开自动回复

在当今数字化时代&#xff0c;电子商务平台如雨后春笋般涌现&#xff0c;其中抖音旗下的电商服务——抖店&#xff0c;凭借其庞大的用户基础和强大的社交属性&#xff0c;成为了众多商家的重要销售渠道。然而&#xff0c;随着业务规模的扩大&#xff0c;如何高效管理多个抖店账…
阅读更多...
【软件测试】测试的岗位有哪些？

【软件测试】测试的岗位有哪些？

求职入口有很多&#xff1a;相关企业官网、求职软件、校招、公众号等等。 下面就在某招聘网站上看看测试有哪些岗位吧&#xff01; 测试只是一个统称&#xff0c;在测试下面还有很多细分岗位。 但是测试的岗位主要分为以下俩个方面&#xff1a; 软件测试开发工程师&#xff…
阅读更多...
VMware安装飞牛私有云fnOS并挂载小雅Alist实现异地远程访问

VMware安装飞牛私有云fnOS并挂载小雅Alist实现异地远程访问

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
【Bug解决】Nacos启动成功，但却无法访问（提示：无法访问此网站，192.168.10.88的响应时间过长）

【Bug解决】Nacos启动成功，但却无法访问（提示：无法访问此网站，192.168.10.88的响应时间过长）

项目场景&#xff1a; 在虚拟机上通过Docker创建Nacos容器&#xff0c;已经创建成功&#xff0c;查看Nacos启动日志也是成功。但通过端口号加8848/nacos&#xff08;如&#xff1a;http://IP:8848/nacos&#xff09;无法访问到Nacos管理页面。 愿意分析一&#xff1a; 先检查好…
阅读更多...
C++：动态内存分配（new、delete 相比 malloc、free的优势）与运算符重载

C++：动态内存分配（new、delete 相比 malloc、free的优势）与运算符重载

动态内存分配与运算符重载 一、动态内存分配&#xff08;一&#xff09;内存的分类&#xff08;二&#xff09;动态内存分配函数(1)new 和delete 的使用&#xff08;1&#xff09;new 的原理&#xff08;2&#xff09;delete 的原理 2、 operator new与operator delete&#xf…
阅读更多...
地图资源下载工具失效下载链接重新分享

地图资源下载工具失效下载链接重新分享

今天发现地图资源工具下载链接被失效了&#xff0c;也不知道为啥&#xff01;不过不影响啥&#xff0c;我再分享一下就行&#xff01;请关注我的公众号及博客以便及时了解最新下载及更新信息&#xff01;另外如遇到工具分享链接失效或不能下载的情况可私信我&#xff0c;我会第…
阅读更多...
69.x的平方根 （Java）20240919

69.x的平方根 （Java）20240919

问题描述&#xff1a; java代码&#xff1a; class Solution {public int mySqrt(int x) {if (x < 2) {return x; // 0 和 1 的平方根分别是它们自己}int left 2; // 从2开始&#xff0c;因为0和1已经处理了int right x / 2; // 最大可能的平方根不会超过 x / 2int mid;w…
阅读更多...
基于单片机的智能家居控制系统设计

基于单片机的智能家居控制系统设计

本设计 基于WiFi的智能家居系统的设计&#xff0c;主要包括主控芯片、WiFi通讯模块、CO传感器、液位传感器、温度传感器、烟雾传感器、火焰传感器、蜂鸣器模块、继电器模块等。通过各传感器实时采集家里的环境&#xff0c;并将数据发送至单片机STM32F030C8T6&#xff0c;单片机…
阅读更多...
最新文章

Copyright @ 2022~2023