微信小程序之登录页实例

项目效果图：

目录结构：

 1 <view class="container">
 2   <view class="login-icon">
 3     <image class="login-img" src="../images/loginLog.jpg"></image>
 4   </view>
 5   <view class="login-from">
 6 
 7     <!--账号-->
 8     <view class="inputView">
 9       <image class="nameImage" src="../images/name.png"></image>
10       <label class="loginLab">账号</label>
11       <input class="inputText" placeholder="请输入账号" bindinput="phoneInput" />
12     </view>
13     <view class="line"></view>
14 
15     <!--密码-->
16     <view class="inputView">
17       <image class="keyImage" src="../images/key.png"></image>
18       <label class="loginLab">密码</label>
19       <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" />
20     </view>
21 
22     <!--按钮-->
23     <view class="loginBtnView">
24       <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button>
25     </view>
26   </view>
27 </view>

 1 page{
 2   height: 100%;
 3 }
 4 
 5 .container {
 6   height: 100%;
 7   display: flex;
 8   flex-direction: column;
 9   padding: 0;
10   box-sizing: border-box;
11   background-color: #f2f2f2
12 } 
13 
14 /*登录图片*/
15 .login-icon{
16   flex: none;
17 }
18 .login-img{
19   width: 750rpx;
20 }
21 
22 /*表单内容*/
23 .login-from {
24   margin-top: 20px;
25   flex: auto;
26   height:100%;
27 }
28 
29 .inputView {
30   background-color: #fff;
31   line-height: 44px;
32 }
33 /*输入框*/
34 .nameImage, .keyImage {
35   margin-left: 22px;
36   width: 14px;
37   height: 14px
38 }
39 
40 .loginLab {
41   margin: 15px 15px 15px 10px;
42   color: #545454;
43   font-size: 14px
44 }
45 .inputText {
46   flex: block;
47   float: right;
48   text-align: right;
49   margin-right: 22px;
50   margin-top: 11px;
51   color: #cccccc;
52   font-size: 14px
53 }
54 
55 .line {
56   width: 100%;
57   height: 1px;
58   background-color: #cccccc;
59   margin-top: 1px;
60 }
61 /*按钮*/
62 .loginBtnView {
63   width: 100%;
64   height: auto;
65   background-color: #f2f2f2;
66   margin-top: 0px;
67   margin-bottom: 0px;
68   padding-bottom: 0px;
69 }
70 
71 .loginBtn {
72   width: 80%;
73   margin-top: 35px;
74 }

 1 Page({
 2   data: {
 3     phone: '',
 4     password:''
 5   },
 6 
 7 // 获取输入账号
 8   phoneInput :function (e) {
 9     this.setData({
10       phone:e.detail.value
11     })
12   },
13 
14 // 获取输入密码
15   passwordInput :function (e) {
16     this.setData({
17       password:e.detail.value
18     })
19   },
20 
21 // 登录
22   login: function () {
23     if(this.data.phone.length == 0 || this.data.password.length == 0){
24       wx.showToast({  
25         title: '用户名和密码不能为空',  
26         icon: 'loading',  
27         duration: 2000  
28       })  
29 }else {
30   // 这里修改成跳转的页面
31       wx.showToast({  
32         title: '登录成功',  
33         icon: 'success',  
34         duration: 2000  
35       })  
36     }  
37   }
38 })