更新记录

1.1.1（2023-09-11）

修复个别打包依赖冲突

1.1.0（2023-09-07）

1、支持gs1-*类型得条码 2、修复已知问题

1.0.3（2021-11-23）

  • 1、支持设置连扫和单扫
  • 2、支持属性和方法设置扫描框的样式
  • 3、支持二维码和条形码样式切换
查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间：4.4 - 11.0 armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试 ×

原生插件通用使用流程：

  1. 购买插件，选择该插件绑定的项目。
  2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

扫码组件使用文档

一、简介

扫码组件ScanView是基于android原生SDK制作的扫码功能组件，用于高度订制扫码功能。主要能识别各种条形码和二维码，速度极快，接口封装良好，能根据自己的界面和功能高度订制。

二、特点

  • 可定制各式各样的扫描框
  • 可定制全屏扫描或只识别扫描框区域内码
  • 可定制要识别的码的格式
  • 可以控制闪光灯，方便夜间使用
  • 可以设置用前置摄像头扫描
  • 可以二指缩放预览
  • 可以监听环境亮度，提示用户打开、关闭闪光灯
  • 识别到比较小的码时自动放大

三、集成使用

组件使用：创建 nvue 文件；配置中引入插件；制作自定义基座；运行在自定义基座；真机测试

  • 1、在自己的页面嵌入组件
<template>
    <view>
        <!-- ref:定义view的变量; -->
        <ScanView ref="scanView" :scanAttribute="scanAttribute" :style="setWidth" @onScanResult="onScanResult"></ScanView>
    </view>
</template>
  • 2、自定义样式(具体支持请参考下面列出的属性)
scanAttribute: {
                    "style": 1,
                    "borderColor": "#99FF44",
                    "tipText": "自定义提示文字",
                    "cornerColor": "#FF9947"
                }
  • 3、监听扫码回调
//扫描成功回调
            onScanResult(e){
                modal.toast({
                    message: e.detail.code,
                    duration: 1.5
                });
                console.log("onScanResult=" + e.detail.code);
            }
  • 4、完整实例
<template>
    <button @click="hideScanRecf">切换摄像头</button>
    <button @click="setContinuousScan">设置连扫</button>
    <button @click="setScanLineColor">设置扫描线颜色</button>
    <button @click="setScanType">设置扫描类型</button>
    <view>
        <!-- ref:定义view的变量; -->
        <ScanView ref="scanView" :scanAttribute="scanAttribute" :style="setWidth" @onScanResult="onScanResult"></ScanView>
    </view>
</template>

<script>
    const modal = uni.requireNativePlugin('modal');

    export default {
        data() {
            return {
                //自定义属性
                scanAttribute: {
                    "style": 1,
                    "borderColor": "#99FF44",
                    "tipText": "自定义提示文字",
                    "cornerColor": "#FF9947",
                    "rectWidth":480,//扫描框的宽度
                    "rectHeight":320,//扫描框的高度
                    "scanLineSize":2,//扫描线的宽度
                    "scanLineColor":"#0099FF",//扫描线的颜色
                    "isFront": false,
                    "isAutoZoom":true,
                    "isContinuousScan": false
                },
                setWidth: {},
                isFront:false
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: (res) => {
                    this.$nextTick(() => {
                        this.setWidth = {
                            width: res.windowWidth + 'px',
                            height: res.windowHeight + 'px'
                        }
                    })
                }
            });
        },
        methods: {          
            //调用ScanView方法
            hideScanRecf(e) {           
                this.$refs.scanView.startCamera(true);
            },
            //调用设置连扫与单扫的方法
            setContinuousScan(){
                //true表示连扫，false表示单扫，扫码一次就结束
                this.$refs.scanView.setContinuousScan(true);
            },
            //调用设置连扫与单扫的方法
            setScanLineColor(){
                //true表示连扫，false表示单扫，扫码一次就结束
                this.$refs.scanView.setScanLineColor({"scanLineColor":"#0099FF"});
            },
            //设置类型
            setScanType(){
                //0识别所有一维码和二维码；1只识别一维码；2只识别二维码 3 支持gs1并兼容其他
                this.$refs.scanView.setScanType(3);
            },
            //扫描成功回调
            onScanResult(e) {
                modal.toast({
                    message: e.detail.code,
                    duration: 1.5
                }); 
                //跳转扫码网址
                //plus.runtime.openURL(e.detail.code);              
                console.log("onScanResult=" + e.detail.code);
            }
        }
    }
</script>

四、支持的属性和方法

  • 1、属性
scanAttribute: {
                    "style": 1,//1表示条形码，否则二维码
                    "topOffset":60,//扫描框距离toolbar底部的距离
                    "cornerSize":3,//扫描框边角线的宽度
                    "cornerLength":20,//扫描框边角线的长度
                    "cornerColor": "#FF9947",//扫描框边角线的颜色
                    "rectWidth":200,//扫描框的宽度
                    "rectHeight":200,//扫描框的高度
                    "barcodeRectHeight":150,//条形码扫描框高度
                    "scanLineSize":2,//扫描线的宽度
                    "scanLineColor":"#FFFFFF",//扫描线的颜色
                    "borderSize":1,//扫描边框的宽度
                    "borderColor":"#99FF44",//扫描边框的颜色
                    "tipText":"将码放入扫描框，自动扫码",//提示文字
                    "tipTextSize":12,//提示文字大小
                    "tipTextColor":"#FFFFFF",//提示文字颜色
                    "tipTextMargin":10,//提示文字与扫描框之间的间距
                    "tipBackgroundRadius":3,//提示文字背景圆角
                    "tipBackgroundColor":"#000000",//提示文字背景颜色
                    "isShowTipBackground":true,//是否显示提示文字的背景
                    "isTipTextBelowRect":true,//提示语是否在下方
                    "isAutoZoom":true,//扫码时是否根据距离放大与缩小
                    "isShowLocationPoint":false,//是否显示定位点，
                    "isFront": false, //是否前置摄像头
                    "isContinuousScan":false //是否连扫
                }
  • 2、方法
    /**
     * 开启预览
     */
    startCamera();

    /**
     * 停止预览
     */
    stopCamera();

    /**
     * 显示扫描框
     */
    showScanRect();

    /**
     * 隐藏扫描框
     */
    hiddenScanRect();

    /**
     * 开始识别
     */
    startSpot();

    /**
     * 停止识别
     */
    stopSpot();

    /**
     * 显示扫描框，并且开始识别
     */
    startSpotAndShowRect();

    /**
     * 停止识别，并且隐藏扫描框
     */
    stopSpotAndHiddenRect();

    /**
     * 识别范围
     *
     * @param isOnlyScanBox true:仅仅识别扫描框；false：全屏识别
     */
    setOnlyDecodeScanBoxArea(boolean isOnlyScanBox);

    /**
     * 打开闪光灯
     */
    openFlashlight();

    /**
     * 关闭闪光灯
     */
    closeFlashlight() ;

    /**
     * 切换成扫描条码样式
     */
    changeToScanBarcodeStyle();

    /**
     * 切换成扫描二维码样式
     */
    changeToScanQRCodeStyle();

    /**
     * 设置识别码类型：0识别所有一维码和二维码；1只识别一维码；2只识别二维码，3 GS1以及兼容其他
     */
    setScanType(int scanType);

    /**
     * 识别图片
     *
     * @param picturePath 手机图片路径
     */
    decodeQRCode(String picturePath);

    /**
     * 设置连扫与单扫
     *
     * @param isContinuousScan true:连扫；false：单扫
     */
    setContinuousScan(boolean isContinuousScan);

方法的使用，参考示例中的调用方法即可！

五、订制服务

  • QQ：690898091
  • 微信：qq690898091

隐私、权限声明

1. 本插件需要申请的系统权限列表：

需要相机权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...