MUI框架二维码扫描实现

废话不多说上代码就对了(●'◡'●)

css代码:

.mask {
				height: 90%;
				width: 100%;
				position: absolute;
				top: 0;
				background: #000000;
			}
			
			.mask2 {
				height: 55px;
				width: 100%;
				position: fixed;
				bottom: 0;
				background: #000000;
			}
			
			body {
				margin: 0;
				background: #000000;
			}
			
			.scan {
				width: 50%;
				height: 55px;
				background: #000;
				float: left;
				text-align: center;
			}
			
			.scan img {
				width: 30px;
				height: 30px;
			}
			
			.scan span {
				display: block;
				color: #fff;
				font-size: 14px;
			}

html代码：

注解：需要引用mui.min.js  and  mui.min.css

<div class="mask" id="mask"></div>
		<div class="mask2" id="mask2">
			<div id="scan1" class="scan">
				<img src="../img/click.png" />
				<span id="">
						手动选择本地图片
				</span>
			</div>
			<div id="scan2" class="scan">
				<img src="../img/scan_off.png" />
				<span id="">
						手电筒
				</span>
			</div>
		</div>

js代码：

                        var scan;
			if(window.plus) {
				plusready();
			} else {
				document.addEventListener('plusready', plusready, false);
			}

			function onmarked(type, result) { //回调
				if(result) {
					alert(result);
					scan.close();
					plus.webview.currentWebview().close();
				}
			}

			function plusready() {
				setTimeout(function() {
					
					scan = new plus.barcode.Barcode('mask');
					scan.start();
					
					scan.onmarked = function(type, result) {
						//截取字符
						var str=result;
						str=str.slice(3,14)
						if(str) {
							
							
							scan.close();
							plus.storage.setItem('str', str);
							 //获取当前页面
							var wn = plus.webview.currentWebview();
							//获取上一级页面（B页面）
							var wn = wn.opener();
							//传递消息返回的webview
							wn && wn.evalJS("var str = plus.storage.getItem('str');document.querySelector('#txtBarcodeNO').innerText = str;");							
							plus.webview.currentWebview().close();
						}
					};
				}, 200)
			
				//处理返回事件
				plus.key.addEventListener('backbutton', function() {
					plus.webview.currentWebview().close();
				})
			}
			//闪光灯
			document.querySelector('#scan2 img').addEventListener('click', function() {
				if(/scan_off.png/.test(this.src)) {
					this.src = "../img/scan_on.png";
					scan.setFlash(true);
				} else {
					this.src = "../img/scan_off.png";
					scan.setFlash(false);
				}
			})
			//添加本地图片
			document.querySelector('#scan1 img').addEventListener('click', function() {
				plus.gallery.pick(function(path) {
					console.log(path);
					console.log(JSON.stringify(path));
					plus.barcode.scan(path, onmarked, function(error) {
						plus.nativeUI.alert(JSON.stringify(error));
					});
				}, function(err) {
					plus.nativeUI.alert('Failed: ' + err.message);
				});
			})

这是点击跳转界面代码：

document.querySelector('#txtBarcodeNO').addEventListener('click',function(){
		var w = plus.webview.create('/html/Barcode.html', 'carcode1', {
			'titleNView': {
				'backgroundColor': '#262930',
				'titleText': '二维码扫描',
				'titleColor': '#FFFFFF',
				autoBackButton: true
			}
		});
		plus.webview.show(w, 'slide-in-right', '300ms');
	},false);

我根据网上查询到的代码然后整合出这个功能，如有雷同，只能说我想把希望之光点亮，希望能给你一点点作用，谢谢！！！

效果：