美文网首页
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