首先解锁页面不能被安卓的返回按键干掉,需要监听返回按钮,
apiCloud提供的
apiready = function() { api.addEventListener({ name: 'keyback' }, function(ret, err) { }); }方法可以实现,在function里不写任何操作即可实现,
注:侧方法只能在apiCloud的
api.openWin({ 'name': '手势密码', 'url': '/app/route/gestureCipher/' });方法打开的页面才能实现监听
其次是用canvas绘制手势密码的问题,在高清屏幕上,canvas会模糊,解决方案就是将canvas放大(网上的css3缩小的方法不管用!)
用的自修改后的jquery.gesture.password插件,
启动函数的传入的宽度*2
var width = $('body').width()*0.9*2; $("#gesturepwd").GesturePasswd({ roundRadii: (width/10), //圆点的半径 pointRadii:(width/10), //圆点被选中后的半径显示 space: (width/7.5), //圆点之间的距离 width:width, //整个组件的宽度 height:width, //整个组件的高度 zindex :1 //整个组件的css z-index属性 });然后修改jquery.gesture.password插件以下部分
1.由于canvas放大了,所以包裹的容器需要overflow:hidden,并限制其大小,做到高度和宽度一直,实现方法是height:0,padding-bottom:100%,
//全局样式 this.$element.css({ "position": "relation", "width": this.options.width, "height": 0, "padding-bottom": "100%", "background-color": options.backgroundColor, "overflow": "hidden", "cursor": "default" });
2.在绘制的时候放大canvas
this.$element.append('<canvas class="main-c" width="' + options.width*2 + '" height="' + options.height*2 + '" style="width:' + options.width + 'px; height: ' + options.height + ' px;">');3.所有清除画布的地方面积*2
that.$ctx.clearRect(0, 0, that.options.width*2, that.options.height*2); //清空画布
4.由于canvas放大了,里面的内容还是原来大小,所以touchmove的事件改变
if(e.data.that.touched) { var x = e.pageX*2 || e.originalEvent.targetTouches[0].pageX*2; var y = e.pageY*2 || e.originalEvent.targetTouches[0].pageY*2; //x = x - that.$element.offset().left; //y = y - that.$element.offset().top; x = x - (that.$element.offset().left*2); y = y - (that.$element.get(0).offsetTop*2); var p = e.data.that.isIn(x, y); if(p != 0) { if(!e.data.that.pointInList(p, e.data.that.sList)) { e.data.that.sList.push(p); } } e.data.that.draw(x, y); }
最后逻辑上在开启app也需要输入手势密码
由于没有在apiCloud上找到相关api所以自己去通过 sessionStorage 去判断即可
ios上用openWin打开的网页存在滑动后退效果
加上
api.openWin({ 'name': '手势密码', 'url': '/app/route/gestureCipher/', 'slidBackEnabled': false });
slidBackEnabled: false即可
其次