微信小程序登錄頁實例
發(fā)布時間：2017-12-05 09:02 所屬欄目：小程序開發(fā)教程
提供一個登錄頁的案例，供同學(xué)們使用項目效果圖：目錄結(jié)構(gòu)：圖片資源：login.wxml：view class="container" view class="login-icon" image class="login-img" src="../images/ ...
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之登錄頁面制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
提供一個登錄頁的案例，供同學(xué)們使用
項目效果圖：
目錄結(jié)構(gòu)：
圖片資源：
name.png
key.png
loginLog.jpg
login.wxml：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
page{ height: 100%;} .container { height: 100%; display: flex; flex-direction: column; padding: 0; background-color: #f2f2f2} /*登錄圖片*/.login-icon{ flex: none;}.login-img{ width: 750rpx;} /*表單內(nèi)容*/.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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
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 { // 這里修改成跳轉(zhuǎn)的頁面 wx.showToast({ title: '登錄成功', icon: 'success', duration: 2000 }) } }}) |
運行結(jié)果：
