更新记录

1.0.1（2021-11-05）

修改v3.js引入方式

1.0.0（2021-08-16）

2021-8-16 首次提交

平台兼容性

什么是v-sms？

由智能人机验证服务商VAPTCHA提供的短信接口，与其他短信接口相比，v-sms具有以下优势：

1. 价格补贴 价格低至2.8分/条，远低于市场价
2. 三网通道直连，到达率高，延时低。
3. 短信签名自定义，不支持金融、游戏等违规短信
4. 注册即赠送30条测试短信，用完自行充值使用，已充值短信永不过期。
5. 提供验证码代生成接口，无需自己写相关逻辑代码。

接入流程：

1.登录VAPTCHA官网-开通短信-获取smsid 、smskey 2.若需使用自定义模板，提交审核即可，签名内容要求合规即可，暂时无需实名认证。

准备工作

登录vaptcha用户后台创建验证单元并获取vid、短信接口smsid及smskey（组件必选属性值）。

引入插件

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

（如果是编辑器版本2.6.0以上的，可略过此步。）

import vaptchaSms from '@/components/vaptcha-sms/vaptcha-sms.vue'
export default { 
    components:{
        vaptchaSms
    }
}

基本用法

1.将/components/vaptcha-v3/www/v3.js 和 /components/vaptcha-v3/www/view.html 两个文件上传到自己的服务器。

2.在 template 中使用组件，通过方法打开手势验证码，需用变量控制组件的显示与隐藏。

<template>  
    <view>
        <button @click="showVaptcha()">获取短信验证码</button>
        <vaptcha-sms
        v-if="isShowVaptcha" 
        :vid="vid" 
        :scene="0" 
        :lang="lang" 
        :area="area"  
        :smsid="smsid"
        :smskey="smskey"
        :templateid="templateid"
        :countrycode="countrycode"
        :phone="phone"
        :data="data"
        v-on:receive="handleMessage"
        ></vaptcha-sms>
    </view>  
</template>  

    export default { 
        data(){
            return {
                vid: '',//验证单元vid,登录vaptcha用户后台创建
                lang: 'zh-CN',
                area: 'cn',
                isShowVaptcha: false,//控制组件的显示与隐藏
                smsid: "",
                smskey: "",
                templateid: "0",
                countrycode:"86",
                phone: "",
                data: ["_vcode", "APP登录"],
            }
        },
        methods: {  
            showVaptcha(){
                this.isShowVaptcha = true
            },
            handleMessage(res){
                this.isShowVaptcha = false
                console.log(res)
            }

后端代码部署

属性说明

发送短信验证码的接口文档

更多资料

vaptcha官网：https://www.vaptcha.com/