最近在做uniapp的項(xiàng)目,其中有需要掃碼的東西,踩了不少坑。
我們這里介紹一下,uni.scanCode,這個(gè)掃碼非常簡(jiǎn)單,而且是全屏掃碼,支持從相冊(cè)選取,只需要按照如下格式寫(xiě),其中res.result就是掃碼后的結(jié)果。
但是,因?yàn)槭侨?,而且?huì)單獨(dú)打開(kāi)一個(gè)掃碼頁(yè)面,掃碼后如果對(duì)成功事件沒(méi)有后續(xù)代碼,則會(huì)返回原頁(yè)面觸發(fā)原頁(yè)面的onshow,另外,這個(gè)方法沒(méi)法調(diào)整掃碼頁(yè)面的樣式。
接下來(lái)再說(shuō)一個(gè)掃碼的方法。Barcode,官方對(duì)他的解釋是,app端nvue專(zhuān)用的掃碼組件。
這個(gè)是一個(gè)內(nèi)嵌的掃碼,所以能夠控制掃碼頁(yè)面的事件和樣式。
需要使用barcode組件作為載體,如下為官網(wǎng)的例子。
<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>
使用方法直接使用this.$refs.barcode.start,即可調(diào)用,與全屏掃碼不同,因?yàn)槭莾?nèi)嵌掃碼所以可以調(diào)整樣式。
了解更多uniapp知識(shí)點(diǎn)擊這里。