借助云开发实现小程序短信验证码的发送

最近在作小程序验证码登录时，用到了短信发送验证码的需求，本身也研究了下，用云开发结合云函数来实现验证码短信发送仍是很方便的。

老规矩，先看效果图

这是我调用腾讯云的短信平台发送的登录验证码。核心代码其实只有下面这么多

是否是感受实现起来特别简单，怎么说呢，咱们代码调用其实就这么几行，就能够实现短信的发送，可是腾讯云短信模板的审核比较繁琐，还有咱们先去申请短信模板，短信模板审核经过后才可使用。
咱们就先来讲代码实现，而后再带你们简单的学习下短信模板的申请。

一，安装node类库

其实咱们这里用到了云开发的云函数，咱们是在云函数里调用短信发送的。为何要在云函数里调用呢，由于咱们作短信发送，须要用到腾讯云的一个短信发送的类库，而这个类库是node库，因此只能在云函数里调用了。

在安装这个类库以前，咱们须要先建立一个云函数，关于云函数的建立，我其实已经讲过不少遍了，不知道的同窗，去翻看下个人历史文章，或者看下我录制的云开发入门视频《5小时零基础入门小程序云开发》
我后面也会把这节内容录制出视频出来。

建立完云函数后，右键点击在终端中打开，打开终端后，在终端中输入如下命令来安装qcloudsms_js类库

npm install qcloudsms_js

这里须要注意，咱们安装类库前须要先下载node并配置npm环境变量，这里我也有写文章的
《nodeJs的安装与npm全局环境变量的配置》

二，编写云函数

上面类库安装好之后，咱们就能够来编写云函数了。
其实代码编写起来很简单，就下面这些，对应的注解我也都已经写出来了。

这里要发送的手机号，和随机验证码须要动态传进来的。

三，调用云函数

调用云函数这里也很简单，咱们须要传入手机号和验证码

手机号这里，我作了一个输入框，能够动态的输入。验证码的话，我写了一个方法来随机生成数字和字母的组合验证码。

我等下会把完整的代码贴出来给你们。

这样咱们输入完手机号之后，点击发送短信按钮，就能够成功的发送短信给到对应的手机号了。

• 能够看到咱们生成的随机验证码以下
  
  咱们手机接受到的短信验证码以下
  
  这样咱们作登录或者作校验时，用户手机短信收到的验证码，和咱们随机生成的验证码同样，即表明用户验证成功。
  完整的index.js代码给你们贴出来

  var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  let phone = ''
  Page({
  //获取随机验证码，n表明几位
  generateMixed(n) {
  var res = "";
  for (var i = 0; i < n; i++) {
    var id = Math.ceil(Math.random() * 35);
    res += chars[id];
  }
  return res;
  },
  //调用云函数发送短信
  sendSMS() {
  if (phone.length != 11) {
    wx.showToast({
      icon: 'none',
      title: '输入11位手机号',
    })
    return
  }
  let code = this.generateMixed(4)
  console.log('本地生成的验证码', code)
  wx.cloud.callFunction({
    name: "sendSms",
    data: {
      phone: phone,
      code: code //生成4位的验证码
    }
  }).then(res => {
    console.log('发送成功', res)
  }).catch(res => {
    console.log('发送失败', res)
  })
  },
  //获取要发送的手机号
  getPhone(event) {
  console.log(event.detail.value)
  phone = event.detail.value
  },
  })

  index.wxml以下
  
  到这里咱们的短信验证码的发送就完整的实现了，是否是很简单。

短信发送参数的设置与获取

首先是去腾讯云本身开通短信功能，而后须要本身去申请模板，填写签名。

我这里把所须要的参数，都给你们标准出来了。你们只须要本身去官网设置对应的模板和签名，而后审核经过后，把对应的参数放到咱们的云函数里便可。

短信验证的原理讲解

在网上找了一张短信验证的原理图，以下

你们能够对照这看下，这个原理图。对应的源码我上面其实已经给你们贴出来了。
若是你们以为不完整，我也已经把完整源码放到网盘里了，有须要的同窗能够到我公号里回复“短信”获取源码。

后面我还会分享更多小程序相关的知识点出来，请持续关注。