更新记录

1.0.0（2021-09-16）

  • 扫描二维码、条形码，自定义扫描界面颜色
  • 生成二维码(可含logo)、条形码
  • 识别静态图片二维码

平台兼容性

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

原生插件通用使用流程：

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

前言

wrs-qrcode扫描二维码、条形码，自定义扫描界面颜色，生成二维码(可含logo)、条形码,识别静态图片二维码

功能

  • 扫描二维码、条形码，自定义扫描界面颜色
  • 生成二维码(可含logo)、条形码
  • 识别静态图片二维码

wrs-qrcodecamera UI组件

<wrs-qrcodecamera :style="'width:'+width+'px;height:'+height+'px;'" :config="config" @resultCallback="resultCallback"></wrs-qrcodecamera>

data() {
    return {
        height: 300,
        width: 300,
        config: {
            style: "line", // 扫描风格，line 激光扫描 grid 网格扫描 none 没有
            isContinuousScan: true, // 是否连续扫码
            vibrate: true, // 震动
            maskColor: "#ff0000", // 扫描区外遮罩的颜色
            frameColor: "#00ff00", // 扫描区边框的颜色
            cornerColor: "#0000ff", // 扫描区边角的颜色,
             laserColor: "#ff2fff", // 扫描区激光线的颜色
            //supportVerticalCode: false // 是否支持扫垂直条码，建议有此需求时才使用。仅对Android有效
        }
    }
}

methods: {
    resultCallback:function(resp){
        var code = resp.detail.code;
        var str = JSON.stringify(resp);
        console.log("resultCallback:" + str);
    }
}

开关闪光灯

var params = {
    isOpen: true // 开闪光灯，关闭为false
};
this.$refs.qrcodecamera.setTorch(params);

wrs-qrcode组件

var qrcode = uni.requireNativePlugin("wrs-qrcode");

方法

  • qrcode.genQrCode生成二维码
var params = {
    code: "123wesss",
    width: 312,
    logo: { // 没有logo可不传
        type: 'url', //  类型，支持url、base64，url表示图片地址，支持本地地址和网络地址，base64表示图片base64的字符串
        value: logoPath,
        width: 30,
        height: 30
    },
    saveImageFilePath: saveImageFilePath, // 是否保存为本地图片
    needBase64Image: true // 是否把图片转为base64
};
qrcode.genQrCode(params, (resp) => {
    var str = JSON.stringify(resp);
    console.log("二维码生成结果:" + str);
    var base64 = resp.base64;
    base64 = this.formatBase64(base64);
    this.qrCode = base64;
});
  • wqrcode.genBarCode 生成条形码 
    var params = {
code: "123wesss",
width: 300,
height: 144,
showText: true, // 仅对Android有效
saveImageFilePath: saveImageFilePath, // 是否保存为本地图片
needBase64Image: true // 是否把图片转为base64
};
qrcode.genBarCode(params, (resp) => {
var str = JSON.stringify(resp);
console.log("二维码生成结果:" + str);
var base64 = resp.base64;
base64 = this.formatBase64(base64);
this.barCode = base64;
});
  • qrcode.parseCode 解析静态图片的二维码 
    var absPath = plus.io.convertLocalFileSystemURL("_www");
// Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
if (absPath.endWith('/')) {
absPath = absPath.substring(0, absPath.length - 1);
}
var imagePath = absPath + "/static/qrcode.png";
qrcode.parseCode({
path: imagePath
}, (resp) => {
var str = JSON.stringify(resp);
console.log("parseCode result:" + str);
});

完整demo

index.nvue

<template>
    <div>
        <button @click="qrCodeScan">二维码扫描</button>
        <button @click="genBarCode">生成条形码</button>
        <button @click="genQrCode">生成二维码</button>
        <button @click="parseCode">识别二维码图片</button>
        <image :src="qrCode" mode="aspectFit" style="width: 200px; height: 200px;"></image>
        <image :src="barCode" mode="aspectFit" style="width: 200px; height: 200px;"> </image>
    </div>
</template>
<script>
    String.prototype.endWith = function(endStr) {
        var d = this.length - endStr.length;
        return (d >= 0 && this.lastIndexOf(endStr) == d)
    }
    var qrcode = uni.requireNativePlugin("wrs-qrcode");
    export default {
        data() {
            return {
                barCode: '',
                qrCode: ''
            }
        },
        methods: {
            qrCodeScan: function() {
                uni.navigateTo({
                    url: './scan'
                });
            },
            genBarCode: function() {
                var saveImageFilePath = "";
                switch (uni.getSystemInfoSync().platform) {
                    case 'android':
                        saveImageFilePath = "/sdcard/Download/barcode.png";
                        break;
                    case 'ios':
                        var absPath = plus.io.convertLocalFileSystemURL('_documents');
                        // Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
                        if (absPath.endWith('/')) {
                            absPath = absPath.substring(0, absPath.length - 1);
                        };
                        saveImageFilePath = absPath + "/barcode.png";
                        break;
                    default:
                        break;
                }
                var params = {
                    code: "123wesss",
                    width: 300,
                    height: 144,
                    showText: true, // 仅对Android有效
                    saveImageFilePath: saveImageFilePath, // 是否保存为本地图片
                    needBase64Image: true // 是否把图片转为base64
                };
                qrcode.genBarCode(params, (resp) => {
                    var str = JSON.stringify(resp);
                    console.log("二维码生成结果:" + str);
                    var base64 = resp.base64;
                    base64 = this.formatBase64(base64);
                    this.barCode = base64;
                });
            },
            genQrCode: function() {
                var saveImageFilePath = "";
                var absPath = plus.io.convertLocalFileSystemURL("_www");
                // Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
                if (absPath.endWith('/')) {
                    absPath = absPath.substring(0, absPath.length - 1);
                }
                var logoPath = absPath + "/static/logo.png";
                switch (uni.getSystemInfoSync().platform) {
                    case 'android':
                        saveImageFilePath = "/sdcard/Download/qrcode.png";
                        break;
                    case 'ios':
                        var absPath = plus.io.convertLocalFileSystemURL('_documents');
                        // Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
                        if (absPath.endWith('/')) {
                            absPath = absPath.substring(0, absPath.length - 1);
                        };
                        saveImageFilePath = absPath + "/qrcode.png";
                        break;
                    default:
                        break;
                }

                var params = {
                    code: "123wesss",
                    width: 312, // 宽度
                    logo: { // 没有logo可不传
                        type: 'url', //  类型，支持url、base64，url表示图片地址，支持本地地址和网络地址，base64表示图片base64的字符串
                        value: logoPath,
                        width: 30,
                        height: 30
                    },
                    saveImageFilePath: saveImageFilePath, // 是否保存为本地图片
                    needBase64Image: true // 是否把图片转为base64
                };
                qrcode.genQrCode(params, (resp) => {
                    var str = JSON.stringify(resp);
                    console.log("二维码生成结果:" + str);
                    var base64 = resp.base64;
                    base64 = this.formatBase64(base64);
                    this.qrCode = base64;
                });
            },
            parseCode: function(){
                var absPath = plus.io.convertLocalFileSystemURL("_www");
                // Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
                if (absPath.endWith('/')) {
                    absPath = absPath.substring(0, absPath.length - 1);
                }
                var imagePath = absPath + "/static/qrcode.png";
                qrcode.parseCode({
                    path: imagePath
                }, (resp) => {
                    var str = JSON.stringify(resp);
                    console.log("parseCode result:" + str);
                });
            },
            formatBase64: function(base64) {
                base64 = base64.replace(/[\r\n]/g, "");
                var startStr = "data:image/jpg;base64,";
                if(!base64.startsWith(startStr)) {
                    base64 = startStr + base64;
                }
                return base64;
            }
        }
    }
</script>

<style>

</style>

scan.nvue:

<template>
    <div>
        <wrs-qrcodecamera :style="'width:'+width+'px;height:'+height+'px;'" :config="config" @resultCallback="resultCallback"></wrs-qrcodecamera>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                height: 300,
                width: 300,
                config: {
                    style: "line", // 扫描风格，line 激光扫描 grid 网格扫描 none 没有
                    isContinuousScan: true, // 是否连续扫码
                    vibrate: true, // 震动
                    maskColor: "#ff0000", // 扫描区外遮罩的颜色
                    frameColor: "#00ff00", // 扫描区边框的颜色
                    cornerColor: "#0000ff", // 扫描区边角的颜色,
                     laserColor: "#ff2fff", // 扫描区激光线的颜色
                    //supportVerticalCode: false // 是否支持扫垂直条码，建议有此需求时才使用。仅对Android有效
                }
            }
        },
        onLoad() {
            const {
                windowWidth,
                windowHeight
            } = uni.getSystemInfoSync();
            this.width = windowWidth;
            this.height = windowHeight;

        },
        methods: {
            resultCallback:function(resp){
                var code = resp.detail.code;
                var str = JSON.stringify(resp);
                console.log("resultCallback:" + str);
            }
        }
    }
</script>

<style>

</style>

插件联系方式QQ:252797991

如果觉得可以就点个👍吧，欢迎粉丝收藏，土豪打赏，您的关注就是我们创作的动力！

隐私、权限声明

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

android: "android.permission.CAMERA", "android.permission.INTERNET", "android.permission.VIBRATE", "android.permission.FLASHLIGHT", "android.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE", "android.permission.CHANGE_WIFI_STATE", "android.permission.ACCESS_WIFI_STATE" ios: NSCameraUsageDescription

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

插件不采集任何数据

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

无

评论列表 撰写评论

暂无用户评论。

插件问答 我要提问

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

加载更多...