文章来源:http://www.imtr.cn/html/n256.html
本文写出了扫码并跳转的代码,直接保存使用吧。
demo只有在真机运行才能起作用哦
引入Dcloud的js和css(右键保存到本地)common.css mui.min.js common.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/> <meta name="HandheldFriendly" content="true"/> <meta name="MobileOptimized" content="320"/> <title>扫一扫</title> <script type="text/javascript" src="common.js"></script> <script type="text/javascript" src="mui.min.js"></script> <link rel="stylesheet" href="common.css" type="text/css" charset="utf-8"/> <script type="text/javascript"> var ws=null,wo=null; var scan=null; // H5 plus事件处理 function plusReady(){ // 获取窗口对象 ws=plus.webview.currentWebview(); nv=ws.getTitleNView(); wo=ws.opener(); // 开始扫描 ws.addEventListener('show', function(){ scan=new plus.barcode.Barcode('bcid',[plus.barcode.QR,plus.barcode.EAN8,plus.barcode.EAN13],{frameColor:'#00FF00',scanbarColor:'#00FF00'}); scan.onmarked=onmarked; scan.start({conserve:true,filename:'_doc/barcode/'}); createSubview(); }, false); // 显示页面并关闭等待框 ws.show(); } document.addEventListener('plusready', plusReady, false); // 二维码扫描成功 function onmarked(type, result, file){ switch(type){ case plus.barcode.QR: type = 'QR';//二维码 break; case plus.barcode.EAN13: type = 'EAN13';//13位条形码 break; case plus.barcode.EAN8: type = 'EAN8';//8位条形码 break; default: type = '其它'+type;//其它 break; } //判断是不是网址 if(result.indexOf('http://')==0 || result.indexOf('https://')==0){ //是网址,直接跳转 //plus.runtime.openURL(result);//调用手机浏览器跳转 /* mui.openWindow({//APP内带参数跳转 url: 'a.html',//把结果传递给指定页面 id: 'deok', extras:{ result:result } }); */ //plus.webview.open(result,'id');//APP内不带参数直接跳转 //plus.webview.currentWebview().hide();//关闭窗口 //plus.webview.currentWebview().close('none');//先隐藏再关闭窗口,否则页面会闪一下再关闭 //plus.webview.close("deok");//关闭指定id的窗口 } else{ //不是网址,打印出结果 alert(result); scan.start({conserve:true, filename:'_doc/barcode/'});//扫描出结果后自动重新扫描 } //switchFlash();//开/关闪光灯 } // 开/关闪光灯 var bFlash = false; var AVCaptureDevice=null; var Camera=null; function switchFlash(){//控制闪关灯 bFlash = !bFlash; scan.setFlash(bFlash); } // 创建闪光灯按钮子窗口 var view = null; function createSubview(){ view = new plus.nativeObj.View('nbutton', { bottom: '20px', left: '30%', width: '40%', height: '44px' }, [{ tag: 'rect', id: 'rect', rectStyles: { radius: '8px', color: 'rgba(255,0,0,0.8)' }},{ tag: 'font', id: 'text', text: '开启闪光灯', textStyles: { color: '#FFFFFF' } }]); // 处理点击事件 view.addEventListener('click', function(e){ switchScan();//改变按按钮文字 }, false); ws.append(view); } var bScan = false; function switchScan(){ if(bScan){ switchFlash(); view&&(view.drawText('开启闪光灯', {}, {color:'#FFFFFF'}, 'text')); }else{ switchFlash(); view&&(view.drawText('关闭闪光灯', {}, {color:'#FFFFFF'}, 'text')); } bScan=!bScan; } </script> <style type="text/css"> #bcid { width: 100%; position: absolute; top: 0px; bottom: 0px; text-align: center; } .tip { color: #FFFFFF; font-weight: bold; text-shadow: 0px -1px #103E5C; } </style> </head> <body style="background-color:#000000;"> <div id="bcid"> <div style="height:40%"></div> <p class="tip">...载入中...</p> </div> </body> </html>
如果扫码后需要传递参数到a.html,那么a.html的代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>扫码结果</title> <style type="text/css"></style> </head> <body> <div>下面是扫码页面传过来的数据</div> <div><p id="data"></p></div> <script type="text/javascript"> if (window.plus) { plusready(); } else { document.addEventListener('plusready', plusready, false); } function plusready() { var w = plus.webview.currentWebview(); var result = w.result;//获取传递过来的参数 document.querySelector('#data').innerText = result;//打印结果 //plus.webview.close("deok"); //window.location.href=result;//跳转到目标网址 //处理返回事件 plus.key.addEventListener('backbutton',function() {plus.webview.currentWebview().close();}) } </script> </body> </html>
原文地址:http://www.imtr.cn/html/n256.html