更新记录

1.1.0(2023-06-12)

本次主要更新: 1.增加andorid版本,使用google MLKit 扫码sdk

1.0.0(2023-06-08)

新版首发


平台兼容性

Android Android CPU类型 iOS
适用版本区间:5.0 - 12.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:11 - 16

原生插件通用使用流程:

  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原生插件配置”->”云端插件“列表中删除该插件重新选择


KJ-SystemScan

系统自带扫码、支持前置摄像头、持续扫码、解析条形码二维码、多码识别、完全自定义扫码界面

使用

<template>
    <view class="content">
        <button type="primary" @click="start2">跳转完全自定义扫码界面</button>
        <button type="primary" @click="multiDecodeForImage">根据图片识别(多个码)</button>
        <view class="json">{{json}}</view>
    </view>
</template>

<script>
    var KJSystemScan = uni.requireNativePlugin("KJ-SystemScan");
    export default {
        data() {
            return {
                json: null
            }
        },
        onLoad() {

        },
        methods: {
            start2() {
                uni.navigateTo({
                    url: "scan"
                })
            },
            multiDecodeForImage() {
                /**
                 * scanTypes - 扫码类型 不传或为null的话,支持所有
                 * ios:Aztec,Code39,Code93,Code128,DataMatrix,EAN8,EAN13,ITF14,PDF417,QR,UPCE,Interleaved2of5,Codabar,
                 * ios15.4之后才有效:GS1DataBar,GS1DataBarExpanded,GS1DataBarLimited,MicroQR,MicroPDF417
                 * andorid:Aztec,Code39,Code93,Code128,DataMatrix,EAN8,EAN13,ITF14,PDF417,QR,UPCA,UPCE,Codabar
                 * */
                var dic = {
                    //"scanTypes": ["Code128", "Code93", "QR"],
                    "filePath": plus.io.convertLocalFileSystemURL("static/duoCode.png")
                }
                KJSystemScan.multiDecodeForImage(dic, (res) => {
                    console.log("multiDecodeForImage:" + JSON.stringify(res));
                    this.json = JSON.stringify(res)
                    /**
                     * 返回json字段说明:
                     * {"result":[{"scanType":"QR","descriptor":{"errorCorrectionLevel":"H","symbolVersion":3},"scanResult":"http://m3w.cn/uniapp"},
                     *{"scanType":"QR","descriptor":{"errorCorrectionLevel":"M","symbolVersion":4},"scanResult":"https://so.mp.360.cn/mp.html?appid=qh4j181qqtru354st6"},
                     *{"scanType":"QR","descriptor":{"errorCorrectionLevel":"H","symbolVersion":4},"scanResult":"https://hellouniapp.dcloud.net.cn/"},
                     *{"scanType":"QR","descriptor":{"errorCorrectionLevel":"M","symbolVersion":6},"scanResult":"sslocal://microapp?version=v2&app_id=tt142f62928b05a12e&scene=0&version_type=current&bdpsum=d2258a4?a=b"},
                     *{"scanType":"QR","descriptor":{"errorCorrectionLevel":"H","symbolVersion":9},"scanResult":"https://smartapp.baidu.com/mappconsole/api/packagescheme?appKey=oGv0Dt2n4ISDAtHov5lB0O4OALcQ4Hji"},{
                     *"scanType":"QR","descriptor":{"errorCorrectionLevel":"M","symbolVersion":6},"scanResult":"https://miniapi.gifshow.com/rest/miniapi/scheme?id=CsJGbyfuCOHlZtbOKRMcs&env=release&bizType=1"},
                     *{"scanType":"QR","descriptor":{"errorCorrectionLevel":"H","symbolVersion":6},"scanResult":"https://itunes.apple.com/cn/app/hello-uni-app/id1417078253"},
                     *{"scanType":"QR","descriptor":{"errorCorrectionLevel":"H","symbolVersion":6},"scanResult":"https://qr.alipay.com/s6x08417vz8pjz3ss3auo2b"}],"error":null}
                     * 
                     * andorid:{"result":[{"scanResult":"http://m3w.cn/uniapp","scanType":"QR",
                     * "other":{"cornerPoints":[{"y":944,"x":415},{"y":914,"x":732},{"y":1252,"x":781},{"y":1271,"x":460}],
                     * "boundingBox":{"empty":false,"right":781,"left":415,"bottom":1271,"top":914}}}]}
                     * 
                     * scanResult - 扫码结果
                     * scanType - 码类型
                     * */
                })
            }
        }
    }
</script>
<style>
    .json {
        word-wrap: break-word;
    }
</style>

完全自定义扫码界面nvue

    <template>
        <view class="content">
            <KJ-SystemScan class="systemScan" ref="systemScan" :style="{width:'100%',height:palyerHeight}">
            </KJ-SystemScan>
            <view class="head" :style="{top:headTo}">
                <image class="back" src="../../static/back.png" @click="backClick"></image>
                <text class="text">扫一扫</text>
                <image class="album" src="../../static/scanAlbum.png" @click="albumClick"></image>
            </view>
            <view class="light" @click="lightClick">
                <image class="light_image" :src="isLightOn?'../../static/lightOn.png':'../../static/lightOff.png'"></image>
                <text class="text">{{isLightOn?'轻触关闭':'轻触照亮'}}</text>
            </view>
            <view class="btns">
                <button class="btn" type="primary" @click="init2">初始化扫码线效果、前置摄像头扫码</button>
                <button class="btn" type="primary" @click="init3">初始化扫码线效果2、后置摄像头扫码</button>
                <!-- <button class="btn" type="primary" @click="onScanForResult">监听扫码结果</button> -->
                <button class="btn" type="primary" @click="pauseContinuouslyScan">暂停持续扫码</button>
                <button class="btn" type="primary" @click="resumeContinuouslyScan">恢复持续扫码</button>
                <!-- <button class="btn" type="primary" @click="getLightStatus">获取闪光灯状态</button>
                <button class="btn" type="primary" @click="switchLight">切换闪光灯</button> -->
            </view>
        </view>
    </template>

    <script>
        var KJSystemScan = uni.requireNativePlugin("KJ-SystemScan");
        export default {
            data() {
                return {
                    palyerHeight: uni.getSystemInfoSync().screenHeight,
                    headTo: uni.getSystemInfoSync().statusBarHeight,
                    lightSrc: "../../static/ug_torch_off_img.png",
                    isLightOn: false,
                    oldScanResults: null,
                    oldScanTypes: null
                }
            },
            onLoad() {
                if (plus.os.name == 'Android') {
                    plus.android.requestPermissions(
                        ['android.permission.CAMERA',
                            "android.permission.READ_EXTERNAL_STORAGE"
                        ],
                        (resultObj) => {
                            var result = 0;
                            for (var i = 0; i < resultObj.granted.length; i++) {
                                var grantedPermission = resultObj.granted[i];
                                console.log('已获取的权限:' + grantedPermission);
                                this.init2();
                                result = 1
                            }
                            for (var i = 0; i < resultObj.deniedPresent.length; i++) {
                                var deniedPresentPermission = resultObj.deniedPresent[i];
                                console.log('拒绝本次申请的权限:' + deniedPresentPermission);
                                result = 0
                            }
                            for (var i = 0; i < resultObj.deniedAlways.length; i++) {
                                var deniedAlwaysPermission = resultObj.deniedAlways[i];
                                console.log('永久拒绝申请的权限:' + deniedAlwaysPermission);
                                result = -1
                            }
                        },
                        (error) => {
                            console.log('申请权限错误:' + error.code + " = " + error.message);
                        }
                    );
                }
            },
            onReady() {
                if (plus.os.name == 'iOS') {
                    setTimeout((res) => {
                        this.init2();
                    }, 500);
                }
                this.onScanForResult();
            },
            methods: {
                init(scanLine, devicePosition) {
                    /**
                     * scanTypes - 扫码类型 不传或为null的话,支持所有
                     * ios:Aztec,Code39,Code93,Code128,DataMatrix,EAN8,EAN13,ITF14,PDF417,QR,UPCE,Interleaved2of5,Codabar,
                     * ios15.4之后才有效:GS1DataBar,GS1DataBarExpanded,GS1DataBarLimited,MicroQR,MicroPDF417
                     * andorid:Aztec,Code39,Code93,Code128,DataMatrix,EAN8,EAN13,ITF14,PDF417,QR,UPCA,UPCE,Codabar
                     * */
                    var dic = {
                        //"scanTypes": ["Code128", "Code93", "QR"],
                        "devicePosition": devicePosition, //back front
                        "isContinuouslyScan": true, //是否持续扫码
                        "scanLine": scanLine,
                        // "scanLine": { //扫码线,不配置,默认不显示
                        //  "filePath": plus.io.convertLocalFileSystemURL("../../static/ug_animation_img.png"),
                        //  "x": 0,
                        //  "y": 0,
                        //  "width": uni.getSystemInfoSync().screenWidth, //不配置,默认是组件的宽度
                        //  "toY": this.palyerHeight, //动画到y的位置,不配置,默认是组件的高度
                        //  "height": 30,
                        //  "animateDuration": 2,
                        //  "isAutoReverse": false, //true(上下来回移动) false(向下移动结束,从头开始)
                        // },
                        // "cutArea": { //ios识别区域
                        //  "x": 0,
                        //  "y": 0,
                        //  "width": uni.getSystemInfoSync().screenWidth,
                        //  "height": this.palyerHeight,
                        // }
                    }
                    console.log(JSON.stringify(dic))
                    this.$refs.systemScan.init(dic, (res) => {
                        console.log("init:" + JSON.stringify(res));
                    })
                },
                init2() {
                    var scanLine = { //扫码线,不配置,默认不显示
                        "filePath": plus.io.convertLocalFileSystemURL("../../static/scanLine.png"),
                        "x": 0,
                        "y": 0,
                        "width": uni.getSystemInfoSync().screenWidth, //不配置,默认是组件的宽度
                        "toY": this.palyerHeight, //动画到y的位置,不配置,默认是组件的高度
                        "height": 30,
                        "animateDuration": 2,
                        "isAutoReverse": false, //true(上下来回移动) false(向下移动结束,从头开始)
                    }
                    this.init(scanLine, "front");
                },
                init3() {
                    var scanLine = { //扫码线,不配置,默认不显示
                        "filePath": plus.io.convertLocalFileSystemURL("../../static/scanLine2.png"),
                        "x": 100,
                        "y": 300,
                        "width": uni.getSystemInfoSync().screenWidth - 200, //不配置,默认是组件的宽度
                        "height": 30,
                        "toY": this.palyerHeight - 300, //动画到y的位置,不配置,默认是组件的高度
                        "height": 30,
                        "animateDuration": 1,
                        "isAutoReverse": true, //true(上下来回移动) false(向下移动结束,从头开始)
                    }
                    this.init(scanLine, "back");
                },
                onScanForResult() {
                    //监听扫码结果
                    this.$refs.systemScan.onScanForResult((res) => {
                        console.log("onScanForResult:" + JSON.stringify(res));
                        // uni.showModal({
                        //  title: '提示',
                        //  content: JSON.stringify(res),
                        //  success: function(res) {
                        //      if (res.confirm) {
                        //          console.log('用户点击确定');
                        //      } else if (res.cancel) {
                        //          console.log('用户点击取消');
                        //      }
                        //  }
                        // });
                        this.oldScanResults = scanResults;
                        this.oldScanTypes = scanTypes;
                        /**
                         * 返回json字段说明:
                         *ios: {"result":[{"scanType":"QR","other":{"corners":[{"X":0.48734039878296465,"Y":0.685323417740106},{"X":0.6289293872158126,"Y":0.7428117636113726},
                         *{"X":0.665117383107654,"Y":0.5023888277357977},{"X":0.5198131180041354,"Y":0.44598644885241634}],"basicDescriptor":{"QRMASK":2,"SymbolVersion":3,
                         *"BarcodeType":"QR","BarcodeRawData":{},"ErrorCorrectionLevel":2,"DecodeConfidence":1,"CodeLocation":[{"X":348.8507080078125,"Y":903.6935424804688},
                         **{"X":286.7632751464844,"Y":1175.54443359375},{"X":546.4200439453125,"Y":1245.025390625},{"X":607.3346557617188,"Y":966.0411376953125}],
                         *"LocatorPoints":[{"X":325,"Y":1150.5555419921875},{"X":372,"Y":943.6875},{"X":568.1875,"Y":991.625}]},"descriptor":{"errorCorrectionLevel":"H","symbolVersion":3}},
                         *"scanResult":"http://m3w.cn/uniapp"},{"scanType":"QR","other":{"corners":[{"X":0.7346922285789135,"Y":0.7896137283973208},{"X":0.8861691508965333,"Y":0.8506181518316722},{"X":0.9340756581110419,"Y":0.6042756248514807},
                         *{"X":0.7763072272044635,"Y":0.5452309428077099}],"basicDescriptor":{"QRMASK":2,"SymbolVersion":6,"BarcodeType":"QR","BarcodeRawData":{},"ErrorCorrectionLevel":2,"DecodeConfidence":1,
                         *"CodeLocation":[{"X":236.2171630859375,"Y":1378.6090087890625},{"X":170.33238220214844,"Y":1669.4447021484375},{"X":436.3822937011719,"Y":1761.42529296875},{"X":500.15057373046875,"Y":1458.5098876953125}],
                         *"LocatorPoints":[{"X":198,"Y":1651.75},{"X":252.5,"Y":1409.75},{"X":471.5,"Y":1476.8333740234375}]},"descriptor":{"errorCorrectionLevel":"H","symbolVersion":6}},"scanResult":"https://qr.alipay.com/s6x08417vz8pjz3ss3auo2b"}]}
                         *"descriptor":{"errorCorrectionLevel":"H","symbolVersion":6}}]
                         * 
                         * andorid:{"result":[{"scanResult":"http://m3w.cn/uniapp","scanType":"QR",
                         * "other":{"cornerPoints":[{"y":944,"x":415},{"y":914,"x":732},{"y":1252,"x":781},{"y":1271,"x":460}],
                         * "boundingBox":{"empty":false,"right":781,"left":415,"bottom":1271,"top":914}}}]}
                         * 
                         * scanResult - 扫码结果
                         * scanType - 码类型
                         * */
                    })
                },
                pauseContinuouslyScan() {
                    this.$refs.systemScan.pauseContinuouslyScan()
                },
                resumeContinuouslyScan() {
                    this.$refs.systemScan.resumeContinuouslyScan()
                },
                getLightStatus() {
                    this.$refs.systemScan.getLightStatus((res) => {
                        console.log("getLightStatus:" + JSON.stringify(res));
                    })
                },
                switchLight() {
                    this.$refs.systemScan.switchLight((res) => {
                        console.log("switchLight:" + JSON.stringify(res));
                    })
                },
                backClick() {
                    uni.navigateBack();
                },
                albumClick() {

                    uni.chooseImage({
                        count: 1, //默认9
                        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                        sourceType: ['album'], //从相册选择
                        success: function(res) {
                            console.log(JSON.stringify(res.tempFilePaths));
                            var filePath = res.tempFilePaths[0].replace('file://', '')
                            var dic = {
                                "filePath": filePath
                            }
                            KJSystemScan.multiDecodeForImage(dic, (res) => {
                                console.log("multiDecodeForImage:" + JSON.stringify(res));
                                uni.showModal({
                                    title: '提示',
                                    content: JSON.stringify(res),
                                    success: function(res) {
                                        if (res.confirm) {
                                            console.log('用户点击确定');
                                        } else if (res.cancel) {
                                            console.log('用户点击取消');
                                        }
                                    }
                                });
                            })
                        }
                    });
                },
                lightClick() {
                    this.isLightOn = !this.isLightOn;
                    this.switchLight();
                }
            }
        }
    </script>
    <style>
        .systemScan {
            justify-content: center;
            align-items: center;
            background-color: black;
        }

        .head {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            padding-left: 16px;
            padding-right: 16px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .text {
            color: white;
        }

        .back {
            width: 50rpx;
            height: 50rpx;
        }

        .album {
            width: 60rpx;
            height: 60rpx;
        }

        .light {
            position: absolute;
            top: 100px;
            left: 0;
            right: 0;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .light_image {
            width: 60rpx;
            height: 120rpx;
        }

        .light>.text {
            font-size: 14px;
            margin-top: 8px;
        }

        .btns {
            position: fixed;
            bottom: 0;
            left: 0;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }

        .btn {
            font-size: 10px !important;
        }
    </style>

隐私、权限声明

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

需要摄像头权限

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

ios 插件不采集任何数据 andorid 插件使用的 google MLKit SDK会采集数据,详情可参考:https://developers.google.cn/ml-kit/vision/barcode-scanning/android?hl=zh-cn

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

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