更新记录
1.0.1(2021-09-22) 下载此版本
2021-09-22 第一次发布
1.0.0(2021-09-22) 下载此版本
2021-9-22 首次提交
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
ZZRA-SMS
接入流程
- 登陆sms.zzra.com官网→注册账号→开通短信→获取smsid、smskey
- 若需使用自定义模板,提交审核即可,签名内容要求合规即可,暂时无需实名认证。
准备工作
登录 sms.zzra.com 获取 smsid 、smskey (组件必选属性值)。
引入插件
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
(如果是编辑器版本2.6.0以上的,可略过此步。)
import zzraSms from '@/components/zzra-sms/zzra-sms.vue'
export default {
components:{
zzraSms
}
}
基本用法
在 template
中使用组件,通过方法打开zzra-sms,需用变量控制组件的显示与隐藏。
<template>
<view>
<button @click="showSms">发送验证码</button>
<zzra-sms
v-if="isvisible"
:smsid="smsid"
:smskey="smskey"
:templateid="templateid"
:countrycode="countrycode"
:phone="phone"
v-on:receive="handleMessage"
></zzra-sms>
</view>
</template>
export default{
data(){
return {
smsid: "",
smskey: "",
templateid: "0",
countrycode:"86",
phone: "",
isvisible:false,
}
},
methods: {
showSms(){
this.isvisible = true
},
handleMessage(res){
this.isvisible = false
console.log(res)
}
}
}
属性说明
属性名 | 类型 | 说明 |
---|---|---|
smsid | String | 必选, 短信账户 id |
smskey | String | 必选, 短信账户 key |
templateid | String | 模板 id |
countrycode | String | 可选,国别码,默认值:86 |
phone | String | 必选, 手机号 |
data | string[] | 用于替换模板中对应位置变量的数据 |