草庐IT

微信小程序开发的数据绑定和事件绑定

想一直陪着你 2023-04-08 原文

一、数据绑定

1、定义数据

        在页面对应的 .js(或 ts)文件中,把数据定义到 data 对象中即可:

 2、Mustache 语法的格式(渲染数据)

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

 3、Mustache 语法的应用场景

Mustache 语法的主要应用场景:

  • 绑定内容
  • 绑定属性
  • 运算(三元运算、算术运算等)

1、动态绑定内容

页面数据如图:

页面的结构如图:

 

 以上演示就是数据的动态绑定,将定义的页面数据绑定到页面结构进行渲染。

2、动态绑定属性

页面数据如图:

页面的结构如图:

 

 最后整体展示如图:

 一定要注意语法格式!!!

3、三元运算

页面的数据如下:

页面的结构如下:

 

 最后整体展示:

4、算术运算 

页面数据如下:

页面的结构如下:

 

最后整体展示:

 

最后总结一下:数据的绑定,首先是在页面的 .js(或 .ts)文件的  page 中的 data 内定义数据,再在页面的 .WXML 文件中渲染数据。 

二、事件绑定

        事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

1、 小程序中常用的事件:

类型绑定方式事件描述
tapbindtap  或 bind:tap手指触摸后马上离开
inputbindinput 或 bind:input文本框的输入事件
changebindchange 或 bing:change状态改变时触发

2、事件对象 event 的详细属性:

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

3、target 和 currentTarget 的区别:

        target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下:

4、 bandtap 的语法格式

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

1、通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:

 2、在页面的 .ts(或 .js)文件中定义对应的事件处理函数,事件参数通过形参 event (一般简写成 e )来接收

 

 

 5、在事件处理函数中为 data 中的数据赋值

        通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

下面看一下整体效果:

 

 6、事件传参

        小程序中的事件传参比较特殊,不能再绑定事件的同时为事件处理函数传递参数。例如,下面的代码不能正常工作

         因为小程序会把 bindtap 的属性值(即单引号内的所有内容),统一当作事件名称来处理,相当于要调用一个名称为 btnTapHandler(123) 的事件来处理函数,不会把括号里面的123当作参数传递。

1、小程序的正确传参方法:

        可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,参数的值通过 Musatche 语法(双大括号)传递。实例如下:

 

最终:

  • info 会被解析为参数的名字
  • 数值 2 会被解析为参数的值

2、获取到具体参数的值

在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:

注意格式:event.target.dataset.参数名 其中 event 可以是缩写 e 

7、bindinput 的语法格式

        在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:

1、通过 bindinput,可以为文本框绑定输入事件:

 2、在页面的 .js 文件中定义事件处理函数:

 最后看一下整体演示:

 8、实现文本框和 data 之间的数据同步

1、实现步骤:

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定 innput 事件处理函数

2、定义数据

 3、渲染结构

4、美化样式 

 5、绑定 input 事件处理函数

 最后看一下编译效果:

有关微信小程序开发的数据绑定和事件绑定的更多相关文章

  1. 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

  2. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby - Ruby 有 `Pair` 数据类型吗? - 2

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

  5. ruby - 是否可以覆盖 gemfile 进行本地开发? - 2

    我们的git存储库中目前有一个Gemfile。但是,有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它,我必须将它添加到我们的Gemfile中,但每次我checkout到我们的master/dev主分支时,由于与跟踪的gemfile冲突,我必须删除它。我想要的是类似Gemfile.local的东西,它将继承从Gemfile导入的gems,但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗? 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  6. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反? - 2

    这似乎非常适得其反,因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误,一个名为UnixSocket的类显然在Windows机器上不能正常工作,等等)。我只是在浪费时间吗?我应该转向不同的脚本语言吗? 最佳答案 我在Windows上使用Ruby的经验很少,但是当我开始使用Ruby时,我是在Windows上,我的总体印象是它不是Windows原生系统。因此,在主要使用Windows多年之后,开始使用Ruby促使我切换回原来的系统Unix,这次是Linux。Rub

  7. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器,但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型,并且只返回text/plain,如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  8. 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_

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

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

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

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

随机推荐