您现在的位置: 首页 > 开发编程 > HBuilder教程 > 正文

MUI 二维码扫描并跳转

作者:admin来源:网络浏览:时间:2017-03-25 00:36:06我要评论
分享到
1 首页 index.html

  1. <li id="html/barcode.html" onclick="clicked(this.id)"
  2.         <span class="item">Barcode 
  3.           <div class="chs">二维码扫描</div> 
  4.         </span> 
  5.  </li> 
2 二维码页面:html/barcode.html

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="utf-8"/> 
  5.     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
  6.     <meta name="HandheldFriendly" content="true"/> 
  7.     <meta name="MobileOptimized" content="320"/> 
  8.     <title>Hello H5+</title> 
  9.     <script type="text/javascript" src="../js/common.js"></script> 
  10.     <script type="text/javascript"> 
  11.     var ws=null,wo=null
  12.     var scan=null,domready=false
  13.     // H5 plus事件处理 
  14.     function plusReady(){ 
  15.         if(ws||!window.plus||!domready){ 
  16.             return; 
  17.         } 
  18.         // 获取窗口对象 
  19.         ws=plus.webview.currentWebview(); 
  20.         wo=ws.opener(); 
  21.         // 开始扫描 
  22.         ws.addEventListener('show', function(){ 
  23.             scan=new plus.barcode.Barcode('bcid'); 
  24.             scan.onmarked=onmarked; 
  25.             scan.start({conserve:true,filename:'_doc/barcode/'}); 
  26.         }, false); 
  27.         // 显示页面并关闭等待框 
  28.         ws.show('pop-in'); 
  29.          
  30.         
  31.     } 
  32.     if(window.plus){ 
  33.         plusReady(); 
  34.     }else{ 
  35.         document.addEventListener('plusready', plusReady, false); 
  36.     } 
  37.     // 监听DOMContentLoaded事件 
  38.     document.addEventListener('DOMContentLoaded', function(){ 
  39.         domready=true
  40.         plusReady(); 
  41.     }, false); 
  42.     // 二维码扫描成功 
  43.     function onmarked(type, result, file){ 
  44.         switch(type){ 
  45.             case plus.barcode.QR: 
  46.             type = 'QR'
  47.             break; 
  48.             case plus.barcode.EAN13: 
  49.             type = 'EAN13'
  50.             break; 
  51.             case plus.barcode.EAN8: 
  52.             type = 'EAN8'
  53.             break; 
  54.             default: 
  55.             type = '其它'+type; 
  56.             break; 
  57.         } 
  58.         resultresult = result.replace(/\n/g, ''); 
  59.         
  60.         //分析扫描结果:是URL就跳转 ,不是就提示 
  61.         if(result.indexOf('http://')==0  || result.indexOf('https://')==0){ 
  62.             plus.nativeUI.confirm(result, function(i){ 
  63.                 if(i.index == 0){ 
  64.                      
  65.                     back();//返回上一页 
  66.                     plus.runtime.openURL(result); 
  67.                 }else{ 
  68.                     back();//返回上一页 
  69.                 } 
  70.             }, '', ['打开', '取消']); 
  71.         } else{ 
  72.             back();//返回上一页 
  73.             plus.nativeUI.alert(result); 
  74.         } 
  75.     } 
  76.     // 从相册中选择二维码图片  
  77.     function scanPicture(){ 
  78.         plus.gallery.pick(function(path){ 
  79.             plus.barcode.scan(path,onmarked,function(error){ 
  80.                 plus.nativeUI.alert('无法识别此图片'); 
  81.             }); 
  82.         }, function(err){ 
  83.             plus.nativeUI.alert('Failed: '+err.message); 
  84.         }); 
  85.     } 
  86.      
  87.      
  88.      
  89.     </script> 
  90.         <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/> 
  91.         <style type="text/css"> 
  92.             #bcid { 
  93.                 width: 100%; 
  94.                 position: absolute; 
  95.                 top: 0px; 
  96.                 bottom: 44px; 
  97.                 text-align: center; 
  98.             } 
  99.             .tip { 
  100.                 color: #FFFFFF; 
  101.                 font-weight: bold; 
  102.                 text-shadow: 0px -1px #103E5C; 
  103.             } 
  104.             footer { 
  105.                 width: 100%; 
  106.                 height: 44px; 
  107.                 position: absolute; 
  108.                 bottom: 0px; 
  109.                 line-height: 44px; 
  110.                 text-align: center; 
  111.                 color: #FFF; 
  112.             } 
  113.             .fbt { 
  114.                 width: 50%; 
  115.                 height: 100%; 
  116.                 background-color: #007500; 
  117.                 float: left; 
  118.             } 
  119.             .fbt:active { 
  120.                   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); 
  121.                 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); 
  122.             } 
  123.         </style> 
  124.     </head> 
  125.     <body style="background-color: #000000;"> 
  126.         <div id="bcid"> 
  127.             <div style="height:40%"></div> 
  128.             <p class="tip">...载入中...</p> 
  129.         </div> 
  130.         <footer> 
  131.             <div class="fbt" onclick="back()">取  消</div> 
  132.             <div class="fbt" onclick="scanPicture()">从相册选择二维码</div> 
  133.         </footer> 
  134.          
  135.          
  136.     </body> 
  137. </html> 

相关热词搜索: