微信小程序短信验证码登录demo

自己记录学习使用

html

<view class="wrap">
    <view class="tel">
      <input type="number" bindblur="bindTelInput" maxlength="11"
         placeholder="请输入手机号"
         placeholder-style="color:#C3C6C4;"/>
    </view>
    <view class="ver-code">
      <view class="code">
        <input type="number" bindblur="bindCodeInput" maxlength="6"
               placeholder="请输入验证码"
               placeholder-style="color:#C3C6C4;"/>
      </view>
      <view class="getCode">
        <button type="primary" plain="true" disabled="{
  {disable}}" bindtap="sendCode">{
  {countDownNum}}</button>
      </view>
    
    </view>
 
  <view class="btn-login" bindtap="login">登录</view>
</view>

js

 data: {
        disable:false,
        countDownNum:'获取验证码',
        phone:'',
        code:''

    }
   

 获取验手机号和验证码信息

    //手机号
    bindTelInput(e){
        //console.log(e)
        this.setData({
            phone:e.detail.value
        })
    },
    //验证码
    bindCodeInput(e){
        this.setData({
            code:e.detail.value
        }