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