微信小程序 input框进行双向绑定

在微信小程序的规则中，input标签中的数据为单向绑定，无法像Vue框架中的v-model直接进行input的双向绑定。

下面有一种思路来解决双向绑定这个思路。

1、利用bindinput记录下input框中每次输入的值。

wxml代码：

<input type="text" value="{{searchCode}}" confirm-type="search" bindconfirm="getSearchResult" bindblur="getSearchValue" bindinput="getSearchInput"></input>

js代码：

 1 Page({
 2    data: {
 3     searchCode: null
 4   }, 
 5    getSearchInput(e) {
 6     this.searchCode = e.detail.value;
 7   },
 8   getSearchValue() {
 9     this.getSaveSearchValue('searchCode', this.searchCode)
10   },
11   // 存值入栈
12   getSaveSearchValue(name, value) {
13     var data = {};
14     data[name] = value;
15     this.setData(data)
16   }, 
17 })

解决思路为，利用小程序中的bindinput方法，记录每次输入的值，并将值暂时存入一个全局变量中。 再利用bindblur记录下Input框每次失去焦点时的最终值，并赋值给data中。

注：为了优化小程序运载速度，尽量减少setData方法的使用。 所以讲setData单独提出，并在Input框失去焦点时再进行传值。