微信小程序实现短信登录-云开发

思路：

先写wxml页面，有两个输入，分别为phone和code；有两个按钮，分别为获取验证码和验证登录。对用户输入的phone进行验证，格式正确则调用云函数发送验证码给手机号；用户输入code和testcode进行比较，全等则登录成功，跳转页面。

testcode通过随机数函数生成，保存在testcode全局变量里。phone和testcode传给云函数，实现发送短信。code为用户输入验证码，code===testcode则登录成功，跳转页面。

具体代码：

<view class="loginForm">
  <text>请输入手机号</text>
  <input type="text" bindinput="getPhoneNumber"></input>
  <text>请输入验证码</text>
  <input type="text" bindinput="getCode"></input>
  <button type="primary" bindtap="sendCode">发送短信验证码</button>
  <button type="warn" bindtap="loginTest">验证登录</button>
</view>

// 定义手机号
let phone = ''
// 定义用户输入验证码
let code = ''
// 定义系统生成验证码
let testcode = ''
Page({
  data: {

  },
  onLoad() {

  },
  // 获取用户输入手机号
  getPhoneNumber(event) {
    phone = event.detail.value
  },
  // 获取用户输入验证码
  getCode(event) {
    code = event.detail.value
  },
  sendCode() {
    // testcode为生成的验证码，调用generateMixed函数，获取验证码保存到testcode中
    testcode = this.generateMixed(6);
    console.log('生成随机验证码为：', testcode)
    console.log('用户手机号为：', phone)
    // 对phone进行验证
    if (!(/^1[34578]\d{9}$/.test(phone))) {
      wx.showToast({
        icon: 'none',
        title: '请输入正确的11位手机号',
      })
      return
    }
    //phone符合格式，调用云函数
    wx.cloud.callFunction({
        name: "sendSms",
        data: {
          phone: phone,
          code: code
        }
      })
      .then(res => {
        //未开通静态网站功能，短信暂时无法发送
        console.log('success', res)
      })
      .catch(err => {
        console.log('error', err)
      })
  },
  loginTest() {
    if (code === testcode) {
      wx.showToast({
        title: '登录成功',
      })
      wx.navigateTo({
        url: '../index/index',
      })
    } else {
      wx.showToast({
        icon: 'none',
        title: '验证码有误',
      })
    }
  },
  //生成随机验证码并返回res
  generateMixed(n) {
    let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'L', 'I',
      'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    ];
    let res = '';
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 35);
      res += chars[id];
    }
    return res;
  }

})

云函数：

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.cloudbase.sendSms({
      "env": '输入自己的环境ID',
      content: '验证码为：' + event.testcode,
      "phoneNumberList": [
        "+86" + event.phone
      ],
      
    })
    return result
  } catch (err) {
    return err
  }
}

效果：