toast 訊息提示框

• duration hidden設定false後，觸發bindchange的延時，單位毫秒
• hidden 是否隱藏
• bindchange duration延時後觸發

訊息提示框：toast即將廢棄，請使用 API wx.showToast

input 輸入框

• value 輸入框的內容
• type 型別，有效值：text,number,idcard,digit,time,date
• password 是否是密碼型別
• placeholder 輸入框為空時佔位符
• placeholder-style 指定placeholder的樣式
• placeholder-class 指定placeholder的樣式類
• disabled 是否禁用
• maxlength 最大輸入長度，設定為0的時候不限制最大長度
• auto-focus 自動聚焦，拉起鍵盤。頁面中只能有一個input設定auto-focus屬性
• focus 使得input獲取焦點
• bindchange 輸入框失去焦點時，觸發bindchange事件，event.detail={value:value}
• bindinput 除了date/time型別外的輸入框，當鍵盤輸入時，觸發input事件，event.detail={value:value}，處理函式可以直接return一個字串，將替換輸入框的內容。
• bindfocus 輸入框聚焦時觸發，event.detail = {value:value}
• bindblur 輸入框失去焦點時觸發，event.detail = {value:value}

index.js

Page({
  data: {
    toastHidden: true,
    toastText:"",
    focus: false,
    nameInput: "",
    passWdInput: ""
  },
  toastChange: function(e) {
    this.setData({
      toastHidden:true
    })
  },
  loginButtonTap: function(e) {
    if
 
(this.data.nameInput.length == 0 || this.data.passWdInput.length == 0){
      this.setData({
        toastText:'使用者名稱和密碼不能為空！',
        toastHidden:false
      })
    }else{
      console.log("登入")
    }

  },
  nameBindKeyInput: function(e) {
    this.setData({
      nameInput: e.detail.value
    })
  },
  passWdBindKeyInput: function(e) {
    this.setData({
      passWdInput: e.detail.value
    })
  },
  bindHideKeyboard: function(e) {
    if (e.detail.value === "123") {
      //收起鍵盤
      wx.hideKeyboard()
    }
  }
})

index.wxml

<view class="login_view">
  <view class="login_section">
      <input  maxlength="11" type="number" bindinput="nameBindKeyInput" placeholder="請輸入使用者名稱"/>
  </view>
  <view class="login_section">
      <input maxlength="20" password type="text" bindinput="passWdBindKeyInput" placeholder="請輸入密碼" />
  </view> 
  <view class="section">
      <view class="btn">
        <button bindtap="loginButtonTap">登入</button>
      </view>
  </view>
  <toast hidden="{{toastHidden}}" bindchange="toastChange">{{toastText}}</toast>
</view>

index.wxss

.login_view{
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}
.login_section{
    margin-top: 40rpx;
    margin-bottom: 50rpx;
    padding: 20rpx 30rpx;
    margin-left: 20px;
    margin-right: 20px;
    background-color: #fff;
}
.btn{
    padding: 0 30px;
}

toast的效果，有點噁心，那個對勾要一直顯示，下一版本，估計會開放其他樣式吧。
input獲取輸入內容。其他效果可以看demo