小程序>>微信小程序設計登錄頁面

Page({
  data: {
    phone: '',
    password: '',
    success: false,
    text: ''

  },

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

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

  // 登錄 
  login: function () {
    var that = this;   

    var warn = null; //warn爲當手機號爲空或格式不正確時提示用戶的文字，默認爲空
    if (that.data.phone.length == 0) {
      wx.showToast({
        title: '用戶名不能爲空',
        icon: 'loading',
        duration: 1000
      })
    } else if (that.data.password.length == 0) {
      wx.showToast({
        title: '密碼不能爲空',
        icon: 'loading',
        duration: 1000
      })
    }else {
      
      wx.request({
        url: 'http://192.168.41.40:8002/login',
        method: "POST",
        data: {
          cardNo: that.data.phone,
          password: that.data.password
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          if (res.data.state == 1) {  //判斷是否能正常登錄
            warn = "卡號密碼不匹配";
            wx.showModal({
              title: '提示',
              content: warn
            })
            return;
          } else {
            that.setData({
              success: true,
              text: res.data.url
            })
          }
        }

      })



    }
  },
  // 註冊 
  register: function () {
    wx.navigateTo({
      url: '/pages/register/register',
    })
  }

})

 

<!--pages/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 class="registerBtnView"> 
      <button class="registerBtn" type="primary" size="{{primarySize}}" 
          loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="register">註冊</button> 
    </view> 

  </view> 

</view>

<view class = 'success' wx:if="{{success}}">
  <web-view src="{{text}}"></web-view>
</view>

 

/* pages/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: left; 
 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: 100%; 
 margin-top: 35px; 
}

.registerBtn { 
 width: 100%; 
 margin-top: 5px; 
}

最後完成的效果圖