MUI手势锁

通过mui提供的手势锁插件实现,手势锁样式、存储需要自己完成。

1.样式展示

 

2.实现

2.1 html

需要一个div容器

<div class="mui-content">
    <div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(210,210,210,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='300' data-locker-height='300'></div>
</div>

 

2.2 js

引入mui.locker.js

<script src="../js/mui.locker.js"></script>

监听事件，响应手势完成动作，并对正确的手势进行存储

var holder = document.querySelector('#holder');
    var    fingerprintRecord = []; //用于存储输入的手势
    var self = plus.webview.currentWebview();
    var finger_title = self.finger_title;
 
    document.getElementById('finger_p').innerText = finger_title;
     
    //处理事件
    holder.addEventListener('done', function(event) {
        var rs = event.detail;
        if (rs.points.length < 4) {
            mui.toast("手势过于简单,请重新输入!");
            fingerprintRecord = [];
            rs.sender.clear();
            return;
        }
 
        fingerprintRecord.push(rs.points.join(''));
        if (fingerprintRecord.length >= 2) {
            if (fingerprintRecord[0] == fingerprintRecord[1]) {
                mui.toast("手势设定完成");
                //保存
                UserInfo.fingerprint("");//清空用户指纹
                UserInfo.fingerprint(fingerprintRecord[0]); //保存新指纹
                 mui.openWindow({
                    url: '../index.html',
                    id: 'index.html'
                });
            } else {
                mui.toast("两次手势不一致!")
            }
            rs.sender.clear();
            fingerprintRecord = [];
        } else {
            mui.toast("请确认手势设定");
            rs.sender.clear();
        }
    });