一、用到的相关知识点

1.腾讯云中的消息接口

2.小程序云开发相关知识点

3.小程序相关知识点

技术点就这些，还是蛮简单的，有基础的小伙伴可以思考下原理，没基础的呢，ctrl+c复制一下，ctrl+v到代码里，再改改参数就能用了

二、登录腾讯云，开通消息接口

搜索腾讯云，进入官网

登录进入

云产品-->云通讯-->短信

完成签名管理和正文模板管理

关于腾讯云的准备工作就到这里了，这里有个小细节要补充一下

正文模板创建页面

这段话的意思呢，就是说{1}{2}是自己填入的变量，不用去改变，改变的是后面的文字

三、小程序云开发调用API,实现短信验证

我先把样式布局贴出来（没有专门设计，只为了演示下大致效果）

页面效果

<view class="box">

            <text>请输入您的手机号码</text>

            <input class="input" type="number" bindblur="getPhone"></input>

            <text>请输入验证码</text>

            <input class="input" type="text" bindblur="getSms"></input>

            <text>状态:{{result}}</text>

            <button type="primary" bindtap="send">点击发送</button>

            <button type="primary" bindtap="check">点击验证</button>

</view>

.box{ padding:20rpx;}

button{ margin-top: 20rpx;}

.input{ border:1px solid #eee;}

好了，下面开始讲云开发调用短信接口的部分（创建小程序，再创建云开发模式，删除自动生成的模板啥的，我省略了）

1.新建Node.js云函数

2.再package.json中的"dependencies"加入："qcloudsms_js": "^0.1.1"

创建好后的云函数

3.把下面的代码复制到index.js中

//下面的除了标注的地方外，其余的不用更改

const cloud = require('wx-server-sdk')

const QcloudSms = require("qcloudsms_js")

const appid = ****** // 替换成云短信的 SDK AppID

const appkey = "*********" // 替换成云短信的 App Key

const templateId = ****** // 替换成模板 ID

const smsSign = "******" // 替换成签名内容

cloud.init()

exports.main = async (event, context) => new Promise((resolve, reject) => {

    /**

    * 下面这段代码的作用是，生成随机的验证码，因为循环了6次，就是6位数的

    */

    // 生成6位数验证码

    var code = "";

    for (var i = 0; i < 6; i++) {

        var radom = Math.floor(Math.random() * 10);

        code += radom;

}

    // 生成6位数验证码

var qcloudsms = QcloudSms(appid, appkey);

var ssender = qcloudsms.SmsSingleSender();

var params = [code,"2"];

var mobile = event.mobile

var nationcode = event.nationcode

ssender.sendWithParam(nationcode, mobile, templateId, params, smsSign, "", "", (err, res, resData) => {

if (err) {

reject({ err })

} else {

resolve({ res: res.req, resData})

}

}

);

})

里面有段代码标红了，因为比较重要

var params = [code,"2"]

上面的参数，就是之前短信模板里面的参数

大家注意看标红的地方

比如说，你填的是

{1}为您的登录验证码，请于{2}分钟内填写。如非本人操作，请忽略本短信。

var params = ["1234","2"]

收到的短信就是：

1234为您的登录验证码，请于2分钟内填写。如非本人操作，请忽略本短信。

下面是小程序中js调用云函数的接口

Page({

/**

* 页面的初始数据

*/

data: {

result: "未发送"

},

/**

* 获取输入的手机号码

*/

getPhone: function(e) {

let phone = e.detail.value;

this.setData({

phone

})

},

/**

*获取输入的验证码

*/

getSms: function(e) {

let sms = e.detail.value;

this.setData({

u_sms: sms

})

},

/**

* 点击【点击验证】后，比较随机生成的二维码和用户输入的二维码是否一致

*/

check: function() {

let s_sms = this.data.s_sms;

let u_sms = this.data.u_sms;

if (s_sms == u_sms) {

wx.showToast({

title: '验证成功',

icon: 'success',

duration: 2000

})

} else {

wx.showToast({

title: '验证码输入错误',

icon: 'none',

duration: 2000

})

}

},

/**

* 点击发送，调用云函数

*/

send: function() {

let _this = this;

wx.cloud.callFunction({

name: 'sendsms',

data: {

mobile: _this.data.phone,

nationcode: '86'

},

success: res => {

let sms = res.result.res.body.params[0];

let result = res.errMsg;

if (result == "cloud.callFunction:ok") {

_this.setData({

result: "发送成功",

s_sms: sms

})

} else {

_this.setData({

result: "发送失败"

})

}

},

fail: err => {

console.error('[云函数] [sendsms] 调用失败', err)

}

})

}

})