【微信小程序】事件绑定和事件对象

文章目录

  • 1.什么是事件绑定
  • 2.button组件
  • 3.事件绑定
  • 4.input组件

1.什么是事件绑定

小程序中绑定事件与在网页开发中绑定事件几乎一致,只不过在小程序不能通过on的方式绑定事件,也没有click等事件,小程序中
绑定事件使用bind方法,click事件也需要使用tap事件来进行代替,绑定事件的方式有两种:

  1. bind:事件名
  2. bind事件名

事件处理函数需要写到.js文件中,在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面,我们可以直接在 Page 方法
中创建事件处理函数。

2.button组件

在讲解事件绑定之前,先来了解一下button组件,也就是按钮. button组件中有一个type属性,有三个值:default,primary和warn

示例:

<button type="default">按钮1</button>
<button type="primary">按钮2</button>
<button type="warn">按钮3</button>

效果:
在这里插入图片描述

了解完,开始学习绑定事件:

3.事件绑定

方法1演示:

wxml如下:

<button type="primary" bind:tap="func1">绑定事件1</button>

.js文件如下:

Page({func1(){console.log("触发了事件1");},
})

接下来点击页面中的按钮即可触发事件.打开调试器,如果绑定事件成功,就会看到输出语句
在这里插入图片描述

方法2演示:

与方法1类似,只是在wxml中少了:

wxml如下:

<button type="warn" bindtap="func2">绑定事件2</button>

.js文件:

Page({func2(){console.log("触发了事件2");},
})

同样在页面中进行点击测试,打开调试器看到以下输出语句表示绑定事件成功
在这里插入图片描述

4.input组件

微信小程序中的<input>组件用于接收用户的输入信息,是一个非常基础且常用的组件。它支持多种类型,可以根据不同的场景选择合适的输入类型。

属性

  • value:输入框的初始值,可以用来绑定数据。
  • placeholder:输入框为空时显示的提示信息。
  • type:输入框的类型,决定键盘类型,如text(默认)、numberidcarddigit等。
  • password:当typetext时,设置为true可以使输入内容显示为密文,等同于设置type="password"
  • confirm-type:设置键盘右下角按钮的文字,如sendsearchnextgo等,在特定场景下使用。
  • bindinput:输入框内容发生变化时触发的事件,可以通过此事件更新绑定的数据。
  • bindfocusbindblur:分别在输入框获得焦点和失去焦点时触发的事件。
  • disabled:是否禁用输入框。

与html的input类似,不过微信小程序的input组件没有样式,需要自己添加样式

接下来,我们写输出用户输入的内容这个案例

wxml如下:

<input type="text" bindinput="getValue"/>

由于微信小程序中input默认没有样式,所以需要给input加个边框

wcss:

input{border: 1px solid #ccc;
}

.js:

Page({getValue(e){console.log(e);},
})

然后在输入框中输入内容,打开调试,查看事件对象中的detail中的value,便可看到用户输入的内容
在这里插入图片描述
想要直接获取用户输入的内容也很简单,只需要e.detail.value即可

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ArcGIS微课1000例】0116:将度-分-秒值转换为十进制度值(字段计算器VBA)

相关阅读:【ArcGIS微课1000例】0087:经纬度格式转换(度分秒转度、度转度分秒) 文章目录 一、计算方法二、计算案例一、计算方法 将度分秒转换为十进制度的简单等式: DD = (Seconds/3600) + (Minutes/60) + Degrees如果角度值是负数,则转换方法不同。其中一种方法是:

外贸实战|做外贸要主动,才会跟客户有订单!

很多人对我说过这种情况&#xff1a;客户给我发了一份询盘&#xff0c;但是我回复以后&#xff0c;客户就不理我了&#xff0c;好伤心。 我问&#xff1a;你跟了多久了&#xff1f; 很多人都会回答&#xff1a;几天或者不记得&#xff0c;他不理我&#xff0c;我也不知道怎么…

Spring Boot的@Async注解有哪些坑需要避免

一、什么是Async注解&#xff1f; Async注解是Spring框架提供的一种用于声明异步方法的工具。它可以将标注的方法从调用者的线程中分离出来&#xff0c;另起一个新线程执行&#xff0c;从而避免阻塞调用者的线程&#xff0c;提高系统的并发能力和响应速度。 基本使用方法如下&a…

Redis页面优化

文章目录 1.Redis页面缓存1.思路分析2.首先记录一下目前访问商品列表页的QPS1.线程组配置10000次请求2.请求配置3.开始压测1.压测第一次 平均QPS为6122.压测第二次 平均QPS为6153.压测第三次 平均QPS为617 3.然后记录一下访问商品详情页的QPS1.线程组配置10000次请求2.请求配置…

AIGC简介:如何利用人工智能进行内容生成

目录 一、引言二、AIGC的定义与技术原理1. 定义说明2. 关键技术3. 技术原理 三、AIGC的主要应用领域1. 文本内容生成2. 图像和视频生成3. 音频内容的创建4. 数据分析与报告 四、实施AIGC的步骤和方法1. 定义项目目标2. 数据准备与处理3. 选择合适的工具和技术4. 模型训练与测试…

uni-app学习--基础组件使用、页面生命周期、本地存储、网络请求、条件编译、路由跳转

文章目录 1. 基本组件的使用1. text文本组件的使用2. view视图容器组件的使用3. button按钮组件的使用4. image组件的使用5. map组件 2. uni-app中的样式1. uni-app&#xff1a;px2rpx计算 3. uni-app的数据绑定1. 基本的数据绑定2. v-bind,v-for,v-on 4. uni-app的生命周期1. …

服务器数据恢复—raid5阵列上分配的卷被删除后重建如何恢复被删除卷的数据?

服务器存储数据恢复环境&#xff1a; 某品牌FlexStorage P5730服务器存储&#xff0c;存储中有一组由24块硬盘组建的RAID5阵列&#xff0c;包括1块热备硬盘。 服务器存储故障&#xff1a; 存储中的2个卷被删除&#xff0c;删除之后重建了一个新卷。需要恢复之前删除的一个卷的数…

等保题目分享(60000字版)

文章目录 前言判断题单选题多选题简答题 前言 来源于网友会议 判断题 在对数据进行差异备份前&#xff0c;仍需进行数据库的全量备份。&#xff08;T) 某应用系统后台连续登录失败3次以后&#xff0c;需要输入验证码才能继续登录&#xff0c;这个应用系统实现了登录失败处理…

flink 状态

状态&#xff08;State&#xff09;是一个重要的概念&#xff0c;它允许Flink在处理流数据时跟踪和存储中间结果。这对于实现复杂的计算逻辑和满足应用需求至关重要。 Working with State 1. 状态类型 Flink支持两种主要类型的状态&#xff1a; 1.1 算子状态&#xff08;Op…

头文件和源文件的一些情况分析

c函数的定义和声明 函数和变量的声明可以有多次,但是定义只能有一次 其实头文件可以写函数的定义,但是在工程里面很多人引用这个头文件很容易造成重复定义的情况 有一个例外情况头文件里面也可以写函数定义或者变量定义 一般情况 //2.h #pragma once int add(int a, int b…

洛谷 P8721 [蓝桥杯 2020 省 AB3] 填空问题(缺少 inc.txt, E 题数据) 题解

题目分析 A 数青蛙 根据青蛙的个数分类计算&#xff1a; 青蛙数小于等于 2 2 2&#xff1a;此时青蛙数、眼睛数、嘴巴数和腿数读出来只读 1 1 1 个字&#xff0c;故此时一句话 14 14 14 个字。青蛙数大于 2 2 2&#xff0c;小于等于 5 5 5&#xff1a;此时青蛙数、眼睛…

百分之九十的人都忽视了JMeter响应断言中的这个实用功能—— Jmeter Variable Name to use

JMeter的响应断言 相信对于使用过JMeter的同学来学&#xff0c;一定都使用过响应断言&#xff0c;在这里我就不相信介绍了&#xff0c;我们可以简单的理解为&#xff1a; JMeter的响应断言是一种用于检查测试中得到的响应数据是否符合预期的工具&#xff0c;旨在保证性能测试…

最高100万!2024年成都市标杆场景项目申报条件对象、奖励和认定材料流程

一、申报条件 &#xff08;一&#xff09;申报主体需注册成立两年以上&#xff0c;具备独立法人资格&#xff0c;在成都有固定经营或者生产场地&#xff0c;上两年度主营业务收入年均1000万元以上或上两年度主营业务收入增长率年均10%以上&#xff1b; &#xff08;二&#x…

java基础选择题--18(转载)

1.设有定义 int a3 &#xff0c;b4&#xff0c;c5&#xff1b; 则以下的表达式中 &#xff0c; 值为 false 的是 &#xff08;&#xff09; 正确答案: D 你的答案&#xff1a;D&#xff08;正确&#xff09; A.a < b && b < c B.a < b C.a < ( b c ) D.!…

基于单片机的电流检测装置

摘  要 : 随着电子技术的发展和进步 , 小信号在电路中的使用愈加广泛 , 在实际应用中对于小电流信号的采集和监控越来越重要。 因此电路中的电流需要能够被简单 、 方便 、 准确 、 实时地测量 。 文中设计并实现了一套基于单片机的电流检测系统。 该系统使用功率放大电路…

2024最新python入门教程|python安装|pycharm安装

前言&#xff1a;在安装PyCharm之前&#xff0c;首先需要明确PyCharm是一款功能强大的Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;由JetBrains公司开发。PyCharm旨在通过提供智能代码补全、语法高亮、代码检查、快速导航和重构等丰富的编码辅助工具&#xff0c…

物联网的应用——工业自动化

工业自动化在物联网的应用主要体现在以下几个方面&#xff0c;这些应用不仅提高了工业生产的效率和质量&#xff0c;还优化了资源利用&#xff0c;降低了生产成本。以下是详细的分析和归纳&#xff1a; 数据采集与传输 物联网技术通过传感器实时采集工业设备的运行状态、温度、…

亚信安慧AntDB:全新的数据库体验

AntDB的核心设计理念是为了满足核心数据库升级改造的自主创新要求。它不仅提供了高效、可靠的数据处理能力&#xff0c;还特别强调了系统的可扩展性和前瞻性。这一设计理念奠定了AntDB在数据库领域的稳固地位&#xff0c;使其成为业内备受瞩目的技术创新之一通过采用最新的数据…

在无GPU的windows上运行ChatTTS

如果你在安装的过程中出现了下面的错误&#xff0c;不妨先看看这些安装步骤&#xff1a; cl: 命令行 error D8021 :无效的数值参数“/Wno-register” error: command C:\ windows ERROR: Failed building wheel for pynini 卷完了文本&#xff0c;卷图片&#xff0c;卷完了图…

dp和px的转化(dp2px,px2dp)

public class DensityUtil {/*** 根据手机的分辨率从 dp 的单位 转成为 px(像素).** param dpValue dpValue* return px*/public static int dp2px(float dpValue) {return (int) Math.ceil(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, dpValue, Resources.getSyst…