app場景下uniapp的掃碼記錄

更新時間：2022年07月21日 10:47:11 作者：向乾看

這篇文章主要為大家介紹了app場景下uniapp的掃碼記錄實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

背景

掃碼需求日益增多，為了滿足客戶的需求，掃碼演變的多種多樣，其中有二維碼，條形碼居中，條形碼又可以細(xì)分成幾種,以下記錄全屏和自定義頁面掃碼的在uniapp的技術(shù)實(shí)現(xiàn)

全屏掃碼

uniapp自身帶的api方法-uni.scanCode

uni.scanCode(OBJECT)

h5平臺暫不支持這種形式調(diào)起全屏

掃碼的格式基本滿足日常需求，但是一些格式的碼還是沒有得到支持

代碼示例如下：

// 允許從相機(jī)和相冊掃碼
uni.scanCode({
	success: function (res) {
		console.log('條碼類型：' + res.scanType);
		console.log('條碼內(nèi)容：' + res.result);
	}
});
// 只允許通過相機(jī)掃碼
uni.scanCode({
	onlyFromCamera: true,
	success: function (res) {
		console.log('條碼類型：' + res.scanType);
		console.log('條碼內(nèi)容：' + res.result);
	}
});
// 調(diào)起條碼掃描
uni.scanCode({
	scanType: ['barCode'],
	success: function (res) {
		console.log('條碼類型：' + res.scanType);
		console.log('條碼內(nèi)容：' + res.result);
	}
});

優(yōu)點(diǎn)：方便快捷調(diào)起全屏掃碼

缺點(diǎn)：支持碼的種類不多，掃碼效率比不過微信、支付寶等商業(yè)掃碼庫。如需更強(qiáng)的掃碼效果，參考下方的支付寶插件掃碼

支付寶插件掃碼

針對app場景，我們使用全屏掃碼，可以使用支付寶提供的掃碼插件，具體接入，可參考我上一篇 uniapp接入支付寶掃碼 ,這個的速度和識別率基本是業(yè)內(nèi)頂尖,特別提醒接入掃一掃這個服務(wù)本身是免費(fèi)的，但是假如你要開啟掃碼檢測，日志記錄的話，這些就要額外收費(fèi)，這點(diǎn)大家根據(jù)需求來，但是大部分情況，作為免費(fèi)測試的話，大家記得關(guān)閉這些額外收費(fèi)的功能

tip:接入這個插件要先自定義基座再打包，不然運(yùn)行不生效

var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
mpaasScanModule.mpaasScan({
                        // 掃碼識別類型，參數(shù)可多選，qrCode、barCode，不設(shè)置，默認(rèn)識別所有
                        'scanType':  ['qrCode','barCode'],
                        // 是否隱藏相冊，默認(rèn)false不隱藏
                        'hideAlbum': false
                    },
                    (ret) => {
                        uni.showModal({
                            title: "彈窗標(biāo)題",
                            // 返回值中，resp_code 表示返回結(jié)果值，10：用戶取消，11：其他錯誤，1000：成功
                            // 返回值中，resp_message 表示返回結(jié)果信息
                            // 返回值中，resp_result 表示掃碼結(jié)果，只有成功才會有返回
                            content: JSON.stringify(ret),
                            showCancel: false,
                            confirmText: "確定"
                        })
                    })

優(yōu)點(diǎn)：支持掃碼的格式多，基本涵蓋各類碼

缺點(diǎn)：uniapp暫時只支持全屏，希望官方可以推出自定義掃碼

自定義掃碼

自定義掃碼的場景也是在市場上的需求占有一定的分量，例如快遞員的快遞app，經(jīng)常一個頁面嵌套一個半頁的掃碼框，掃完之后的內(nèi)容load在下面，直接可視化觀看！

uniapp nvue自帶的Barcode

app端nvue專用的掃碼組件。

App下純nvue項(xiàng)目（manifest中renderer為native），暫不支持uni.scanCode API，此時只能使用barcode組件來替代。
此組件自HBuilderX 2.1.5+起支持。

<barcode id='1' class="barcode" autostart="true" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE" scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>

<template>
	<view>
		<barcode id='1' class="barcode" autostart="true" ref="barcode" background="rgb(0,0,0)" frameColor="#1C86EE" scanbarColor="#1C86EE" :filters="fil" @marked="success1" @error="fail1"></barcode>
		<button class="btn" @click="toStart">開始掃碼識別</button>
		<button class="btn" @click="tocancel">取消掃碼識別</button>
		<button class="btn" @click="toFlash">開啟閃光燈</button>
		<button class="btn" @click="toscan">預(yù)覽</button>
	</view>
</template>
<script>
	export default {
		onLoad() {
		},
		data() {
			return {
				fil: [0, 2, 1]
			}
		},
		methods: {
			success1(e) {
				console.log("success1:" + JSON.stringify(e));
			},
			fail1(e) {
				console.log("fail1:" + JSON.stringify(e));
			},
			toStart: function() {
				this.$refs.barcode.start({
					conserve: true,
					filename: '_doc/barcode/'
				});
			},
			tocancel:function(){
				this.$refs.barcode.cancel();
			},
			toFlash: function() {
				this.$refs.barcode.setFlash(true);
			},
			toscan: function() {
				console.log("scan:");				
				const barcodeModule = uni.requireNativePlugin('barcodeScan');
				barcodeModule.scan("/static/barcode1.png"
				,(e)=>{
					console.log("scan_error:"+JSON.stringify(e));
				});
			}
		}
	}
</script>
<style>
	.barcode {
		width: 750rpx;
		height: 700rpx;
		background-color: #808080;
	}
	.btn {
		top: 20rpx;
		width: 730rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
		background-color: #458B00;
		border-radius: 10rpx;
	}
</style>

優(yōu)點(diǎn)：該場景可以自由設(shè)置寬高嵌套在頁面
缺點(diǎn)：有時候處理不當(dāng)容易黑屏，容易樣式錯亂

操作原生的可視化控件Barcode

uni-app可以調(diào)用plus的api操作擴(kuò)展能力，這塊很簡單，在app的條件編譯里直接寫就好了，也不需要plus ready。但是HTML5 里有很多原生的可視化控件，包括map、video、livepusher、barcode、nview（包括原生頭、原生tab），獲取這些對象和操作他們需要有特殊寫法。

5+app開發(fā)時，我們可以用plus.webview.currentWebview獲取當(dāng)前頁面，但uni-app里用法不一樣，需要這樣取當(dāng)前顯示的webview：

const currentWebview = this.$mp.page.$getAppWebview(); //注意相關(guān)操作寫在APP-PLUS條件編譯下

還有一種寫法比較冗余，可以獲取頁面棧中任意一個webview對象：

var pages = getCurrentPages();  
var page = pages[pages.length - 1];  
// #ifdef APP-PLUS  
var currentWebview = page.$getAppWebview(); //頁面棧最頂層就是當(dāng)前webview  
// #endif

注意uni-app不需要像5+App那樣等待plus ready，可以直接用。核心代碼：

var barcode = plus.barcode.create('barcode', [plus.barcode.QR], {  
    top:'100px',  
    left:'0px',  
    width: '300px',  
    height: '300px',  
    position: 'static'  
});  
//此處未演示掃碼成功回調(diào)的地址設(shè)置，實(shí)際請參考HTML5Plus API自行處理  
//注意掃碼區(qū)域需為正方形，否則影響掃碼識別率  
currentWebview.append(barcode);

這也是目前比較穩(wěn)定的自定義掃碼

優(yōu)點(diǎn)：穩(wěn)定識別率高，自由度高

缺點(diǎn)：需要自己進(jìn)行封裝組件，可能沒有上面的單純的調(diào)用，更多依靠自己的封裝組件能力

這篇記錄了全屏掃碼，自定義掃碼分別兩種方式來記錄，請大家各取所需，有什么更好的，歡迎大家踴躍評論，這篇只是講了app場景，假如是h5選項(xiàng)的情況，以上的記錄可能將不適用，更多關(guān)于uniapp掃碼記錄的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: