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

本文链接：https://blog.csdn.net/weixin_43420127/article/details/136477242

好久没分享技术文章了

站在巨人的肩膀实现

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

直入主题.......

效果图：

引入大佬写好的组件

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

修改组件

修改组件，增加setPassWord参数。

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

使用组件

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