小程序模板网

微信小程序登录页实例

2017-12-05 摘桃子

提供一个登录页的案例,供同学们使用项目效果图:目录结构:图片资源:login.wxml:view class="container" view class="login-icon" image class="login-img" src="../images/ ...

 
 
 

这篇文章主要为大家详细介绍了微信小程序实战之登录页面制作代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

 

提供一个登录页的案例,供同学们使用

项目效果图:

目录结构:

图片资源:

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{
 height100%;
}
 
.container {
 height100%;
 display: flex;
 flex-direction: column;
 padding0;
 
 background-color#f2f2f2
}
 
/*登录图片*/
.login-icon{
 flex: none;
}
.login-img{
 width750rpx;
}
 
/*表单内容*/
.login-from {
 margin-top20px;
 flex: auto;
 height:100%;
}
 
.inputView {
 background-color#fff;
 line-height44px;
}
/*输入框*/
.nameImage, .keyImage {
 margin-left22px;
 width14px;
 height14px
}
 
.loginLab {
 margin15px 15px 15px 10px;
 color#545454;
 font-size14px
}
.inputText {
 flex: block;
 floatright;
 text-alignright;
 margin-right22px;
 margin-top11px;
 color#cccccc;
 font-size14px
}
 
.line {
 width100%;
 height1px;
 background-color#cccccc;
 margin-top1px;
}
/*按钮*/
.loginBtnView {
 width100%;
 heightauto;
 background-color#f2f2f2;
 margin-top0px;
 margin-bottom0px;
 padding-bottom0px;
}
 
.loginBtn {
 width80%;
 margin-top35px;
}

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 {
 // 这里修改成跳转的页面
  wx.showToast({
  title: '登录成功',
  icon: 'success',
  duration: 2000
  })
 }
 }
})

运行结果



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18035.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询