微信小程序如何实现登录界面

这篇文章主要介绍“微信小程序如何实现登录界面”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序如何实现登录界面”文章能帮助大家解决问题。

注：这里使用的是原生微信小程序

使用wxss和wxml

index.wxml文件中代码

<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样式文件代码（使用绝对布局和相对布局）

.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;}.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;}.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;}.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;}.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;}.qwwIcon{  margin-top: 100rpx;  padding-top: 50rpx;  position: relative;  display: flex;  width: 100%;  height: 150rpx;}.qwwIcon image{  padding-left: 120rpx;  width: 80rpx;  height: 80rpx;}

结果图

关于“微信小程序如何实现登录界面”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。