微信小程序如何实现九宫格手势签到功能

   好久没分享技术文章了

   站在巨人的肩膀实现

github组件地址:https://github.com/geminate/mini-gesture-lock

   直入主题.......

  效果图：

01

引入大佬写好的组件

引入组件放到自己的项目目录中（注意目录位置，影响调用）

02

修改组件

修改组件，增加setPassWord参数。

目的：为了让设置手势密码的时候不显示错误红色线条！！！

03

使用组件

js代码：

  onEnd(data) {    //用户输入的密码    this.setData({      data: data.detail    });  },

json代码:​​​​​​​

{  "usingComponents": {    "mini-gesture-lock": "/components/miniGestureLock/index"  }}

wxml代码：​​​​​​​

  <view class="index-page">        <mini-gesture-lock container-width="{{600}}" cycleRadius="{{70}}" bind:end="onEnd" password="{{password}}" setPassWord="{{setPassWord}}"></mini-gesture-lock>        <view class="result">设置的顺序密码是：{{data}}</view>  </view>

wxss代码：​​​​​​​

.index-page {  box-sizing: border-box;  padding-top: 1rem;  height: 65vh;  width: 100vw;}.result {  text-align: center;}

console.log(欢迎交流:yxh1168888)

end