vue 实现腾讯云短信验证码发送

1、创建 Vue 项目

vue create vue-test

2、我们需要导入的依赖

// 短信发送工具类
npm i qcloudsms_js 

3、需要一个短信发送工具类

在 src 目录下创建一个 sms.js 文件

//数据读取json
var config = require('./config');
//短信发送工具类
module.exports = function (phoneNumber,templateId,params){
    var QcloudSms = require("qcloudsms_js");
    // 实例化QcloudSms
    var qcloudsms = QcloudSms(config.appid, config.appkey);
    var smsType = 0; 
    var ssender = qcloudsms.SmsSingleSender();
    return new Promise(function(resolve,reject){
        console.log('短信接受号码:'+phoneNumber);
        console.log('模版ID:'+templateId);
        console.log('模版变量:'+params);
        ssender.sendWithParam(86, phoneNumber.split(','), templateId,params, config.smssign, "", "", function(err,res,resData){
            if (err) {
                reject();//发送失败
            } else {
                //所有短信全部认定发送成功
                console.log(resData);
                resolve(true);
            }
        });
    });
}

 

4、创建一个 config.json 文件存放自己的 APPID、密钥、签名等信息

也是在 src 目录下创建一个 config.json 文件

{
    "appid":"自己的 appid",
    "appkey":"自己的 appkey",
    "smssign":"签名内容"
}

在腾讯云控制台短信 -》应用管理 -》 应用列表，找到上面的信息。详情请自行百度。

注意下面的信息只是一个模板参考，那些参数都不能用的！！！

 

5、我们需要在 main.js 文件引入 sms.js 文件

同时，起一个代表它的名字，去调用，然后我们就可以在需要的组件中去使用了。详细使用请看下面内容。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 引入 sms
var sms = require('./sms')
// 起一个别名为 $sms
Object.defineProperty(Vue.prototype, '$sms', {
  value : sms
})

new Vue({
  render: h => h(App),
}).$mount('#app')

6、在组件中使用

例如：创建一个输入框，绑定 phone 属性，需要输入手机号码，

再创建一个发送按钮，绑定一个方法，调用短信类的方法，需要3个参数（都是必要的），手机号码、模板 ID、模板需要的参数（是一个数组）

<template>
  <div class="hello">
    输入框：<input
      placeholder="请输入手机号码"
      v-model="phone"
      type="text" 
    />
    <button @click="addPhone">发送</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      phone: "",
      randomNum:Math.random().toFixed(6).slice(-6)
    };
  },
  methods: {
    // 发送验证码
    addPhone() {
      var _ = this;
      this.$sms(_.phone, "这里是自己的模板ID", [this.randomNum])
        .then(function () {
          console.log({ success: true, msg: "成功" });
        })
        .catch(function (err) {
          console.log({ success: false, msg: "失败" });
        });
    },
  },
};
</script>

7、随机生出六位数验证码

randomNum = Math.random().toFixed(6).slice(-6)