微信小程序选项卡功能开发步骤与方法全解析
783
2023-11-13
微信小程序实现登录界面示例
本文实例为大家分享了微信小程序实现登录界面的具体代码，供大家参考，具体内容如下
注：这里使用的是原生微信小程序
使用wxss和wxml
index.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
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
<view class="v1">
<!-- v2父容器 子view使用绝对布局 -->
<view class="v2">
<view class="dltext">登录</view>
<!-- 手机号 -->
<view class="phoneCs">
<image src="/images/phone.png" class="ph"></image>
<input placeholder="请输入手机号" />
</view>
<!-- 密码 -->
<view class=passwordCs">
<image src="/images/password.png" class="ps"></image>
<input placeholder="请输入密码" />
<image src="/images/eye-open.png" class="eye"></image>
</view>
<!-- 注册 和忘记密码 -->
<view class="zhuce">
<navigator>立即注册</navigator>
<navigator>忘记密码?</navigator>
</view>
<!-- 登录按钮 -->
<view class="denglu">
<button class="btn-dl" type="primary">登录</button>
</view>
<!-- 协议区 xieyi -->
<view class="xieyi">
<checkbox class="isXY"></checkbox>
<view class="text-xy">同意小程序的《使用协议》</view>
</view>
</view>
<!-- 提示框 使用以下方式登录 -->
<view class="v3">
<view class="line"></view>
<view class="lText">您还可以使用以下方式登录</view>
<view class="line"></view>
</view>
<!-- qq weixin weibo 图标展示view -->
<view class="qwwIcon">
<image src="/images/weixin.png"></image>
<image src="/images/qq.png"></image>
<image src="/images/weibo.png"></image>
</view>
</view>
index.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/* 最大的父元素 */
.v1{
display: block;
position:absolute;
height: 100%;
width: 100%;
background: #356363;
/* 换图片 */
}
/* 白色区域 */
.v1 .v2{
position: relative;
margin-top: 150rpx;
left: 100rpx;
width: 545rpx;
height: 750rpx;
background: #FFFFFF;
border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{
margin-top: 50rpx;
position: absolute;
margin-left:80rpx;
width: 150rpx;
height: 100rpx;
font-size: 60rpx;
font-family: Helvetica;
color: #000000;
line-height: 100rpx;
letter-spacing: 2rpx;
}
/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs{
margin-top: 200rpx;
margin-left: 35rpx;
position: absolute;
display: flex;
width:450rpx ;
height: 80rpx ;
border-bottom: 3rpx solid rgb(58, 57, 57);
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
margin-top: 5rpx;
margin-left: 30rpx;
width: 55rpx;
height: 55rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{
width: 200rpx;
font-size: 25rpx ;
margin-top: 15rpx;
margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{
margin-top: 400rpx;
margin-left: 35rpx;
position: absolute;
display: flex;
width:450rpx ;
height: 80rpx ;
border-bottom: 3rpx solid rgb(58, 57, 57);
}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
margin-top: 5rpx;
margin-left: 30rpx;
width: 55rpx;
height: 55rpx;
}
/* 眼睛 图标*/
.v1 .v2 .passwordCs .eye{
margin-top: 5rpx;
margin-left: 65rpx;
width: 55rpx;
height: 55rpx;
}
/* 密码输入框 */
.v1 .v2 .passwordCs input{
width: 200rpx;
font-size: 25rpx ;
margin-top: 15rpx;
margin-left: 30rpx;
}
/* 注册+忘记密码父容器 */
.v1 .v2 .zhuce{
font-size: 25rpx;
margin-left: 85rpx;
width: 370rpx;
margin-top: 540rpx;
position: absolute;
display: flex;
justify-content: space-between;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{
width: 350rpx;
height: 50rpx;
position: absolute;
margin-top: 600rpx;
margin-left: 85rpx;
}
/* 登录按钮 */
.v1 .v2 .denglu button{
padding: 0rpx;
line-height: 50rpx;
font-size: 25rpx;
width: 100%;
height: 100%;
border-radius: 30rpx;
}
/* 复选框+协议文字容器view */
.v1 .v2 .xieyi{
margin-left: 10rpx;
margin-top: 680rpx;
width: 400rpx;
display: flex;
position: absolute;
}
/* 复选框 */
.v1 .v2 .xieyi .isXY{
margin-left: 85rpx;
/* 修改复选框的大小 */
transform:scale(.6);
}
/* 协议文本 */
.v1 .v2 .xieyi .text-xy{
margin-left: 10rpx;
margin-top: 20rpx;
color: #000000;
font-size:18rpx;
}
/* 提示文本 */
.v3{
padding-left: 100rpx;
display: flex;
position: relative;
width: 100%;
height: 60rpx;
padding-top: 50rpx;
}
.v3 .line{
margin-left: 5rpx;
margin-top: 18rpx;
width: 120rpx;
height: 3rpx;
background-color:#FFFFFF;
}
.v3 .lText{
color: #FFFFFF;
font-size: 25rpx;
}
/* qq wx wb */
.qwwIcon{
margin-top: 100rpx;
padding-top: 50rpx;
position: relative;
display: flex;
width: 100%;
height: 150rpx;
}
.qwwIcon image{
padding-left: 120rpx;
width: 80rpx;
height: 80rpx;
}
结果图
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~