咨询电话:
15628812133
13
2025/06

uniapp中调用相机扫码

发布时间:2025-06-13 17:26:36
发布者:dzw
浏览量:
0

最近在做uniapp的项目,其中有需要扫码的东西,踩了不少坑。

我们这里介绍一下,uni.scanCode,这个扫码非常简单,而且是全屏扫码,支持从相册选取,只需要按照如下格式写,其中res.result就是扫码后的结果。

但是,因为是全屏,而且会单独打开一个扫码页面,扫码后如果对成功事件没有后续代码,则会返回原页面触发原页面的onshow,另外,这个方法没法调整扫码页面的样式。

uniapp中调用相机扫码

接下来再说一个扫码的方法。Barcode,官方对他的解释是,app端nvue专用的扫码组件。

这个是一个内嵌的扫码,所以能够控制扫码页面的事件和样式。

需要使用barcode组件作为载体,如下为官网的例子。

<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>

uniapp中调用相机扫码

使用方法直接使用this.$refs.barcode.start,即可调用,与全屏扫码不同,因为是内嵌扫码所以可以调整样式。

uniapp中调用相机扫码

        了解更多uniapp知识点击这里

    上一篇: vue中实现瀑布流
    下一篇: 没有了
    关键词:
    返回列表