在小程序原生开发中实现双向数据绑定的三大主要步骤

对于刚开始进行小程序开发的开发者来说，总会遇到各种问题，对于那些没有接触过MVVM开发模式的人来说，小程序没有节点操作会让他们感觉非常不便，而对于其他接触过MVVM开发模式的开发者来说，小程序原生开发没有双向绑定的能力也让他们感觉到不方便。下面我就给大家介绍一下，在小程序原生开发过程中通过封装实现双向数据绑定的步骤。

在小程序原生开发过程中通过封装实现双向数据绑定的步骤有那些？

在小程序原生开发过程中，想要通过封装实现双向数据绑定，比较关键的步骤有以下这几个：

1.通过事件触发携带参数
在小程序的大多数组件绑定的事件中，参数被传递回后台。 例如，bindinput输入绑定事件的最常见组件如下所述。 实际操作，以找出将在此处返回的内容。

WXML： 正常输入 JS： GETVAL（E）{ CONSOLE.LOG（E） }

当我们输入内容时，它将触发事件绑定的方法。 进行打印的结果是我们输入的内容都显示在e.detail.value上。 这个detail还顺带着把光标的位置和最后一个keyCode给带过来了。 这是小程序中的input取值方法。

那么在取值后如何为它分配变量呢？

如果只是简单的使用setData，那么就跳坑了，因为变量写死在里面，就等于说我们每次在输入的时候，都必须创建一个新的方法来赋值，这太烦人了。 所以我们需要进一步挖掘。

2.自定义属性data-*
事实上，小程序还为开发者提供了可以自定义的属性[data- *]。 许多新手会忽视甚至知道有这样的事情。 实际上，这是我们实现双向绑定的工具。 

<label>普通输入</label>

<input bindinput="getVal" data-name="a"></input> 

WXML： 正常输入 Js仍然与上面相同，打印print事件返回的参数，，data-name设置的数值a也随着事件在e.currentTarget.dataset中返回。

之后再用JS处理事件带回的内容：

GETVAL（E）{ 设name = e.currentTarget.dataset.name 设value = e.detail.value this.setData（{ [name]：value }） //打印出整个data，看效果如何

CONSOLE.LOG（this.data） }

WXML提供了多个页面绑定：

<label>普通输入</label>
<input bindinput="getVal" data-name="a">
</input> <text>{{a}}</text>

执行之后就可以实现双向绑定了。

3.绑定变量
data-*自定义属性，除了可以用来绑定字符串以外，还可以绑定变量，例如页面上wx:for迭代出来的index，或是Page里面设置的其它变量。因此如果输入的内容更新的是数组的时候，可以多设一个data-index去绑定数组下标，传回去，在JS上拿到后做相应处理后，再更新到目标数组中相应位置的值。

本文地址：http://app.qd-ljr.com/android/faq1948.html