微信小程序?qū)崿F(xiàn)登錄界面示例

更新時間：2022年05月22日 10:28:50 作者：￡白晝の星☆

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)登錄界面示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)登錄界面的具體代碼，供大家參考，具體內(nèi)容如下

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

使用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>
?
? ? <!-- 協(xié)議區(qū) ?xieyi -->
? ? <view class="xieyi">
? ? ? <checkbox class="isXY"></checkbox>
? ? ? <view class="text-xy">同意小程序的《使用協(xié)議》</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;
? /* 換圖片 */
??
}
/* 白色區(qū)域 */
.v1 .v2{
? position: relative;
? margin-top: 150rpx;
? left: 100rpx;?
? width: 545rpx;
? height: 750rpx;
? background: #FFFFFF;
? border-radius: 50rpx;
}
/* 白色區(qū)域內(nèi)的登錄文本 */
.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;
}
/* 復選框+協(xié)議文字容器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);
}
/* 協(xié)議文本 */
.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;
}

結(jié)果圖