Mui手势密码

最新推荐文章于 2020-12-22 14:58:48 发布
最新推荐文章于 2020-12-22 14:58:48 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39919114/article/details/78912537
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>index页面</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--基于框架引入的css，一般不做修改 star-->
		<link rel="stylesheet" href="libs/css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common/common.css"/>

		<!--基于框架引入的css，一般不做修改 end-->
		<!--公共样式部分-->
		<link rel="stylesheet" href="css/main.css" />
		<style type="text/css">
			body{background: #fff;}
			header.mui-bar.mui-bar-white{border-bottom: none;}
			header.mui-bar.mui-bar-white h1{color: #333;font-weight: normal;font-size: 16px;}
			.locker-midd{text-align: center;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 430px;}
			.mui-locker-holder{margin: 0 auto;}
			.locker-midd img{width: 170px;}
			.bottom_btn{position:absolute;bottom: 30px;width: 100%;text-align: center;}
			.bottom_btn a{color: #999;padding: 5px 10px;margin: 1rem;}
			.bottom_btn a:active{color: #ccc;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav mui-bar-white">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">设置手势密码</h1>
		</header>
		<div class="mui-content bg-white">
			<div class="locker-midd">
				<img src="img/logo.png" />
				<div id="holder" class="mui-locker" data-locker-options='{"ringColor":"#ddd","fillColor":"#fff","touchringColor":"#08b9a2","touchfillColor":"#fff","pointColor":"#08b9a2","lineColor":"#08b9a2","ringWidth":"2","lindeWidth":"2"}' data-locker-width='300' data-locker-height='300'></div>
				<p id="alert"></p>
			</div>
			<!--<div class="bottom_btn">
				<a id="modify">修改图案密码</a>
				<a id="forget">忘记图案密码</a>
			</div>-->
		</div>
		<!--基于框架引入的js-->
		<script src="libs/js/mui.min.js"></script>
		<!--基于框架封装好的js-->
		<!--<script src="libs/js/ns_app.js"></script>-->
		<script src="libs/js/mui.locker.js"></script>
		<script src="js/common.js"></script>
		<script src="libs/js/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jtnsh/jtnsh_common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/locker.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>
(function($, doc) {
	mui.init({
		keyEventBind: {
			backbutton: false
		}
	});
	var view = null,
		holder = doc.querySelector('#holder'),
		lockTit = doc.querySelector('#lockTit'),
		alert = doc.querySelector('#alert'),
		modify = doc.querySelector('#modify'),
		forget = doc.querySelector('#forget'),
		pass = [],
		flag = false,
		user = null,
		serPass = '';
	$.plusReady(function() {
		view = plus.webview.currentWebview(); //当前webview
		mainIf();
	})
	document.addEventListener("resume", function() {
		mainIf();
	})
	function mainIf() {
		holderDoc('设置', '0');
	}
	//设置密码手势监听
	function holderDoc(lockTit, status) {
		if(lockTit.indexOf('设置') > -1) {
			holder.addEventListener('done', function(event) {
				var rs = event.detail;
				if(rs.points.length < 4) {
					alert.style.color = '#f50';
					alert.innerText = '请至少设置4个密码连接点';
					pass = [];
					rs.sender.clear();
					return;
				}
				pass.push(rs.points.join(''));
				if(pass.length >= 2) {
					if(pass[0] == pass[1]) {
						var a = 1;
						console.log(pass[0])
						App.setHandPassword(pass[0],function(res){
							console.log('手势密码----',JSON.stringify(res))
							var result = JSON.parse(res.result);
							if(res.stateCode == 'SUCCESS'){
								alert.style.color = '#f50';
								alert.innerText = '图案设定完成';
								var my = plus.webview.getWebviewById('pages/my.html');
								plus.webview.create('pages/my.html');
								closeOthPage();
								mui.fire(my,'back');
							}else{
								mui.alert(res.message,'提示','确定',function (e) {
								},'div')
							}
						})
					} else {
						alert.style.color = '#f50';
						alert.innerText = '两次图案绘制不一致';
					}
					rs.sender.clear();
					pass = [];
				} else {
					alert.style.color = '#f50';
					alert.innerText = '请再次绘制图案密码';
					rs.sender.clear();
				}
			});
		} 
	}
	
}(mui, document));










                

        

        

    




    

      

        

            

              
                
                  Mr_xiaoQiao
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
MuiDemo(MUI例子)

				
			

			

				

					10-25
				

			

		

		

			
				
鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标
MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件

			
		

	



                

              
                



	

		

			

				
					
移动端开发框架mui之注意事项及制作登录页

				
			

			

				

					zgphacker2010的专栏
				

				

					03-07
					
					1410
					
				

			

		

		

			
				
MUI 官网：https://www.dcloud.io/mui.html
MUI 文档：https://dev.dcloud.net.cn/mui/ui/
演示地址：https://dcloud.io/hellomui/ （支持手机和电脑浏览器）
开发工具：https://www.dcloud.io/hbuilderx.html （Hbuilder X）

mui框架中，默认封装了类似 jquery 的语法，进行元素的事件绑定、ajax操作、上拉刷新、下拉加载等操作。

1、mui事件处理：

一般情况下

			
		

	



                


  
              

                


	

		

			

				
					
confirm怎么防止重复点击 mui_qq怎么设手势密码

				
			

			

				

					weixin_39806603的博客
				

				

					12-22
					
					103
					
				

			

		

		

			
				
　　在这个信息的时代，信息安全尤为重要。QQ是我们平常使用最多的聊天工具。为了保护手机QQ聊天隐私的安全性和防止小偷登录这些账号跟好友骗钱。通常可以设置手势密码，为账号安全增加多一层保障。确实挺有用的，在这里也跟大家分享一下qq怎么设手势密码的方法，希望对大家有用。qq怎么设手势密码　　步骤1：打开手机QQ来到首页，点击左上角的【头像】。　　步骤2：然后选择左下角的【设置】。　　步骤3：在个人设置...

			
		

	





	

		

			

				
					
MUI手势锁

				
			

			

				

					weixin_30364325的博客
				

				

					01-10
					
					431
					
				

			

		

		

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


2.实现
2.1 html
需要一个div容器





<div class="mui-content">
    <div id='holder' class="mui-locker" data-locker-options='{"ringColor":"r...

			
		

	



		

			
		



	

		

			

				
					
HBuilder mui 手势事件 转自【B5教程网】：http://www.bcty365.com/content-146-2389-1.html

				
			

			

				

					sophia_xiaoma的专栏
				

				

					10-11
					
					2185
					
				

			

		

		

			
				
导读：在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的...
在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：
分类 参数 描述
点击 tap 单击屏幕
doubletap 双击屏幕
长按 longta

			
		

	





	

		

			

				
					
微信小程序手势图案锁屏、解锁实现并提供onSuccess等回调

				
			

			

				

					chuangxin的专栏
				

				

					07-03
					
					5800
					
				

			

		

		

			
				
摘要：本文给出了一个小程序手势图案锁屏、解锁实现方案，该方案具有重绘少、屏幕闪烁少，使用简单等优点，并增加了onTouchEnd和onSuccess回调，方便大家进行代码扩展，比如可以在onSuccess回调中获取图案密码，存储到数据库等物理介质。
问题由来：小程序目前登陆逻辑是，首次登陆输入用户密码、口令，认证通过后会绑定微信openid，下次进入时只要是同一个微信号（通常openid一致）就直接进入小程序主页面，无需二次输入密码。这种方式简单、高效，但不安全，为此，打算进入小程序主页面前增加图案解锁。

			
		

	





	

		

			

				
					
移动H5手势密码解锁插件--demo

				
			

			

				

					China_Guanq的博客
				

				

					08-17
					
					2689
					
				

			

		

		

			
				
“”下面“”备注： 
此实例应用于移动H5端，手势密码解锁的功能。实例针对不同大小的移动设备做了相应解锁屏幕的大小尺寸。 
密码设置为一个 Z。需要使用手势解锁的移动前端的童鞋们，希望能帮助到。附件Demo: 
http://download.csdn.net/download/china_guanq/9937714

			
		

	





	

		

			

				
					
一个手势密码框架

				
			

			

				

					renxiaoyun123的博客
				

				

					04-16
					
					645
					
				

			

		

		

			
				
第三方：https://blog.csdn.net/yaodong379/article/details/52318859自定义：https://blog.csdn.net/lmj623565791/article/details/36236113

			
		

	





	

		

			

				
					
HBuilder mui 手势事件

				
			

			

				

					j20lin的博客
				

				

					03-21
					
					2152
					
				

			

		

		

			
				
在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：


分类
参数 描述
点击
tap 单击屏幕
doubletap
双击屏幕
长按
longtap 长按屏幕
hold
按住屏幕
release
离开屏幕
滑动
swipeleft 向左滑动
swiperight


			
		

	





	

		

			

				
					
MUI 手势事件

				
			

			

				

					爱我的修罗
				

				

					08-04
					
					2486
					
				

			

		

		

			
				
本来上篇文章准备加上手势事件，让自己的APP看起来高级点，后来发现，其实加了手势之后，反而有些地方更麻烦了，比如说我本来准备向左滑，触发个人中心页面，但是真的加入手势事件，偶尔一个误操作，就弹出页面，也不是很友好，所以最后我还是取消了，当然，我这个博客的目的就是为了把MUI的各种应用记录一下，所以既然提到了手势事件，就也简单列举下，以后要用的时候就自己回来copy代码。


//首先要在init方...

			
		

	





	

		

			

				
					
html5 手势密码

				
			

			

				

					10-25
				

			

		

		

			
				
html5手势密码源代码包，可用于HTML5手机端开发。里面有详细的示例，一看便知

			
		

	





	

		

			

				
					
手势解锁小程序

				
			

			

				

					06-27
				

			

		

		

			
				
手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。

			
		

	





	

		

			

				
					
muidemo整理测试

				
			

			

				

					02-16
				

			

		

		

			
				
自己整理并测试的muidemo

			
		

	





	

		

			

				
					
MUI项目实战源码

				
			

			

				

					05-09
				

			

		

		

			
				
本代码是基于 MUI和 VUE 框架，调用的接口是豆瓣网的开放 API，开发出的一款跨平台的 APP，可查看当前热门电影，根据条件搜索的功能。

			
		

	





	

		

			

				
					
简单MUI DEMO

				
			

			

				

					04-23
				

			

		

		

			
				
基于MUI UI框架实现的在线APP demo,可供初学者参考入门

			
		

	





	

		

			

				
					
Android手势密码LockPatternView、LockPasswordUtils、LockPatternUtils等分析

				
			

			

				

					pcaxb的专栏
				

				

					08-09
					
					6590
					
				

			

		

		

			
				
Android手势密码LockPatternView、LockPasswordUtils、LockPatternUtils
在使用别人写的这个手势密码的时候，我们通常是有自己的需求，可能这里的代码很多也很复杂，有没有什么很多注释，要把整个代码弄明白是要花很多时间而且基础要非常好的，可能在赶项目的时候没有时间去研究，下面我列出一些关键的地方，方便修改代码。
1.在创建手势密码的时候CreateG

			
		

	





	

		

			

				
					
mui手势解锁卡顿

				
			

			

				

					weixin_41623830的博客
				

				

					07-19
					
					212
					
				

			

		

		

			
				
在APP开发中遇到了mui手势解锁卡顿的问题，当时找问题找疯了，然后后面莫名其妙的好了，手势解锁hello mui有，我觉得卡顿的问题是因为循环搞的鬼，因为页面需要每1分钟刷新一次数据，我吧他们两个JS分开写了，就搞定了。

...

			
		

	





	

		

			

				
					
Dialog MUI

					
最新发布

				
			

			

				

					03-22
				

			

		

		

			
				
Dialog MUI（Dialog Multi-User Interaction）是一种多用户交互的对话系统。它是基于自然语言处理和人工智能技术的，旨在实现多用户之间的自然对话。Dialog MUI可以同时处理多个用户的输入，并根据上下文和语义理解...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值