提供一個登入頁的案例，供同學們使用

專案效果圖：

目錄結構：

圖片資源：

name.png

key.png

loginLog.jpg

login.wxml：

<view class="container">
  <view class="login-icon">
    <image class="login-img" src="../images/loginLog.jpg"></image>
  </view>
  <view class="login-from">

    <!--賬號-->
    <view class="inputView">
      <image class="nameImage" src="../images/name.png"></image>
      <label class="loginLab">賬號</label>
      <input class="inputText" placeholder="請輸入賬號" bindinput="phoneInput" />
    </view>
    <view class="line"></view>

    <!--密碼-->
    <view class="inputView">
      <image class="keyImage" src="../images/key.png"></image>
      <label class="loginLab">密碼</label>
      <input class="inputText" password="true" placeholder="請輸入密碼" bindinput="passwordInput" />
    </view>

    <!--按鈕-->
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登入</button>
    </view>
  </view>
</view>
 

login.wxss：

page{
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  background-color: #f2f2f2
} 

/*登入圖片*/
.login-icon{
  flex: none;
}
.login-img{
  width: 750rpx;
}

/*表單內容*/
.login-from {
  margin-top: 20px;
  flex: auto;
  height:100%;
}

.inputView {
  background-color: #fff;
  line-height: 44px;
}
/*輸入框*/
.nameImage, .keyImage {
  margin-left: 22px;
  width: 14px;
  height: 14px
}

.loginLab {
  margin: 15px 15px 15px 10px;
  color: #545454;
  font-size: 14px
}
.inputText {
  flex: block;
  float: right;
  text-align: right;
  margin-right: 22px;
  margin-top: 11px;
  color: #cccccc;
  font-size: 14px
}

.line {
  width: 100%;
  height: 1px;
  background-color: #cccccc;
  margin-top: 1px;
}
/*按鈕*/
.loginBtnView {
  width: 100%;
  height: auto;
  background-color: #f2f2f2;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.loginBtn {
  width: 80%;
  margin-top: 35px;
}
 

login.js：

Page({
  data: {
    phone: '',
    password:''
  },

// 獲取輸入賬號
  phoneInput :function (e) {
    this.setData({
      phone:e.detail.value
    })
  },

// 獲取輸入密碼
  passwordInput :function (e) {
    this.setData({
      password:e.detail.value
    })
  },

// 登入
  login: function () {
    if(this.data.phone.length == 0 || this.data.password.length == 0){
      wx.showToast({  
        title: '使用者名稱和密碼不能為空',  
        icon: 'loading',  
        duration: 2000  
      })  
}else {
  // 這裡修改成跳轉的頁面
      wx.showToast({  
        title: '登入成功',  
        icon: 'success',  
        duration: 2000  
      })  
    }  
  }
})
 

執行結果：

微信小程式教程系列

基礎篇

------------------------------------------------------------

實戰篇

------------------------------------------------------------

電商篇

------------------------------------------------------------

未完待續。。。

謝謝觀看，不足之處，敬請指導

附：專案下載地址 http://download.csdn.net/detail/michael_ouyang/9773804