微信小程序实现的一个登录页面Demo-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现的一个登录页面Demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

微信小程序登录页面,微信小程序的开发锦囊,微信小程序,css,前端

*.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:
  }
})