前提条件
接入验证码前，进入图形验证 页完成新建验证。可在【验证列表】查看 验证码接入所需的 CaptchaAppId 以及 AppSecretKey。
示例下载
完整示例请下载：小程序验证码接入示例。
注意：
请勿在“微信开发者工具”的“游客模式”下接入验证码。
接入步骤
步骤1：添加插件
- 用管理员身份登录 微信公众平台，且需使用接入小程序的相关账号。
-
选择【设置】>【第三方设置】>【添加插件】，在搜索框内输入关键字“天御验证码”查找插件，并单击【添加】，如下图所示：
image
好了，以上都是官方的示例，但是都是原生小程序的示例 官方教程直达
在使用这个插件之前也参考了一个人的写法，uniapp小程序的用例比较少，也是很难找 遇到问题更是没有人几个解决方案。自己尝试了很多次，也遇到了很多坑。现在把我遇到的都拿出来，避免再次遇到。
步骤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官网
最后再页面使用
<t-captcha id="captcha" app-id="填写第一步申请的AppID" @verify="handlerVerify" />
// 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
网上各种查，有提出问题，却没有解决方案，都是死结。 后来经过比对，dome上面没有问题 ，我的安装了各种依赖，却报错。研究发现是qs 高版本内部有方法覆盖掉了插件内部的方法导致的。
原来的qs是最新的版本
" ^6.10.1"
现在改成5.x.x 就完美解决了。
"qs": "^5.2.1",
