更新记录

1.0.1（2025-06-13）

优化

1.0.0（2025-06-11）

扫码插件 - UTS版（毫秒级、连续扫码、多码、拍照）

平台兼容性

uni-app

uni-app x

扫码插件 - UTS版（毫秒级、连续扫码、多码、拍照）ba-scanview2-u

简介

ba-scanview2-u 是一款毫秒级扫码插件，采用组件模式，可直接在界面引用，高宽可随意设置；支持抓拍照片。

• 支持连续扫码，可设置时间间隔
• 支持多码选择
• 支持设置扫码格式
• 支持打开、关闭闪光灯
• 支持相册图片识别
• 支持关闭和打开扫描
• 支持多码直接返回
• 支持前置、后置摄像头
• 支持拍照
• 新增支持获取扫码成功的那一帧照片

支持定制，有建议和需要，请联系QQ：2579546054

也可关注博客，实时更新最新插件：

uniapp 常用原生插件大全

扫码原生插件 - 新版（支持连续扫码模式；支持设置格式；可任意自定义界面）Ba-Scanner

扫码原生插件 - 基础版（毫秒级、支持多码）Ba-Scanner-G

扫码原生插件 - 组件版（毫秒级、连续扫码、多码、相册）Ba-ScanView

扫码原生插件 - 组件版（毫秒级、连续扫码、多码、相册、新增支持拍照）Ba-ScanView2

扫码原生插件 - 组件版（华为、连续扫码、多码、相册、新增支持抓拍图片）Ba-ScanViewH

扫码原生插件 - （最经典zxing版本）Ba-Scanner-Zxing

使用方法

在 template 中引入组件

    <view class="container">
        <ba-scanview2-u ref="scanView" class="scan-view" :isShowToast="isShowToast" :zoom="zoom" :scanColor="scanColor"
            :isSaveScanImg="isSaveScanImg" @onScanResult="onScanResult" @onTakePicture="onTakePicture"
            @onTakePhoto="onTakePhoto"></ba-scanview2-u>
        <scroll-view style="flex: 1;">
            <view class="btn" @click="openScanLight">打开闪光灯</view>
            <view class="btn" @click="closeScanLight">关闭闪光灯</view>
            <view class="btn" @click="openAlbumPage">相册识别</view>
            <view class="btn" @click="closeScan">关闭扫描</view>
            <view class="btn" @click="openScan">开启扫描</view>
            <view class="btn" @click="closeCamera">关闭摄像头</view>
            <view class="btn" @click="openCamera">打开摄像头</view>
            <view class="btn" @click="takePicture">拍照（相机）</view>
            <view class="btn" @click="takePhoto">拍照（和预览一样）</view>
            <view class="btn" @click="takePhoto2">拍照（全图）</view>
            <view class="btn" @click="zoomTo">zoomTo</view>
            <view class="" v-for="msg in msgList">
                {{msg}}
            </view>
        </scroll-view>
    </view>

在 script 中调用（示例参考，可根据自己业务和调用方法自行修改）

    export default {
        data() {
            return {
                isShowVibrate:true,//扫描完成震动
                isShowBeep:true,//扫描完成声音
                zoom:true,//是否支持手势缩放
                scanColor:"#FF0000",//扫描线的颜色
                hintText:"扫二维码/条形码  ",//提示文案
                hintTextColor:"#FF0000",//提示文案颜色
                hintTextSize:14,//提示文案字体大小
                scanGrid:true,//扫描线样式是否为网格
                gridScanLineColumn:30,//网格扫描线的列数
                gridScanLineHeight:300,//网格高度
                scanTimeSpace: 1500, //扫码时间间隔
                isDirScanMulti: true,//是否直接返回多码，默认false（弹窗多码标识，用户自己选择）
                isSaveScanImg: true,//返回识别成功的那一帧照片
                msgList: [] as Array<string>

            }
        },
        methods: {
            onScanResult(result : Map<string, any>) {//扫码返回
                console.log("onScanResult")
                console.log(result)
                let result1 = result.get('result')
                if (result1 != null)
                    this.msgList.unshift(JSON.stringify(result1));
            },
            onTakePicture(result : Map<string, any>) {//拍照（相机）返回
                console.log("onTakePicture")
                console.log(result)
                let path = result.get('path')
                this.msgList.unshift(JSON.stringify(path));
            },
            onTakePhoto(result : Map<string, any>) {//拍照（截帧）返回
                console.log("onTakePhoto")
                console.log(result)
                let path = result.get('path')
                this.msgList.unshift(JSON.stringify(path));
            },
            openScanLight() { //打开闪光灯
                (this.$refs["scanView"] as BaScanview2UElement).openScanLight();
            },
            closeScanLight() { //关闭闪光灯
                (this.$refs["scanView"] as BaScanview2UElement).closeScanLight();
            },
            openAlbumPage() {
                (this.$refs["scanView"] as BaScanview2UElement).openAlbumPage();
            },
            closeScan() {
                (this.$refs["scanView"] as BaScanview2UElement).closeScan();
            },
            openScan() {
                (this.$refs["scanView"] as BaScanview2UElement).openScan();
            },
            openCamera() {
                (this.$refs["scanView"] as BaScanview2UElement).openCamera();
            },
            closeCamera() {
                (this.$refs["scanView"] as BaScanview2UElement).closeCamera();
            },
            zoomTo() {
                (this.$refs["scanView"] as BaScanview2UElement).zoomTo(5);
            },
            takePicture() {
                let path = "/storage/emulated/0/Android/data/uni.UNI4D392B9/files/temp1.jpg";
                //(this.$refs["scanView"] as BaScanview2UElement).takePicture(path, false, 0);
                (this.$refs["scanView"] as BaScanview2UElement).takePicture();
            },
            takePhoto() {
                let path = "/storage/emulated/0/Android/data/uni.UNI4D392B9/files/temp2.jpg";
                (this.$refs["scanView"] as BaScanview2UElement).takePhoto(path, false, 0);
            },
            takePhoto2() {
                let path = "/storage/emulated/0/Android/data/uni.UNI4D392B9/files/temp3.jpg";
                (this.$refs["scanView"] as BaScanview2UElement).takePhoto(path, true, 0);
            }
        }
    }

开发文档

UTS 语法 UTS API插件 UTS 组件插件 Hello UTS