微信小程序开发学习笔记③WXML模板语法-数据绑定与事件绑定_wxml 绑定事件

微信小程序开发学习笔记③WXML模板语法渲染页面结构——数据绑定与事件绑定

博主正在学习微信小程序开发，希望记录自己学习过程同时与广大网友共同学习讨论。
WXML语法官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

一、 WXML模板语法之 数据绑定

数据绑定的基本原则：在data中定义数据，在WXML中使用数据。（先定义了才有的使用呐）

1.1 在data中定义页面的数据

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

1.2 使用Mustache语法使用数据

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

<view>{{info}}</view>  
1

1.3.Mustache语法的应用场景

Mustache语法用法都是一样的，Mustache语法的主要应用场景如下:
1、绑定内容
2、绑定属性
3、运算（三元运算、算术运算等)

1.动态绑定内容就是，上述1.1和1.2所展示的，data下info的值要是变化，wxml页面的对应值内容也会变化。

1.3.2 动态绑定属性

其实用法都一样，都是在页面中把data绑定的对应数据给展示出来，只不过在这这展示的数据是属性。（这一点和vue有区别）

1.3.3 运算

一样的用法，data中的数据，在wxml中可以通过Mustache语法获取，并可以用来运算。

二、 WXML模板语法之 事件绑定

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

事件官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3

2.1 小程序中常用的事件

2.2 事件对象的属性列表

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

也就是说事件触发后，受到的回调信息（反馈）会存在事件对象event中，可以通过查看对象属性去得到事件的描述。

其中target和currentTarget比较接近，这里强调一下区别：
target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例如下:

内部是一个并没有绑定事件的按钮，外部是一个绑定了点击事件的view。
点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。
此时，对于外层的view来说:e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件；e.currentTarget指向的是当前正在触发事件的那个组件，因此e.currentTarget是当前的view组件。

2.3 事件与回调的使用

2.3.1 bindtap的语法格式

在小程序中，不存在HTML 中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
1、通过bindtap，可以为组件绑定tap触摸事件，语法如图wxml文件红框所示:
2、在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event (一般简写成e）来接收，语法如图.js文件红框所示:

这个函数名字、形参都是可自定义的，留意：写完事件函数，留意函数与函数之间是否有逗号隔开，没有会报错。

2.3.2 bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下:
①通过bindinput，可以为文本框绑定输入事件:
②在页面的.js 文件中定义事件处理函数:

输入的事件信息，同样存放在element中，具体信息存放在element.detail中。

2.4 事件传参

2.4.1 在事件处理函数中，为data数据幅值

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

通过this.data就可以访问到该页面的data数据，然后this.data.count进一步获取到count的值。

2.4.2 事件传参

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

<button type="primary" bindtap='btnHandler(123)'>事件传参</button>
1

因为小程序会把 bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为btnHandler(123)的事件处理函数。

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下:

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>
1

这句代码含义：info会被解析为参数的名字；数值2会被解析为参数info的值，最终传递的参数就是info=2.

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

传递的参数保存在 事件element对象中的target下dataset中，所以element.target.dataset中会存有所有传递的参数。如果需要获取传递的某一个具体参数值，element.target.dataset.参数名，即可获取。
注：传参如果需要传递的是数值型数据，需要使用{{}}包裹起来，否则传递的是一个字符串。

2.5 数据同步

实现文本框和data之间的数据同步
实现步骤:

1. 定义数据
2. 渲染结构
3. 美化样式（非必要）
4. 绑定input事件处理函数
   
   wxml文件中，定义了一个input输入框，并对他绑定了事件处理函数“iptFunc”，value利用Mustache语法绑定name值。
   js文件中，定义了事件处理函数“iptFunc”，利用this.setData函数为其重新幅值，以实现同步。

学习笔记③
以上学习笔记都是博主在B站学习黑马程序员课程时的记录，如果有什么问题，烦请联系我删除。