使用指南

本文档适用于小程序活体检测SDK 2.0版本。

• 1.微信小程序活体检测组件配置与集成步骤
• 2.微信小程序活体检测组件程序包的文件结构
• 3.将组件集成到开发环境
• 4.API

1.微信小程序活体检测组件配置与集成步骤

准备工作

在集成之前需要先配置代理服务器，主要目的是为了安全性考虑以及解决跨域问题。配置代理服务器可参考此文档。

配置与集成步骤

步骤一：打开微信Web开发者工具，打开小程序项目。

步骤二：下载微信小程序活体检测组件的ZIP包，解压后导入并集成至项目中，具体集成步骤，可查看3.将组件集成到开发环境。

步骤三：在liveness组件目录/utils/config.js中填写自己代理服务器的地址，这里的代理服务器就是准备工作中配置的代理服务器。

const host = '需要填写上自己的代理服务器地址';

步骤四：运行小程序即可。

2.微信小程序活体检测组件程序包的文件结构

功能简述

/utils/config.js

在该文件中配置host代理服务器

index.js

该文件声明了从liveness-modal组件中暴露出去的API

init.js

该文件声明了一个方法，用于在Page中初始化liveness-modal组件

3.将组件集成到开发环境

步骤一：将整个组件复制到项目根目录下的/components文件夹中

步骤二：在客户组件中引入liveness-modal组件，例如，客户组件为index，则在index.json中引入liveness-modal。

"usingComponents": {
    "liveness-modal": "/components/liveness-modal/liveness-modal"
  }
}

步骤三：在index.wxml中引入liveness-modal组件，注意class="liveness"属性，详情可查看livenessInit方法，另外，可查看liveness-modal组件properties和liveness-modal组件事件获得更多配置项信息。

<liveness-modal class="liveness" "以及组件的properties"></liveness-modal>

步骤四：在index.js中初始化liveness，建议用户在Page页面的onLoad中实例化livenessModal

import livenessInit from '../../components/liveness-modal/init.js';

Page({
     onLoad() {
        // 在onLoad回调函数中调用livenessInit方法初始化liveness
        livenessInit(this);
    }
})

• livenessInit方法的引用路径与客户在步骤一中放置组件的位置有关，可能与示例中的引用路径不同。
• 如果需要多个活体检测的组件，可在wxml文件中声明多个组件，然后在Page.onLoad中分别初始化这些组件实例，详情可查看liveness-modal组件示例。

步骤五：在index.js中调用组件的show方法显示活体检测组件，详情可查看livenessModal组件方法

import livenessInit from '../../components/liveness-modal/init.js';

Page({
    onLoad() {
        livenessInit(this);
    },
    show() {
        // 调用组件的show方法以显示活体检测组件
          this.liveness.show();
    }
})

4.API

livenessInit方法

用于初始化livenessModal对象。该方法位于init.js文件中，调用方式为livenessInit(context, config)

livenessModal组件方法

liveness-modal组件properties

liveness-modal组件事件

success回调函数的返参对象的结构

livenessModal扩展方法

这些方法会扩展到Page对象的_ln属性上，可通过如下方法调用：

this._ln.helper.error('错误');

命名空间的意思是在this._ln中的限定名，比如，命名空间info，则可通过this._ln.info的方式访问info命名空间下的属性和方法。

liveness-modal组件示例

wxml文件

<liveness-modal class="liveness"
    action="{{currAction}}" silent="{{isSilent}}"
    bindstart="livenessStart" bindend="livenessEnd"
    bindsuccess="livenessSuccess" binderror="livenessError">
</liveness-modal>

<liveness-modal class="liveness2"></liveness-modal>

js 文件

import livenessInit from '../../components/liveness-modal/init.js';

onLoad() {
    // 在onLoad回调函数中初始化liveness
    livenessInit(this);
    // 如果在一个页面中需要使用多个liveness，则可以同时初始化多个liveness
    // 而且需要指定name和selector，用于与之前初始化的liveness区分
    livenessInit(this, {name:'liveness2', selector:'.liveness2'})
},
show(){
      this.liveness.show();
      this.liveness2.show();
}