更新记录
1.0.1(2021-11-05) 下载此版本
修改v3.js引入方式
1.0.0(2021-08-16) 下载此版本
2021-8-16 首次提交
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.22 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
什么是v-sms?
由智能人机验证服务商VAPTCHA提供的短信接口,与其他短信接口相比,v-sms具有以下优势:
- 价格补贴 价格低至2.8分/条,远低于市场价
- 三网通道直连,到达率高,延时低。
- 短信签名自定义,不支持金融、游戏等违规短信
- 注册即赠送30条测试短信,用完自行充值使用,已充值短信永不过期。
- 提供验证码代生成接口,无需自己写相关逻辑代码。
接入流程:
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)
}
属性说明
属性名 | 类型 | 说明 |
---|---|---|
vid | String | 必选,验证单元vid,登录vaptcha官网创建后获取 |
scene | Number | 可选,场景值,默认值:0 |
lang | String | 可选,语言,可选值auto,zh-CN,en,zh-TW,jp,默认值:zh-CN |
area | String | 可选,验证节点区域,可选值 auto,sea,na,cn,默认值:cn |
url | String | 必选, 例:https://XXX/view.html(自己服务器的地址) |
smsid | String | 必选, 短信账户 id |
smskey | String | 必选, 短信账户 key |
templateid | String | 模板 id |
countrycode | String | 可选,国别码,默认值:86 |
phone | String | 必选, 手机号 |
data | Array | 必选, 填入数据用于替换模板中的对应位置的变量 |
发送短信验证码的接口文档
更多资料
vaptcha官网:https://www.vaptcha.com/