uniapp引入腾讯防水墙 （uniapp + ts + vscode） 微信小程序

前提条件

接入验证码前，进入图形验证 页完成新建验证。可在【验证列表】查看 验证码接入所需的 CaptchaAppId 以及 AppSecretKey。

image

示例下载

完整示例请下载：小程序验证码接入示例。

注意：

请勿在“微信开发者工具”的“游客模式”下接入验证码。

接入步骤

步骤1：添加插件

1. 用管理员身份登录 微信公众平台，且需使用接入小程序的相关账号。

2. 选择【设置】>【第三方设置】>【添加插件】，在搜索框内输入关键字“天御验证码”查找插件，并单击【添加】，如下图所示：

   
   
   image

好了，以上都是官方的示例，但是都是原生小程序的示例 官方教程直达

在使用这个插件之前也参考了一个人的写法，uniapp小程序的用例比较少，也是很难找 遇到问题更是没有人几个解决方案。自己尝试了很多次，也遇到了很多坑。现在把我遇到的都拿出来，避免再次遇到。

参考:
uniapp小程序接入天御验证码
腾讯验证码官方Git
github Issues

步骤2：集成插件

• ps:使用uniapp不管是 vscode 或者hbuild开发的配置都一样 uniapp + ts也是一样的配置

1.引入验证码小程序插件。
使用验证码插件前，需要在 manifest.json 中声明验证码小程序插件，使用hubild 开发的需要点击源码视图 manifest.json > 源码视图

"mp-weixin" : {
  "appid" : "xxxx",
  "setting" : {
    "urlCheck" : false
  },
  "usingComponents" : true,
  // 添加以下代码
  "plugins": {
    "t-captcha": {
      "version": "1.0.0",
        "provider": "wxb302e0fc8ab232b4"
    }
  }
},

• 不清楚的照搬就行

然后打开pages.json，找到需要引入插件的页面

  {
        "path": "pages/xxx",
          "style": {
            "disableScroll": true,
            "usingComponents": {
              "t-captcha": "plugin://t-captcha/t-captcha"
            }
          }
        }

详细配置查阅uniapp官网

最后再页面使用

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

  //  ts 中

  // 验证回调
  handlerVerify(ev: { detail: { ret: number; ticket: string } }): void {
    if (ev.detail.ret === 0) {
      // 验证成功
      console.log('ticket:', ev.detail.ticket)
    } else {
      // 验证失败
      // 请不要在验证失败中调用refresh，验证码内部会进行相应处理
      console.log('验证失败')
    }
  }

  // 显示验证码
  showtCaptcha(): void {
    const arr = getCurrentPages()
    const ctx = arr[arr.length - 1] as any
    ctx.selectComponent('#captcha').show()
  }

到这基本就没问题了，但是我却遇到了一个问题，在manifest.json 中声明之后，vsocde 没有报错，微信开发工具却报了
TypeError: Function.prototype.apply was called on WeakMap.prototype.get, which is a string and not a function at callBoundIntrinsic

image.png

网上各种查，有提出问题，却没有解决方案，都是死结。 后来经过比对，dome上面没有问题 ，我的安装了各种依赖，却报错。研究发现是qs 高版本内部有方法覆盖掉了插件内部的方法导致的。

原来的qs是最新的版本

" ^6.10.1"

现在改成5.x.x 就完美解决了。

"qs": "^5.2.1",