vue+barcode實現掃一掃功能

附上barcode參考文檔添加鏈接描述
使用它很大一個優點：能快速方便調用設備的攝像頭進行條碼掃描識別，而不需要安裝額外的掃描插件。

主要弄明白他兩個方法和成功回調差不多功能技能實現了


回調裏面的type是碼的類型，result是掃出來的地址
拿到result我們一般是希望他可以通過跳轉鏈接，如果直接用plus.runtime.openURL(urlStr);的話跳不過去，給他賦給一個變量就好了

上代碼

<template>
	<div class="msgbox">
		<div class="header">
			<i class="mui-icon mui-icon-back" @click="back"></i>
		</div>
		<div id="code">
			<div style="width:14rem;height:14rem; background-color: #fff; margin: 15% auto 5%; text-align: center"></div>
			<p class="tip" style="text-align: center">...載入中...</p>
		</div>
		<p>將二維碼放入框內，即可自動掃描</p>
		<div class="sweep" @click="sweep">開始掃碼</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				scan: ""
			}
		},
		mounted() {
			const self = this
			if (window.plus) {
				self.plusReady()
			} else {
				document.addEventListener('plusready', self.plusReady, false);
			}
			document.addEventListener('DOMContentLoaded', function() {
				alert('DOMLoaded')
				self.domready = true;
				self.plusReady()
			}, false)
		},
		methods: {
			//   點擊返回並關閉
			back: function() {
				this.$router.push({
					path: "/home"
				})
			},
			plusReady() {
				const self = this
				// 獲取窗口               
				self.scan = new plus.barcode.Barcode('code');
				self.scan.onmarked = self.onmarked;
				console.log(self.scan)
			},

			sweep() {
				const self = this
				self.scan.start();
			},

			onmarked(type, result) {
				var text = '未知: ';

				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, '')

				if (result.indexOf('http://') == 0 || result.indexOf('https://') == 0) {
					plus.nativeUI.confirm("二維碼類型：" + type + "\n掃描結果：" + result, function(i) {
						if (i.index == 0) {
							var urlStr = encodeURI(result)
							plus.runtime.openURL(urlStr);
						} else {
							self.back(); //返回上個頁面  
						}
					}, '', ['打開', '取消']);
				} else {
					self.back(); //返回上個頁面  
					plus.nativeUI.alert("二維碼類型：" + type + "\n掃描結果：" + result + "\n文件路徑：" + f)
				}
			}
		},
	}
</script>

效果圖



打開之後是這樣