验证调起页面：
<template><view class="app"><text>{{ obj.ret }}</text><button @click="varify">验证</button></view>
</template><script>export default{data(){return{obj: {}}},onLoad() {// #ifdef H5var script = document.createElement('script');script.src = "https://turing.captcha.qcloud.com/TCaptcha.js";document.body.appendChild(script);// #endif},onShow() {this.obj = uni.getStorageSync('capture_succss')console.log(uni.getStorageSync('capture_succss'));//拿到数据后进行处理},methods:{callback(res) {let that = thisif (res.ret === 0) {//验证通过} else {//验证失败}},varify() {// #ifdef H5let appid = '194178755';let captcha = new TencentCaptcha(appid, this.callback);captcha.show();// #endif// #ifdef APP | MP-WEIXINuni.navigateTo({url:'/pages/index/index'})// #endif}}}
</script><style>
</style>其他页面：
<!--index.html-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||CSS.supports('top: constant(a)'))document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +(coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><title></title><!--preload-links--><!--app-context--></head><body><div id="app"><!--app-html--></div><script type="module" src="/main.js"></script></body>
</html>
App | 小程序 验证页面：
<template><view><!-- #ifdef APP --><web-view src="/hybrid/html/local.html" @message="callback"></web-view><!-- #endif --><!-- app-id：验证码CaptchaAppId, 从腾讯云的验证码控制台中获取, 在验证码控制台页面内【图形验证】>【验证列表】进行查看 --><!-- #ifdef MP-WEIXIN --><t-captchaid="captcha"app-id="194178755"@verify="handlerVerify"@ready="handlerReady"@close="handlerClose"@error="handlerError" /><button @click="login">登录</button><!-- #endif --></view>
</template>
<script>export default {data() {return {}},methods: {callback: function(res) { //接收网页传给uniapp组件的参数let r = res.detail.data[0].res;if (r.ret === 0) {// #ifdef APPuni.setStorageSync('capture_succss',r)// #endifuni.navigateBack()//接受到参数就可以跳转到想去的界面或者关闭此界面等} else {console.log('验证失败')}},login: function () {this.selectComponent('#captcha').show()// 进行业务逻辑，若出现错误需重置验证码，执行以下方法// if (error) {// this.selectComponent('#captcha').refresh()// }},// 验证码验证结果回调handlerVerify: function (ev) {// 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detailif(ev.detail.ret === 0) {// 验证成功console.log('ticket:', ev.detail.ticket)} else {// 验证失败// 请不要在验证失败中调用refresh，验证码内部会进行相应处理}}, // 验证码准备就绪handlerReady: function () {console.log('验证码准备就绪')}, // 验证码弹框准备关闭handlerClose: function (ev) {// 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail,ret为0是验证完成后自动关闭验证码弹窗，ret为2是用户主动点击了关闭按钮关闭验证码弹窗if(ev && ev.detail.ret && ev.detail.ret === 2){console.log('点击了关闭按钮，验证码弹框准备关闭');} else {console.log('验证完成，验证码弹框准备关闭');}},// 验证码出错handlerError: function (ev) {console.log(ev.detail.errMsg)}},}
</script>App验证需要的H5源码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>验证码</title><style type="text/css">.app {width: 100%;height: 50px;padding: 20px 10px;}</style></head><body bgcolor="#121110"><div class="app"><button id="tencentBtn" class="btn" type="button" data-action="navigateBack">返回</button></div><!-- uni 的 SDK --><!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 --><script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script><script type="text/javascript" src="https://turing.captcha.qcloud.com/TCaptcha.js"></script><script>document.addEventListener('UniAppJSBridgeReady', function() { //确认是否加载好了TencentCaptchalet appid = '194178755'; // 腾讯云控制台中对应这个项目的 appidlet callback = function(res) {//操作验证码后吧回调信息传递给web-viewif(res.ret == 0){uni.postMessage({data: {res: res}});document.getElementById('tencentBtn').click()}}let captcha = new TencentCaptcha(appid, callback);// 滑块显示captcha.show();document.querySelector('.app').addEventListener('click', function(evt) {var target = evt.target;if (target.tagName === 'BUTTON') {var action = target.getAttribute('data-action');switch (action) { case 'navigateBack':uni.navigateBack({delta: 1});break;default:break;}}});});</script></body>
</html>效果展示：
H5：
App：
小程序：
![2024Mysql And Redis基础与进阶操作系列（1）作者——LJS[含MySQL的下载、安装、配置详解步骤及报错对应解决方法]](https://i-blog.csdnimg.cn/direct/46749a9ae2bf431688491b937adcbbb2.png)
