plus.barcode.Barcode 自定义扫码

最新推荐文章于 2024-05-30 14:37:59 发布

车家大少爷

最新推荐文章于 2024-05-30 14:37:59 发布

阅读量1.5w

点赞数 11

分类专栏： H5 前端文章标签： H5 Barcode

前端同时被 2 个专栏收录

132 篇文章 7 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

参考官方文档

源码下载
提取码：3l5w

效果如下：
在这里插入图片描述

核心代码如下(可下载源码详细参考)

test1.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>自定义扫码</title>
		<link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" />
		<script type="text/javascript" src="./js/common.js"></script>
		
		<script type="text/javascript">
			
			//系统栏颜色
			if(window.plus){
				plus.navigator.setStatusBarBackground("#009DE2");
			}else{
				document.addEventListener("plusready",function(){
					plus.navigator.setStatusBarBackground("#009DE2");
				},false);
			}
			
			// 打开自定义扫描界面 
			function openBarcodeCustom() {
				createWithoutTitle('test2.html', {
					titleNView: {
						type: 'float',
						backgroundColor: '#009DE2',
						titleText: '扫一扫',
						titleColor: '#FFFFFF',
						autoBackButton: true
					}
				});
			}
			
			//扫描成功后回调
			function scaned(t, r, f){
				alert("二维码类型："+t+"\n扫描结果："+r+"\n文件路径："+f);
			}
		</script>
	
	</head>
	<body>
		<div class="button" onclick="openBarcodeCustom()">扫一扫（自定义）</div>
	</body>
</html>

test2.html

<!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>
		<link rel="stylesheet" href="./css/common.css" type="text/css" charset="utf-8" />
		<script type="text/javascript" src="./js/common.js"></script>
		<style type="text/css">
			#bcid {
				width: 100%;
				position: fixed;
				top: 0px;
				bottom: 0px;
				text-align: center;
			}
		
			.tip {
				color: #FFFFFF;
				font-weight: bold;
				text-shadow: 0px -1px #103E5C;
			}
		</style>
		
		<script type="text/javascript">
			var ws = null;
			var scan = null;
			// H5 plus事件处理
			function plusReady() {
				// 获取窗口对象
				ws = plus.webview.currentWebview();
				nv = ws.getTitleNView();
				// 开始扫描
				ws.addEventListener('show', function() {
					scan = new plus.barcode.Barcode('bcid', [plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13], {
						frameColor: '#009DE2',
						scanbarColor: '#009DE2',
					});
					scan.onmarked = onmarked;
					scan.start({
						conserve: true,
						filename: '_doc/barcode/'
					});
					createSubview();
				}, false);
				// 显示页面并关闭等待框
				ws.show('pop-in');
			}
			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';
						break;
					case plus.barcode.EAN8:
						type = 'EAN8';
						break;
					default:
						type = '其它' + type;
						break;
				}
				result = result.replace(/\r\n/g, '');
				ws.opener().evalJS("scaned('" + type + "','" + result + "','" + file + "');");
				back();
			}
			// 创建子窗口
			var view = null;

			function createSubview() {
				view = new plus.nativeObj.View('nbutton', {
					bottom: '28%',
					left: '30%',
					width: '40%',
					height: '44px'
				}, [{
					tag: 'font',
					id: 'text',
					text: '请扫描二维码',
					textStyles: {
						color: '#FFFFFF'
					}
				}]);
				ws.append(view);
			}
		</script>
		
	</head>
	<body style="background-color:#000000;">
		<div id="bcid">
			<div style="height:40%"></div>
			<p class="tip">...载入中...</p>
		</div>
	</body>
</html>

车家大少爷

关注

11
点赞
踩
26

收藏

觉得还不错? 一键收藏
58
评论
plus.barcode.Barcode 自定义扫码

参考官方文档(源码下载)[https://pan.baidu.com/s/14HV4NoP6u7iLHY-ZgThYxw]提取码：3l5w效果如下：核心代码如下(可下载源码详细参考)test1.html<!DOCTYPE HTML><html> <head> <meta charset="utf-8" /> <meta...
复制链接

扫一扫