图形验证码

如下图实现图形验证码

 

1.uniapp中利用天御插件实现
1.前提条件
使用图形验证，必须申请所需要的CaptchaAppid和AppSecretKey（在下面地址中进行申请）

登录 - 腾讯云

2.添加插件
(1)插件需要在微信公众平台中添加 = 》 设置 =》第三方设置 =》 添加插件

 (2)再次重新启动项目到微信开发者工具后，直接添加插件

 

3.使用 
1.在mainfest.json中进行配置插件

 "plugins" : {
            "t-captcha" : {
                "version" : "1.0.3",
                "provider" : "wxb302e0fc8ab232b4"
            }
        }

 2.在pages.json中进行引入组件

"usingComponents": {
    "t-captcha": "plugin://t-captcha/t-captcha"
 }

3.在对应位置进行使用

<t-captcha
     id="captcha"
     app-id="申请的appid"
     @verify="handlerVerify"
        />

 打开弹框

this.selectComponent('#captcha').show();

成功验证 

  //验证成功
            handlerVerify (ev) {
                // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
                if(ev.detail.ret === 0) {
                    // 验证成功
                    this.redPackageFlag = ev.detail.ticket;
                    console.log('ticket:', ev.detail.ticket)
                    EntryApi.checkCaptcha({ticket: ev.detail.ticket}).then(res => {
                        if(!res) {
                            this.$nextTick(() => {
                                 this.selectComponent('#captcha').show()
                            })
                        }
                    })
                } else {
                    this.redPackageFlag = ''
                }
            }

插件还提供了其他方法和组件属性

 

 可能在引入过程中会出现其他错误，可以进行一步一步排查，是否是其他插件影响，或者是某个个步骤没有做造成

2.vue项目 - vue-monoplasty-slide-verifyvue-monoplasty-slide-verify: 基于滑动式的验证码，免于字母验证码的繁琐输入用于网页注册或者登录
实现效果

 安装

npm install --save vue-monoplasty-slide-verify

引入

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
 
Vue.use(SlideVerify);

使用

<slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>
<div>{{msg}}</div>
 
export default {
        name: 'App',
        data(){
            return {
                msg: '',
            }
        },
        methods: {
            onSuccess(){
                this.msg = 'login success'
            },
            onFail(){
                this.msg = ''
            },
            onRefresh(){
                this.msg = ''
            }
        }
    }