[小程式]微信小程式獲取input併發送網路請求

1. 獲取輸入框數據
wxml中的input上增加bindinput屬性，和方法值
在js部分定義與之對應的方法，只要在輸入的時候，數據就會綁定調用到該方法，存入data屬性變數中

2. 調用get請求發起網路請求
調用wx.request發起網路請求

3.調用微信Toast介面展示結果

4.按鈕綁定bindtap屬性，當按鈕點擊的時候會調用對應的方法

index.wxml部分

<view class="indexInput">
  <input  maxlength="100" bindinput="getEmail" placeholder="郵箱地址" />
</view>
<view class="indexInput">
  <input password  maxlength="30" bindinput="getPasswd" placeholder="密碼" />
</view>
<view class="indexButton">
<button type="primary" bindtap="checkLogin" loading="{{loading}}"> 登錄 </button>
</view>

index.js部分

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    email:"",
    passwd:"",
  },

  onLoad: function () {

  },
  //獲取輸入框數據
  getEmail:function(e){
    this.setData({
      email: e.detail.value
    })
  },
  //獲取輸入框數據
  getPasswd: function (e) {
    this.setData({
      passwd: e.detail.value
    })
  },
  /*
  * 驗證用戶名密碼是否正確
   */
  checkLogin:function(){
    var email=this.data.email;
    var passwd = this.data.passwd;
    var data={
      loginfrom:"app",
      email: email,
      psw: passwd,
      output: "json"
    };
    var url = "https://api.sopans.com/third/login.php";
    wx.request({
        url: url,
        method: 'GET',
        data: data,
        header: {
          'Content-Type': 'application/json'
        },
        success(res) {
          if(res.data.code=200){
            wx.showToast({
              title: '成功',
              icon: 'success',
              duration: 2000
            })
          }
        }
    });
  }
})