微信小程序实现的一个登录页面Demo

╰+哭是因爲堅強的太久メ 2023-10-09 23:24 73阅读 0赞

微信小程序登录页面示例代码，包括了获取验证码按钮等30秒点一次功能和勾选同意用户条款的功能，仅供参考，效果图如下

![微信小程序一个登录页面.gif][.gif]

##### \*.wxml文件： #####

<view class="login">
      <image class="logo" src="/images/logo.png"></image>
      <form bindsubmit="onSubmit">
        <view class="input-item">
          <input placeholder="请输入手机号" bindinput="onInputPhone" maxlength="11" type="number" required></input>
        </view>
        <view class="input-item">
          <input placeholder="请输入验证码" bindinput="onInputCode" maxlength="6" type="number" required></input>
          <button class="code-btn" bindtap="onGetCode" disabled="{
         {disabled}}" class="{
         {disabled?'disabled':''}}">{
       {codeText}}</button>
        </view>
        <view class="checkbox-item">
          <checkbox value="{
         {agreement}}" bindchange="onAgree">我已阅读并同意《用户条款》</checkbox>
        </view>
        <button class="login-btn" type="primary" form-type="submit" disabled="{
         {!agreement}}">登录</button>
      </form>
    </view>

\*.wxss文件：

css
    .login {
        
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .logo {
        
      width: 80px;
      height: 80px;
      margin-bottom: 20px;
    }
    .input-item {
        
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    input {
        
      flex: 1;
      height: 40px;
      padding-left: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .code-btn {
        
      width: 100px;
      height: 40px;
      margin-left: 10px;
      color: #fff;
      background-color: #4caf50;
      border-radius: 4px;
      border: none;
      outline: none;
    }
    .code-btn.disabled {
        
      color: #ccc;
      background-color: #eee;
    }
    .checkbox-item {
        
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
    }
    .login-btn {
        
      width: 100%;
      height: 44px;
      color: #fff;
      background-color: #4caf50;
      border-radius: 4px;
      border: none;
      outline: none;
    }
    .login-btn:disabled {
        
      background-color: #ccc;
    }

##### \*.js文件： #####

Page({
        
      data: {
        
        phone: '',
        code: '',
        disabled: false,
        codeText: '获取验证码',
        agreement: false
      },
      onInputPhone(e) {
        
        this.setData({
        
          phone: e.detail.value
        })
      },
      onInputCode(e) {
        
        this.setData({
        
          code: e.detail.value
        })
      },
      onGetCode() {
        
        // 在按钮被点击后改变按钮状态为disabled，并修改按钮文字为30s后重试
        let count = 30
        let timer = setInterval(() => {
        
          count--
          if (count === 0) {
        
            clearInterval(timer)
            this.setData({
        
              disabled: false,
              codeText: '获取验证码'
            })
          } else {
        
            this.setData({
        
              codeText: `${
          count} 秒后重试`
            })
          }
        }, 1000)
        this.setData({
        
          disabled: true
        })
        // 获取验证码逻辑代码
        // TODO:
      },
      onAgree(e) {
        
        this.setData({
        
          agreement: e.detail.value.length > 0
        })
      },
      onSubmit(e) {
        
        const phoneReg = /^1[3456789]\d{9}$/
        if (!phoneReg.test(this.data.phone)) {
        
          wx.showToast({
        
            title: '请输入正确的手机号码',
            icon: 'none'
          })
          return
        }
        if (!this.data.code) {
        
          wx.showToast({
        
            title: '请输入验证码',
            icon: 'none'
          })
          return
        }
        if (!this.data.agreement) {
        
          wx.showToast({
        
            title: '请同意用户条款',
            icon: 'none'
          })
          return
        }
        // 登录请求逻辑代码
        // TODO:
      }
    })

这个示例代码实现了一个登录页面，并且包括了输入手机号和验证码，获取验证码按钮，勾选同意用户条款，登录按钮等功能。

当用户输入的手机号或验证码格式不正确时，会有相应的提示信息；  
当用户未同意用户条款时，登录按钮会被设置为 disabled 状态并且无法被点击。

在点击获取验证码按钮后，按钮会变成 disabled 状态，并且每隔1秒钟会更新一次倒计时的时间，直到倒计时结束后按钮状态会变回 enabled 状态。

> 如果您有小程序、APP、公众号、网站相关的需求，您可以通过私信来联系我

> 如果你有兴趣，可以关注一下我的综合公众号：biglead

[.gif]: https://img-blog.csdnimg.cn/img_convert/316ef150ebb424be9f3a252e6c21397b.gif