獲取微信小程序的input控件的value

習慣了vue的方式，我以為javascript世界默認是雙向綁定的。可...微信小程序除外，整個文檔也沒有直接告訴你怎么去獲取一個input的錄入值，這幾乎是所有文檔中僅次於"hello world"的說明了。

如何獲取呢？大體上兩種辦法：

一是利用控件本身的事件，不斷的刷新data里的某個屬性值，常用是bindinput、bindblur。前者是錄入時處理，后者是控件失去焦點時處理。如果每個控件都需要一個綁定的方法，這當然是可怕的。利用bindblur說明一下如何使用一個方法來解決全部控件的綁定吧。

先是js的代碼，節選一部分如下：

data: { 
    userinfo: {}, //提交的數據
  },
  // input框輸入失去焦點時判斷
  inputWatch:function (e) {
    console.log(e.currentTarget);
    let userinfo = this.data.userinfo;
    let item = e.currentTarget.dataset.name;
    userinfo[item] = e.detail.value;
    this.setData({
      userinfo
    });
    console.log('userinfo', userinfo)
  },

　　wxml中需要綁定事件，定義dataset，加上value顯示的設置

<input class="weui-input"  bindblur="inputWatch" data-name='userphone' value="{{userinfo.userphone}}" placeholder="請輸入聯系電話" />

　　有沒有一種很累的感覺。

第二種辦法是使用form來獲取錄入的值，wxml需要指定name，比上面稍省一點

    <form bindsubmit='onNext'>
        <input class="weui-input"  name="userphone"  value="{{userinfo.userphone}}" placeholder="請輸入聯系電話" />
        <button class="weui-btn" formType="submit" type='primary'>下一步</button>
   </form>

　　以下是js文件的onNext方法

onNext:function(data){    
     //暫存當前表單信息
     console.log(data.detail.value.userphone)     
},

　　

以上兩種辦法不能混合使用。原因是inputWatch調用了setData，而沒有綁定事件的控件的值還沒有提交到userinfo.