1. 微信开发者工具设置(跨域设置)

 

 

 2.html

<view class="code">
  <input type="text" bindinput="bindCode" placeholder="输入验证码" />
    <text bindtap="get_code">点我获取验证码</text>
  </view>

3. js

data: {
    phone: "",
    code: "",
  },

// 双向绑定验证码
  bindCode: function (e) {
    this.setData({
      code: e.detail.value
    })
  },
  // 获取验证码
  get_code: function () {
    var phone = this.data.phone
    // 前端校验1 手机号长度是否为11位
    if (phone.length != 11) {
      console.log(phone.length)
      wx.showToast({
        title: '手机号长度不对',
        icon: 'error',
        duration: 1500
      })
      return
    }
    // 前端校验2 手机号是否符合格式
    var rag = /^1[3-9][0-9]{9}$/
    if (!rag.test(phone)) {
      wx.showToast({
        title: '手机号格式不对',
        icon: 'error',
        duration: 1500
      })
      return
    }
    wx.request({
      url: 'http://127.0.0.1:8030/api/sms/code/',
      method: "POST",
      data: {
        phone: phone,
        tpl: "login",
      },
      success: (res) => {
        if (res.data.status === 200) {
          wx.showToast({
            title: '验证码已发送',
            icon: 'success',
            duration: 1500
          })
          return
        } else {
          wx.showToast({
            title: '请求失败',
            icon: 'error',
            duration: 1500
          })
          return
        }
      },
    })
  },