1、创建 Vue 项目

方式一:在黑窗口输入以下命令

vue create duanxin 

在这里插入图片描述

方式二:在 git 的 黑窗口输入以下命令

vue create duanxin

在这里插入图片描述

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

在 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);
            }
        });
    });
}

在这里插入图片描述

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

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

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

在腾讯云控制台短信 -》应用管理 -》 应用列表,找到上面的信息。

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

在这里插入图片描述
在这里插入图片描述

4、我们需要在 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')

5、在组件中使用

例如:创建一个输入框,绑定 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: "",
    };
  },
  methods: {
    // 发送验证码
    addPhone() {
      var _ = this;
      //这里的模板 ID 需要改成你自己的
      this.$sms(_.phone, "模板 ID", ["123455", 1])
        .then(function () {
          console.log({ success: true, msg: "成功" });
        })
        .catch(function (err) {
          console.log({ success: false, msg: "失败" });
        });
    },
  },
};
</script>

6、我们需要导入的依赖

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

前往低代码交流专区

更多推荐