本文实例为大家分享了微信小程序实现登录界面的具体代码，供大家参考，具体内容如下
注：这里使用的是原生微信小程序
使用wxss和wxml
index.wxml文件中代码
<view class="v1"> <!-- v2父容器 子view使用绝对布局 --> <view class="v2"> <view class="dltext">登录</view> <!-- 手机号 --> <view class="phoneCs"> <image src="https://www.atool.online/images/phone.png" class="ph"></image> <input placeholder="请输入手机号" /> </view> <!-- 密码 --> <view class=passwordCs"> <image src="https://www.atool.online/images/password.png" class="ps"></image> <input placeholder="请输入密码" /> <image src="https://www.atool.online/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="https://www.atool.online/images/weixin.png"></image> <image src="https://www.atool.online/images/qq.png"></image> <image src="https://www.atool.online/images/weibo.png"></image> </view> </view>
index.wxss样式文件代码（使用绝对布局和相对布局）
/* 最大的父元素 */
.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;
}结果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持阿兔在线工具。
