ant-mini-lock

小程序手势解锁

Usage no npm install needed!

<script type="module">
  import antMiniLock from 'https://cdn.skypack.dev/ant-mini-lock';
</script>

README

小程序手势解锁组件

使用说明

安装组件

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 ()=>{} 刮奖回调,当绘制正确时触发

由于小程序当前接口限制,暂不支持 rpxrem等像素单位,目前仅支持 px

开发