ant-mini-lock

小程序手势解锁组件

使用说明

安装组件

ayarn add ant-mini-lock

使用示例

json

{
  "defaultTitle": "手势解锁玩法",
  "allowsBounceVertical": "NO",
  "usingComponents": {
    "lock": "ant-mini-lock/src/lock/index"
  }
}

xaml

<lock
    canvasWidth="300"
    canvasHeight="300"
    drawColor="#3985ff"
    canvasId="canvasLock"
    chooseType="3"
    titleColor="#000000"
    titleText="绘制解锁图案"
    onFinish="onFinish">
</lock>

js

注册onFinish方法
onFinish(){
    console.log('do something')
}

效果图

参数说明

属性	类型	默认值	含义
canvasWidth	Number	300	canvas区域宽度，单位px
canvasHeight	Number	300	canvas区域高度，单位px
canvasId	String	canvasLock	canvas区域id
drawColor	String	#3985ff	圆圈和连线绘制颜色
chooseType	Number	3	矩阵单边圆圈个数，默认九宫格
titleColor	String	#000000	标题文案颜色
titleText	String	绘制解锁图案	标题默认文案
onFinish	Function	()=>{}	刮奖回调，当绘制正确时触发

由于小程序当前接口限制，暂不支持 rpx、rem等像素单位，目前仅支持 px

开发

• 文档 https://docs.alipay.com/mini/ide/overview