微信小程序的数据及事件绑定_微信小程序绑定小程序

       在进行微信小程序的开发时，可能需要在页面加载时从后端获取数据前端显示或动态从后端获得数据前端操作，这两种操作都离不开数据绑定与事件绑定，小程序提供了类似vue.js的数据绑定方式，使用起来非常方便，还可以配合标签的特定属性进行逻辑操作，如果掌握后可以加快开发速度和提高性能。

数据绑定

       小程序将一个页面的逻辑层和视图层在文件上分开，分别放在.js和.wxml文件中，我们想要在视图层显示某逻辑层的值，首先需要在页面的.js文件的data中定义相应的变量并为其赋值，Page（）函数的参数是一个对象，其中data也是一个对象，给变量赋值也遵循key：value规则。

      

       我们在.js文件中定义好相关变量及赋值后，就可以在视图层的.wxml中将相关变量的值绑定给相关组件，可绑定的组件非常灵活，基本方法是将相关变量名包含在双大括号{{}}中，一定是双括号。

内容绑定

例如我如果想要在view组件中显示逻辑层的message的值，可使用这种方式，这种应用方式最广泛，例如显示用户名、头像等随用户不同而不同的变量。

      

组件属性绑定

       属性绑定可以使用户易于区分类型相同的组件，例如利用id区分不同view，但id名是以id1、id2等形式出现，则使用这种绑定方式能够更加灵活

控制绑定

       这种情况主要用于我们希望在不同的情形下显示的内容不同，例如如果用户登录才显示相关内容，没有登陆会显示提醒用户登陆，这里用到了组件的wx:if属性，将它与wx:else属性搭配可以完成复杂的条件控制。

      

循环绑定

       主要用于同时显示结构相同的大段列表项，例如外卖软件显示不同餐品的页面，显示每个餐品的模块其实只有名称和简介等不同，将这些内容使用绑定操作可以大大减少代码数量，这里使用的是wx:for属性，首先需要在逻辑层的data中定义数组型的变量，数组元素可以是多种多样的，用index和item分别表示下标和数组元素，同样的需要写在{{}}内

      

      

       除此之外，在{{}}还能直接进行一些逻辑运算，如四则运算，逻辑判断等，获取对象属性等，总之，数据绑定的过程是首先在.js中定义相关变量，.wxml中使用{{}}绑定相关变量，就能够在前端获取逻辑层值，而再加上逻辑层和小程序后端的网络传输，就能够完成前端显示后端数据的功能。

 

事件绑定

       事件绑定与数据绑定的流程非常相似，具体为在.js中编写相关事件的逻辑代码，.xwml中通过组件的事件属性来绑定事件逻辑，这里以bindtap属性为例，代表的是组件被点击时执行的事件处理函数，view如下

其中bindtap代表绑定的事件名时tapName，tapName是一个函数，绑定的时候不需要加()即tapName()

逻辑层编写的事件处理函数如下

可以看到，这个事件就是一个普通的js函数，其中function的参数就是代表被触发的事件对象，打印出来后有一些需要注意的地方

这里的currentTarget就反映了view组件的一些属性，如果我们想要在事件触发时主动向逻辑层发送一些附加数据，可以在view中以data-后跟变量名=“值”的方式，在后台使用event.currentTarget.dataset.变量名的方式获取相关数据值。

除此之外，还可以通过value属性的方式传值，例如wxml中有如下input，为它定义了name属性值

事件bindUnameChange代码如下

可以看到，对于定义了value的组件，可以通过e.detail.value获取其值，并与逻辑层交互。