app場景下uniapp的掃碼記錄
背景
掃碼需求日益增多,為了滿足客戶的需求,掃碼演變的多種多樣,其中有二維碼,條形碼居中,條形碼又可以細(xì)分成幾種,以下記錄全屏和自定義頁面掃碼的在uniapp的技術(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ào)起全屏掃碼
缺點:支持碼的種類不多,掃碼效率比不過微信、支付寶等商業(yè)掃碼庫。如需更強(qiáng)的掃碼效果,參考下方的支付寶插件掃碼
支付寶插件掃碼
針對app場景,我們使用全屏掃碼,可以使用支付寶提供的掃碼插件,具體接入,可參考我上一篇 uniapp接入支付寶掃碼 ,這個的速度和識別率基本是業(yè)內(nèi)頂尖,特別提醒接入掃一掃這個服務(wù)本身是免費的,但是假如你要開啟掃碼檢測,日志記錄的話,這些就要額外收費,這點大家根據(jù)需求來,但是大部分情況,作為免費測試的話,大家記得關(guān)閉這些額外收費的功能
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)點:支持掃碼的格式多,基本涵蓋各類碼
缺點:uniapp暫時只支持全屏,希望官方可以推出自定義掃碼
自定義掃碼
自定義掃碼的場景也是在市場上的需求占有一定的分量,例如快遞員的快遞app,經(jīng)常一個頁面嵌套一個半頁的掃碼框,掃完之后的內(nèi)容load在下面,直接可視化觀看!
uniapp nvue自帶的Barcode
app端nvue專用的掃碼組件。
- App下純nvue項目(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)點:該場景可以自由設(shè)置寬高嵌套在頁面
缺點:有時候處理不當(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è)置,實際請參考HTML5Plus API自行處理 //注意掃碼區(qū)域需為正方形,否則影響掃碼識別率 currentWebview.append(barcode);
這也是目前比較穩(wěn)定的自定義掃碼
優(yōu)點:穩(wěn)定識別率高,自由度高
缺點:需要自己進(jìn)行封裝組件,可能沒有上面的單純的調(diào)用,更多依靠自己的封裝組件能力
這篇記錄了全屏掃碼,自定義掃碼分別兩種方式來記錄,請大家各取所需,有什么更好的,歡迎大家踴躍評論,這篇只是講了app場景,假如是h5選項的情況,以上的記錄可能將不適用,更多關(guān)于uniapp掃碼記錄的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript?Broadcast?Channel?API使用學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript的api學(xué)習(xí)之Broadcast?Channel?API使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05JavaScript數(shù)組對象高階函數(shù)reduce的妙用詳解
這篇文章主要為大家介紹了JavaScript數(shù)組對象高階函數(shù)reduce的妙用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04純js實現(xiàn)高度可擴(kuò)展關(guān)鍵詞高亮方案詳解
這篇文章主要為大家介紹了純js實現(xiàn)高度可擴(kuò)展關(guān)鍵詞高亮方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序 scroll-view組件實現(xiàn)列表頁實例代碼
這篇文章主要介紹了微信小程序 scroll-view組件實現(xiàn)列表頁實例代碼的相關(guān)資料,scroll-view組件介紹scroll-view是微信小程序提供的可滾動視圖組件,其主要作用是可以用來做手機(jī)端經(jīng)常會看到的上拉加載 ,需要的朋友可以參考下2016-12-12JS前端宏任務(wù)微任務(wù)及Event Loop使用詳解
這篇文章主要為大家介紹了JS前端宏任務(wù)微任務(wù)及Event Loop使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07