<template>
??<div?id="div_page">
????<div?class="scan">
??????<div?id="bcid"></div>
????</div>
??</div>
</template>
<script>
import?Vue?from?"vue";
import?{?Notify?}?from?"vant";
let?scan?=?null;
let?scanTip?=?null;
let?bFlash?=?null;
let?bAlbum?=?null;
//設(shè)置掃碼框樣式和位置
let?styles?=?{
??frameColor:?"#1294cb",
??scanbarColor:?"#1294cb",
??top:?"44px",
??left:?"0px",
??width:?"100%",
??height:?"100%",
??position:?"fixed",
??zindex:?1,
};
//設(shè)置掃碼格式
let?filter?=?[plus.barcode.QR];?//掃碼格式?空為全類型
export?default?{
??data?()?{
????return?{
??????codeUrl:?"",
??????flash:?false,
????};
??},
??mounted?()?{
????this.startRecognize();
????this.startScan();
????let?flag?=?this.isWindowBrowser();
????if?(!flag)?{
??????plus.key.addEventListener("backbutton",?this.backScan,?false);
????}
??},
??destroyed?()?{
????plus.key.removeEventListener("backbutton",?this.backScan,?false);
??},
??methods:?{
????backScan?()?{
??????scan.close();?//關(guān)閉條碼識別控件
??????scan.cancel();
??????scanTip.close();
??????bFlash.close();
??????bAlbum.close();
????},
????//創(chuàng)建掃描控件
????startRecognize?()?{
??????if?(!window.plus)?return;
??????scan?=?plus.barcode.create("bcid",?filter,?styles);
??????scan.onmarked?=?this.onmarked;
??????plus.webview.currentWebview().append(scan);
??????this.createView();
??????this.startScan();
????},
????createView?()?{
??????let?_this?=?this
??????//掃碼框下提示文字
??????scanTip?=?new?plus.nativeObj.View(
????????"scanTip",
????????{
??????????top:?"65%",
??????????left:?"5%",
??????????height:?"20%",
??????????width:?"90%",
????????},
????????[
??????????{
????????????tag:?"font",
????????????fontSrc:?'_www/helloh5.ttf',
????????????id:?"font",
????????????text:?"將手機(jī)和二維碼置于平行狀態(tài)即可自動掃描",
????????????textStyles:?{
??????????????size:?"16px",
??????????????color:?"#ffffff",
????????????},
????????????position:?{
??????????????width:?"100%",
????????????},
??????????},
????????]
??????);
??????//閃光燈
??????bFlash?=?new?plus.nativeObj.View('nbutton',?{
????????bottom:?'20px',
????????left:?'5%',
????????width:?'40%',
????????height:?'44px'
??????},?[{
????????tag:?'rect',
????????id:?'rect',
????????rectStyles:?{
??????????radius:?'8px',
??????????color:?'rgba(0,0,0,0.5)'
????????}
??????},?{
????????tag:?'font',
????????id:?'text',
????????text:?'閃光燈',
????????textStyles:?{
??????????color:?'#FFFFFF'
????????}
??????}]);
??????let?that?=?_this
??????bFlash.addEventListener('touchend',?function?(e)?{
????????that.flash?=?!that.flash;
????????scan.setFlash(that.flash);
??????},?false);
??????//相冊
??????bAlbum?=?new?plus.nativeObj.View('nbutton',?{
????????bottom:?'20px',
????????left:?'55%',
????????width:?'40%',
????????height:?'44px'
??????},?[{
????????tag:?'rect',
????????id:?'rect',
????????rectStyles:?{
??????????radius:?'8px',
??????????color:?'rgba(0,0,0,0.5)'
????????}
??????},?{
????????tag:?'font',
????????id:?'text',
????????text:?'相冊',
????????textStyles:?{
??????????color:?'#FFFFFF'
????????}
??????}]);
??????bAlbum.addEventListener('touchend',?function?(e)?{
????????plus.gallery.pick(
??????????function?(path)?{
????????????plus.barcode.scan(path,?that.onmarked,?function?(error)?{
??????????????plus.nativeUI.alert("無法識別此圖片");
????????????});
??????????},
??????????function?(err)?{
????????????plus.nativeUI.alert("請選擇正確的二維碼圖片");
??????????}
????????);
??????},?false);
??????plus.webview.currentWebview().append(scanTip);
??????plus.webview.currentWebview().append(bFlash);
??????plus.webview.currentWebview().append(bAlbum);
????},
????onmarked?(type,?result,?file)?{
??????result?=?result.replace(/\n/g,?"");
??????this.codeUrl?=?result;
??????if?(result?!=?"")?{
????????this.scanSuccess();
??????}
????},
????//開始掃描
????startScan?()?{
??????if?(!window.plus)?return;
??????scan.start();
????},
????//掃描成功后帶參數(shù)跳轉(zhuǎn)
????scanSuccess?()?{
??????let?arr?=?[];
??????let?result?=?this.codeUrl;
console.log("result?")
//關(guān)閉組件，不然會繼續(xù)顯示
??????scan.cancel();
??????scan.close();
??????scanTip.close();
??????bFlash.close();
??????bAlbum.close();
????},
??},
};
</script>
以上就是h5 barcode的實(shí)現(xiàn)代碼虏缸，目前問題是無法在view視圖層顯示圖片，正在解決颂翼。歡迎大家提問或者給出解決意見缘挑。
原生控件對象可用于在屏幕上繪制圖片或文本內(nèi)容，當(dāng)控件不再使用時需要調(diào)用close方法銷毀控件。
NView不支持zindex颅筋，后顯示的覆蓋先顯示的；
調(diào)用Webview窗口對象的append方法添加到Webview中瞳收，顯示在父窗口所有子Webview的上面；不添加到Webview窗口對象设凹，顯示在所有Webview的上面锄开。
