草庐IT

【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步

苏凉.py 2023-04-14 原文

🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
🐳博客主页：苏凉.py的博客
🌐系列专栏：小程序开发基础教程
👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂

文章目录

数据绑定

基本原则

  1. 在data中定义数据
  2. 在WXML中使用数据

在data中定义数据

在页面对应的.js 文件中，把数据定义到data对象中即可。

Mustache语法

把data中的数据绑定到页面中渲染，使用 Mustache语法（双大括号) 将变量包起来即可。

语法:<view>{{定义的数据名称}}</view>

Mustache语法的应用

绑定内容

绑定内容即为文本的绑定，就如上述例子中将一个字符串绑定到view的文本节点中。

绑定属性

绑定属性即将一个数据绑定在一个标签的属性节点中。
如：在页面js文件的data中添加一个src数据。

在页面wxml文件中使用Mustache语法将其绑定在image标签的属性节点中。

运算（三元运算、算术运算等)

在小程序的编译中也可以进行运算操作。

三元运算

如：
在页面js文件中添加data数据。

在页面.wxml中绑定该数据，并进行判断.

算数运算

如：
在页面js文件中的data中添加数据。

在页面wxml中进行数据绑定，并进行计算。

事件绑定

什么是事件？

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。与html类似，相当于用户与小程序的交互。

常用事件

事件用法说明
tapbindtap/bind:tap手指触摸后马上离开，相当于html中的click事件
inputbindinput/bind:input文本框的输入事件
changebindchange/bind:change状态改变时触发

事件对象属性

当事件回调触发的时候，会收到一个事件对象event(与js中的事件对象类似)，它的详细属性如下表所示:

属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetobject触发事件的组件的一些属性值集合
currentTargetobject当前组件的一些属性值集合
detailobject额外的信息
touchesArray触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件，当前变化的触摸点信息的数组

target与currentTarget的区别

event.target返回的是触发该事件的源头组件，而currentTarget则返回的是当前事件所绑定的源头组件。
如：

给view绑定了单击事件，在该事件下有一个按钮组件，当我们单击按钮时，event.target返回的就是这个按钮组件。而event.currentTarget返回的就是view这个绑定事件的源头组件。因此，常用到的是target属性而非currentTarget属性。

bindtap语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

  1. 通过bindtap给组件绑定tap触摸事件。
    如下图所示：
    在页面wxml文件中绑定触摸事件

  2. 在页面js中定义相应的事件处理函数，事件属性通过传入一个形参来接收。通常为event。

    当点击按钮时，控制台便会输出。

在事件处理函数中为data赋值

使用this.setData()方法可以修改data中的数据。

  1. 在data中定义数据。

  2. 为事件响应函数添加this.setData方法，并修改其数值。

  3. 在wxml文件中绑定数据

实现效果：

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。如：

<button type="primary" bindtap="butnTap(3)">点击按钮+3</button>

这里并不能为butnTap事件函数传递参数，而是将butnTap(3)作为事件函数名。

为事件传递参数时，使用data-参数名="{{参数值}"}来传递参数。如：

<button type="primary" bindtap="butntTap" data-num="{{3}}">点击按钮+3</button>

查看参数

通过event.target.dataset.参数名可查看我们设置的参数。


通过该参数也可修改data中的数值。

此时点击按钮就自增加3

bindinput语法格式

  1. 通过bindinput，可以为文本框绑定输入事件
 <input bindinput="inputBd" ></input>
  1. 在页面js文件中定义事件处理函数。
  2. 通过even.detail.value来获取文本框中的内容。

实现文本框与data之间的数据同步

实现步骤:

  • 定义数据
    在页面js文件中定义文本数据

  • 渲染结构
    设置value默认值。

<input bindinput="inputBd" value="{{text}}"></input>
  • 美化样式
    将文本框美化一下
input{
    border: 1px solid blue;
    border-radius: 5px;
}
  • 绑定input 事件处理函数
 inputBd(event){
      // console.log(event.detail.value);
      this.setData({
          text:event.detail.value
      })
  }

输入文本，此时data中的text也随之改变。

到这里本节内容就结束啦，下期带大家了解微信小程序中的条件渲染和列表渲染。欢迎订阅本专栏，持续更新中…

一文事件spanclasstoken微信小程序小程序前端

有关【微信小程序】一文带你了解数据绑定、事件绑定以及事件传参、数据同步的更多相关文章

  1. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. ruby - Ruby 有 `Pair` 数据类型吗？ - 2

    有时我需要处理键/值数据。我不喜欢使用数组，因为它们在大小上没有限制(很容易不小心添加超过2个项目，而且您最终需要稍后验证大小)。此外，0和1的索引变成了魔数(MagicNumber)，并且在传达含义方面做得很差(“当我说0时，我的意思是head...”)。散列也不合适，因为可能会不小心添加额外的条目。我写了下面的类来解决这个问题:classPairattr_accessor:head,:taildefinitialize(h,t)@head,@tail=h,tendend它工作得很好并且解决了问题，但我很想知道:Ruby标准库是否已经带有这样一个类？ 最佳

  4. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  5. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  6. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  7. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  8. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

  9. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

  10. ruby-on-rails - 创建 ruby​​ 数据库时惰性符号绑定(bind)失败 - 2

    我正在尝试在Rails上安装ruby​​，到目前为止一切都已安装，但是当我尝试使用rakedb:create创建数据库时，我收到一个奇怪的错误:dyld:lazysymbolbindingfailed:Symbolnotfound:_mysql_get_client_infoReferencedfrom:/Library/Ruby/Gems/1.8/gems/mysql2-0.3.11/lib/mysql2/mysql2.bundleExpectedin:flatnamespacedyld:Symbolnotfound:_mysql_get_client_infoReferencedf

随机推荐