简单的微信小程序登录注册页面及逻辑

小小薛定谔

于 2024-10-01 20:01:05 发布

阅读量130

点赞数 7

文章标签：微信小程序 notepad++ 小程序前端编辑器

本文链接：https://blog.csdn.net/2302_77426533/article/details/142674030

版权

一、示例

二、示例代码

1.wxml

<!--pages/login.wxml-->
<!-- 登录注册文字 -->
<view class="title">{{TitleText}}</view>
<!-- 登录框 -->
<view class="inputBox">
    <input type="text" placeholder="请输入用户名" data-id="user" bindinput="getinput" value="{{userValue}}" placeholder-style="color:#ccc8c8"/>
</view>
<view class="inputBox">
    <input type="text" placeholder="请输入密码" data-id="password" bindinput="getinput" value="{{passwordValue}}" placeholder-style="color:#ccc8c8"/>
</view>
<!-- 登录注册按钮 共用 -->
<view class="btn">
    <van-button type="primary" round block color="#40ae36" disabled="{{btnState}}" bind:tap="login">{{btnText}}</van-button>
</view>

<!-- 新用户去注册 -->
<view class="toRegister" bind:tap="changes">
    <view class="btntTip">{{Totext}}</view>
    <van-icon name="arrow" size="16rpx" />
</view>
<!-- 其他登录方式 -->
<view class="bottom" wx:if="{{TitleText=='登录'}}">
    <view class="tip">其他登录方式</view>
    <image src="/images/帮助.png" mode="" />
</view>

2.scss代码部分

.title{
  margin: 100rpx 0 54rpx 54rpx;
  font-size: 48rpx;
  font-weight: 400;
  color: #262424;
}
.inputBox{
  border-bottom: 1rpx solid #f0f0f0;
  margin: 0 60rpx;
}
input{
  height: 110rpx;
}
.btn{
  margin: 50rpx 60rpx 0;
}
.toRegister{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
}