使用微信小程序 创建一个获取验证码的代码

下面是一个获取验证码的微信小程序代码示例：

1. 在 wxml 文件中，添加一个按钮和一个输入框，用于获取手机号码和发送验证码：

<view class="input-box">
  <input type="number" placeholder="请输入手机号码" bindinput="bindPhone" />
  <button type="default" bindtap="getCode" disabled="{{!canGetCode}}">{{codeText}}</button>
</view>

2. 在 js 文件中，定义一个变量用于记录手机号码和倒计时时间，以及一个函数用于获取验证码：

Page({
  data: {
    phone: '',
    countdown: 60,
    canGetCode: false,
    codeText: '获取验证码'
  },
  bindPhone: function(e) {
    this.setData({
      phone: e.detail.value
    })
  },
  getCode: function() {
    var that = this;
    // 发送验证码的逻辑
    // 判断手机号码是否合法
    if (!(/^1[3456789]\d{9}$/.test(that.data.phone))) {
      wx.showToast({
        title: '手机号码格式错误',
        icon: 'none'
      })
      return;
    }
    // 发送验证码请求
    wx.request({
      url: 'http://api.example.com/sendCode',
      method: 'POST',
      data: {
        phone: that.data.phone
      },
      success: function(res) {
        if (res.data.code === 0) {
          // 发送成功，开始倒计时
          that.setData({
            canGetCode: true,
            codeText: '重新发送(' + that.data.countdown + 's)'
          })
          var timer = setInterval(function() {
            that.setData({
              countdown: that.data.countdown - 1,
              codeText: '重新发送(' + that.data.countdown + 's)'
            })
            if (that.data.countdown <= 0) {
              clearInterval(timer);
              that.setData({
                countdown: 60,
                canGetCode: false,
                codeText: '获取验证码'
              })
            }
          }, 1000)
        } else {
          wx.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      },
      fail: function(res) {
        wx.showToast({
          title: '发送失败',
          icon: 'none'
        })
      }
    })
  }
})

3. 在 app.json 文件中，添加微信登录和手机号码授权：

{
  "pages": [
    "pages/index/index"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "小程序需要获取您的地理位置信息"
    },
    "scope.userInfo": {
      "desc": "小程序需要获取您的用户信息"
    },
    "scope.phoneNumber": {
      "desc": "小程序需要获取您的手机号码"
    }
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "获取验证码",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "sitemapLocation": "sitemap.json"
}