H5+ APP扫码测试完整版
2021/4/24 10:55:56
本文主要是介绍H5+ APP扫码测试完整版,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
模拟器效果图
三个页面
- 首页
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" /> <title>Hello H5+</title> <script type="text/javascript" src="./js/common.js"></script> <script type="text/javascript"> var img = null; var blist = []; function scaned(t, r, f) { var d = new Date(); var h = d.getHours(), m = d.getMinutes(), s = d.getSeconds(), ms = d.getMilliseconds(); if (h < 10) { h = '0' + h; } if (m < 10) { m = '0' + m; } if (s < 10) { s = '0' + s; } if (ms < 10) { ms = '00' + ms; } else if (ms < 100) { ms = '0' + ms; } var ts = '[' + h + ':' + m + ':' + s + '.' + ms + ']'; var li = null, hl = document.getElementById('history'); if (blist.length > 0) { li = document.createElement('li'); li.className = 'ditem'; hl.insertBefore(li, hl.childNodes[0]); } else { li = document.getElementById('nohistory'); } li.id = blist.length; var html = '[' + h + ':' + m + ':' + s + '.' + ms + ']' + ' ' + t + '码<div class="hdata">'; html += r; html += '</div>'; li.innerHTML = html; li.setAttribute('onclick', 'selected(id)'); blist[blist.length] = { type: t, result: r, file: f }; update(t, r, f); } function selected(id) { var h = blist[id]; update(h.type, h.result, h.file); if (h.result.indexOf('http://') == 0 || h.result.indexOf('https://') == 0) { plus.nativeUI.confirm(h.result, function(i) { if (i.index == 0) { plus.runtime.openURL(h.result); } }, '', ['打开', '取消']); } else { plus.nativeUI.alert(h.result); } } function update(t, r, f) { outSet('扫描成功:'); outLine(t); outLine(r); outLine('\n图片地址:' + f); if (!f || f == 'null') { img.src = './img/barcode.png'; } else { plus.io.resolveLocalFileSystemURL(f, function(entry) { img.src = entry.toLocalURL(); }); //img.src = 'http://localhost:13131/'+f; } } function onempty() { if (window.plus) { plus.nativeUI.alert('无扫描记录'); } else { alert('无扫描记录'); } } function cleanHistroy() { if (blist.length > 0) { var hl = document.getElementById('history'); hl.innerHTML = '<li id="nohistory" class="ditem" οnclick="onempty();">无历史记录 </li>'; } plus.io.resolveLocalFileSystemURL('_doc/barcode/', function(entry) { entry.removeRecursively(function() { // Success }, function(e) { //alert( "failed"+e.message ); }); }); } </script> <link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" /> <style type="text/css" media="screen"> .hdata { color: #e1673e; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> </head> <body onl oad="img=document.getElementById('bimg')"> <header id="header"> <div class="nvbt iback" onclick="back()"></div> <div class="nvtt">Barcode</div> <div class="nvbt idoc" onclick="openDoc('Barcode Document','/doc/barcode.html')"></div> </header> <div id="dcontent" class="dcontent"> <br /> <img style="width:40%" id="bimg" src="./img/barcode.png" /> <br /> <div class="button" onclick="clicked('barcode_scan.html',true,true)">扫一扫</div> <div class="button" onclick="clicked('barcode_scan2.html',true,true)">扫一扫(自定义)</div> <br /> <ul id="history" class="dlist" style="text-align:left;"> <li id="nohistory" class="ditem" onclick="onempty()">无历史记录 </li> </ul> <br /> <div class="button button-waring" onclick="cleanHistroy()">清空历史记录</div> </div> <div id="output"> Barcode提供二维码扫描识别功能,支持调用摄像头即时扫描二维码,也可直接输入图片进行扫描识别。 </div> </body> <script type="text/javascript" src="./js/immersed.js"></script> </html>
- 扫一扫
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" /> <title>Hello H5+</title> <script type="text/javascript" src="./js/common.js"></script> <script type="text/javascript"> var ws = null, wo = null; var scan = null, domready = false; // H5 plus事件处理 function plusReady() { if (ws || !window.plus || !domready) { return; } // 获取窗口对象 ws = plus.webview.currentWebview(); wo = ws.opener(); // 开始扫描 ws.addEventListener('show', function() { scan = new plus.barcode.Barcode('bcid'); scan.onmarked = onmarked; scan.start({ conserve: true, filename: '_doc/barcode/' }); }, false); // 显示页面并关闭等待框 ws.show('pop-in'); wo.evalJS('closeWaiting()'); } if (window.plus) { plusReady(); } else { document.addEventListener('plusready', plusReady, false); } // 监听DOMContentLoaded事件 document.addEventListener('DOMContentLoaded', function() { domready = true; plusReady(); }, false); // 二维码扫描成功 function onmarked(type, result, file) { switch (type) { case plus.barcode.QR: type = 'QR'; break; case plus.barcode.EAN13: type = 'EAN13'; break; case plus.barcode.EAN8: type = 'EAN8'; break; default: type = '其它' + type; break; } result = result.replace(/\n/g, ''); wo.evalJS("scaned('" + type + "','" + result + "','" + file + "');"); back(); } // 从相册中选择二维码图片 function scanPicture() { plus.gallery.pick(function(path) { plus.barcode.scan(path, onmarked, function(error) { plus.nativeUI.alert('无法识别此图片'); }); }, function(err) { console.log('Failed: ' + err.message); }); } </script> <link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" /> <style type="text/css"> #bcid { width: 100%; position: absolute; top: 0px; bottom: 44px; text-align: center; } .tip { color: #FFFFFF; font-weight: bold; text-shadow: 0px -1px #103E5C; } footer { width: 100%; height: 44px; position: absolute; bottom: 0px; line-height: 44px; text-align: center; color: #FFF; } .fbt { width: 50%; height: 100%; background-color: #FFCC33; float: left; } .fbt:active { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); } </style> </head> <body style="background-color: #000000;"> <div id="bcid"> <div style="height:40%"></div> <p class="tip">...载入中...</p> </div> <footer> <div class="fbt" onclick="back()">取 消</div> <div class="fbt" onclick="scanPicture()">从相册选择二维码</div> </footer> </body> </html>
- 扫一扫(自定义)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" /> <title>Hello H5+</title> <script type="text/javascript" src="./js/common.js"></script> <script type="text/javascript"> var ws = null, wo = null; var scan = null, domready = false, bCancel = false; // H5 plus事件处理 function plusReady() { if (ws || !window.plus || !domready) { return; } // 获取窗口对象 ws = plus.webview.currentWebview(); 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/' }); }); // 显示页面并关闭等待框 ws.show('pop-in'); wo.evalJS('closeWaiting()'); } if (window.plus) { plusReady(); } else { document.addEventListener('plusready', plusReady, false); } // 监听DOMContentLoaded事件 document.addEventListener('DOMContentLoaded', function() { domready = true; plusReady(); }, false); // 二维码扫描成功 function onmarked(type, result, file) { switch (type) { case plus.barcode.QR: type = 'QR'; break; case plus.barcode.EAN13: type = 'EAN13'; break; case plus.barcode.EAN8: type = 'EAN8'; break; default: type = '其它' + type; break; } result = result.replace(/\n/g, ''); wo.evalJS("scaned('" + type + "','" + result + "','" + file + "');"); back(); } // 从相册中选择二维码图片 function scanSwitch() { if (bCancel) { scan.start({ conserve: true, filename: '_doc/barcode/' }); btCancel && (btCancel.innerText = '暂 停'); } else { scan.cancel(); btCancel && (btCancel.innerText = '开 始'); } bCancel = !bCancel; } </script> <link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" /> <style type="text/css"> #bcid { width: 100%; position: absolute; top: 0px; bottom: 44px; text-align: center; } .tip { color: #FFFFFF; font-weight: bold; text-shadow: 0px -1px #103E5C; } footer { width: 100%; height: 44px; position: absolute; bottom: 0px; line-height: 44px; text-align: center; color: #FFF; } .fbt { width: 50%; height: 100%; background-color: #FFCC33; float: left; } .fbt:active { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); } </style> </head> <body style="background-color: #000000;"> <div id="bcid"> <div style="height:40%"></div> <p class="tip">...载入中...</p> </div> <footer> <div class="fbt" onclick="back()">取 消</div> <div id="btCancel" class="fbt" onclick="scanSwitch()">暂 停</div> </footer> </body> </html>
由于自带的css及js 文件太多 网页呈现不了 所以我将测试项目已打包
需要自取H5+ APP扫码测试完整版
下载完成后HBuilder X 打开项目直接模拟器或者真机即可进行调试
这篇关于H5+ APP扫码测试完整版的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)