下面我們逐步實(shí)現(xiàn)下圖所示場(chǎng)景。

將demo小程序的/pages/index/index.wxml

<!--style的優(yōu)先級(jí)比class高會(huì)覆蓋和class相同屬性-->
<view class="inputView" style="margin-top: 40% ">
<input class="input" type="number" placeholder="請(qǐng)輸入賬號(hào)" placeholder-style="color: red" bindinput="listenerPhoneInput" />
</view>

<view class="inputView">
<input class="input" password="true" placeholder="請(qǐng)輸入密碼" placeholder-style="color: red" bindinput="listenerPasswordInput"/>
</view>


<button style="margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx" type="primary" bindtap="listenerLogin">登錄</button>

index.js

Page({
  /**
   * 初始化數(shù)據(jù)
   */
  data:{
    phone: '',
    password: '',
  },

  /**
   * 監(jiān)聽手機(jī)號(hào)輸入
   */
  listenerPhoneInput: function(e) {
      this.data.phone = e.detail.value;

  },

  /**
   * 監(jiān)聽密碼輸入
   */
  listenerPasswordInput: function(e) {
      this.data.password = e.detail.value;
  },

  /**
   * 監(jiān)聽登錄按鈕
   */
  listenerLogin: function() {
      //打印收入賬號(hào)和密碼
    console.log('手機(jī)號(hào)為: ', this.data.phone);
    console.log('密碼為: ', this.data.password);
  },

  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來的參數(shù)
  },
  onReady:function(){
    // 頁(yè)面渲染完成
  },
  onShow:function(){
    // 頁(yè)面顯示
  },
  onHide:function(){
    // 頁(yè)面隱藏
  },
  onUnload:function(){
    // 頁(yè)面關(guān)閉
  }
})

index.wxss

.input{
    padding-left: 10px;
    height: 44px;
}

.inputView{
    border:  2px solid red;
    border-radius: 40px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
}