>

概述及资源

插件与快应用小程序自定义组件使用方式一致,本文主要描述极验小程序插件的使用流程,文档中的接入demo可在 GitHub上获取 (demo地址)。

快应用小程序自定义组件使用文档

小程序转快应用目前只支持vivo oppo 华为 三家厂商

快应用仅支持ES5的语法,所以要支持它必须借助babel之类的语法分析转换工具,同时还要在代码中注入polyfill

npm i @babel/runtime -D

const injectRef = Object.getPrototypeOf(global) || global

// 注入regeneratorRuntime
injectRef.regeneratorRuntime = require('@babel/runtime/regenerator')
// 如果使用的 hap-toolkit 版本低于0.0.38(babel 版本低于 7),则按下面的方式引入
// injectRef.regeneratorRuntime = require('babel-runtime/regenerator')

环境要求

条目
开发工具 快应用开发者工具
调试基础库 v1010及以上

安装

准备工作

1.服务端部署完成(服务端部署文档)

2.小程序后台添加合法域名 https://gcaptcha4.geetest.com

插件获取

组件下载

下载组件后添加到项目内

使用插件

使用方法和普通自定义组件一致。在页面 .json 文件定义需要引入的自定义组件。

代码示例:

{
"usingComponents": {
"captcha4": "/components/captcha4/captcha4"
}
}

模板插入

qxml中插入captcha4模板,示例中的参数为必传参数,其它拓展参数参考api文档。

代码示例:

<captcha4 id="captcha" qa:if="{{loadCaptcha}}" captchaId="{{captchaId}}"  bindSuccess="captchaSuccess"/>

初始化

在需要渲染插件的时候,使用setData 传入必须的参数进行初始化。

代码示例:

onLoad: function() {
this.setData({ loadCaptcha:true,captchaId:'wxxxxxxxxxxxx'})
}

获取成功凭证

成功完成验证码后,会触发用户自定义的captchaSuccess 函数,将验证结果存储在result(这里用户可自定义),等待二次验证时提取上传,无按钮模式时可以直接在此处进行二次验证。

代码示例:

captchaSuccess:function(result){
console.log("captcha-Success!");
this.setData({
result: result.detail
})
}

二次验证

用户点击提交按钮触发提交,进行二次验证。

代码示例:

captchaValidate: function(){
var self = this;
var data = self.data.result; // 获取完成验证码时存储的验证结果
if(typeof data !== 'object'){
console.log("请先完成验证!")
return
}
// 将结果提交给用户服务端进行二次验证
ks.request({
url: "API2接口(详见服务端部署)",
method: 'POST',
dataType: 'json',
data: Object.assign({},data, {
captcha_id: self.data.captchaId
}),
success: function (res) {
ks.showToast({
title: res.data.result
})
},
fail: function () {
console.log('error')
}
})
}

配置参数

这里说的配置参数,是指初始化时调用setData时,传入的值。

以下为必需配置的参数,建议按照上述示例代码方式填写

参数 类型 说明
captchaId 字符串 验证 id,极验后台申请得到

以上是必需配置的参数,可选配置参数参考 MiniProgram API 的参数配置