美文网首页
uni-app小程序接入腾讯云天御 验证码

uni-app小程序接入腾讯云天御 验证码

作者: _奈_ | 来源:发表于2021-01-26 11:15 被阅读0次

1、前提条件

使用小程序插件接入验证码前,需要先在 验证码控制台 中注册小程序插件 AppID 和 AppSecret,注册完成后,您可以在验证码控制台的验证详情的基础配置中,查看 AppID 以及 AppSecret。

2、在小程序后台添加“天御验证”插件

  • 登录 微信公众平台,且需使用接入小程序的相关账号。
  • 选择【设置】>【第三方设置】>【添加插件】,在搜索框内输入关键字“天御验证码”查找插件,并单击【添加】

3、uni-app项目内添加和使用插件

  • 打开项目 > manifest.json > 源码视图
"mp-weixin" : {
  "appid" : "xxxx",
  "setting" : {
    "urlCheck" : false
  },
  "usingComponents" : true,
  // 添加以下代码
  "plugins": {
    "t-captcha": {
      "version": "1.0.0",
        "provider": "wxb302e0fc8ab232b4"
    }
  }
},
  • 打开pages.json,找到需要引入插件的页面
{
  "path" : "xxx",
  "style" :  {
    "navigationBarTitleText": "xxx",
    "enablePullDownRefresh": false,
    // 加入以下代码
    "usingComponents": {
      "t-captcha": "plugin://t-captcha/t-captcha"
    }
  }
}
  • 在页面加入以下代码
<t-captcha id="captcha" app-id="填写第一步申请的AppID" @verify="handlerVerify" />

// selectComponent需要通过以下方式调用
const arr = getCurrentPages();
arr[arr.length - 1].selectComponent('#captcha').show();

相关文章

网友评论

      本文标题:uni-app小程序接入腾讯云天御 验证码

      本文链接:https://www.haomeiwen.com/subject/prcgzktx.html