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();
        }
    });