摄像头扫码功能封装

2019-11-27 本文已影响0人瑟闻风倾

(1) 第一版：实现前置摄像头扫码

index.vue中调用

//前置扫码
        frontScan:function(){
            // #ifdef APP-PLUS
            const myScanCode = uni.requireNativePlugin('My-ScanCode');
            var options = {
                scanType:['QR,EAN13,EAN8,PDF_417'],//扫码类型
                prompt:'将二维码/条形码放入框内，即可自动扫描',//扫码提示语
                // locked:true,//方向是否锁定、旋转(默认true)
                // beepEnabled:true,//扫码完成是否有提示音(默认true)
                // imageEnabled:false,//扫码成功时是否保存二维码图片(默认false)
                cameraId : 1, //使用指定的相机ID(前1后0摄像头,默认0)
            };
            console.log("scanTest5-start");
            myScanCode.scanCode(options, res => {//res:{"result":"https://qr.alipay.com/cpx05564fwylkybgq7dxjb9","scanType":"QR_CODE","success":"true"}
                console.log("扫码res:" + JSON.stringify(res));
                uni.showModal({
                    title: '条码类型：' + res.scanType + "",
                    content: '条码内容：' + res.result + ""
                });
            });
            console.log("scanTest5-end");
            // #endif   
        },

(2) 第二版：实现前置或后置扫码

setting.vue中设置为前置或后置来扫码

<template>
    <view class="container">
        <view class="uni-flex uni-column">      
            <view class="margin-right-sm" @tap="modifyCameraId">
                <view v-if="cameraId=='0'">
                    <text class="cuIcon-camera text-blue"><text class="text-gray">后</text></text>
                </view>
                <view v-else>
                    <text class="cuIcon-camerafill text-blue"><text class="text-gray">前</text></text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var _self,
export default {
    data() {
        return {
            cameraId:"1",
        }
    },
    methods: {
        modifyCameraId:function(){
            var cameraId = _self.getCameraId();
            if(cameraId=="0"){
                _self.cameraId = "1";
                _self.setCameraId("1");
            }else{
                _self.cameraId = "0";
                _self.setCameraId("0");
            }
        },
    },
    onLoad:function(){
        _self = this;   
    },
  
};
</script>

<style> 
.container{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; /*元素垂直居中*/
    justify-content: center; /*元素水平居中*/
    background-color: #efeff4;
}

</style>

main.js

//cameraId
Vue.prototype.cameraKey = "camera_jk";
Vue.prototype.getCameraId = function(){
    var _self = this;
    // return uni.getStorageSync(_self.cameraKey) || 1;//类型为整型时的错误写法：恒为1
    return uni.getStorageSync(_self.cameraKey) || "1";//默认为1
    // return uni.getStorageSync(_self.cameraKey) === 0 ? 0 : 1;//类型为整型尚未测试(页面中类型也需进行修改)
    
},
Vue.prototype.setCameraId = function(cameraId){
    var _self = this;
    uni.setStorageSync(_self.cameraKey,cameraId);
},

index.vue中调用

//前置扫码
frontScan:function(){
    // #ifndef H5

    const myScanCode = uni.requireNativePlugin('My-ScanCode');
    var options = {
        scanType:['QR','EAN13','EAN8','PDF_417'],//扫码类型
        prompt:'将二维码/条形码放入框内，即可自动扫描',//扫码提示语
        //locked:true,//方向是否锁定、旋转(默认true)
        //beepEnabled:true,//扫码完成是否有提示音(默认true)
        //imageEnabled:false,//扫码成功时是否保存二维码图片(默认false)
        //cameraId : 1, //使用指定的相机ID(摄像头前1后0,默认0)
        cameraId : _self.cameraId,  // this.getCameraId()
    };
    myScanCode.scanCode(options, res => {//{"result":"https://qr.alipay.com/cpx05564fwylkybgq7dxjb9","scanType":"QR_CODE","success":"true"}
        console.log("扫码res:" + JSON.stringify(res));
        uni.showModal({
            title: '条码类型：' + res.scanType + "",
            content: '条码内容：' + res.result + ""
        });
    });
            
    // #endif   
},

(3) 第二版：封装

main.js中封装

Vue.prototype.gotoScanCode = function(param){
    const myScanCode = uni.requireNativePlugin('My-ScanCode');
    var cameraId_string = this.getCameraId();
    var cameraId_int = parseInt(cameraId_string);
    
    var options = {
        scanType:['QR','EAN13','EAN8','PDF_417'],//扫码类型
        prompt:'将二维码/条形码放入框内，即可自动扫描',//扫码提示语
        // locked:true,//方向是否锁定、旋转(默认true)
        // beepEnabled:true,//扫码完成是否有提示音(默认true)
        // imageEnabled:false,//扫码成功时是否保存二维码图片(默认false)
        // cameraId : 1, //使用指定的相机ID(摄像头前1后0,默认0)
        cameraId : cameraId_int,
    };
    myScanCode.scanCode(options, res => {//res:{"result":"https://qr.alipay.com/cpx05564fwylkybgq7dxjb9","scanType":"QR_CODE","success":"true"}
        console.log("gotoScanCode-扫码res:" + JSON.stringify(res));
        // uni.showModal({
        //  title: '条码类型：' + res.scanType + "",
        //  content: '条码内容：' + res.result + ""
        // });
        if(res.result && res.result != "" && res.result != "用户取消" ){
            typeof param.success == "function" && param.success(res);
        }
    });
    
    // switch (cameraId_int){
    //  case 0:
    //      // uniapp横屏扫码摄像头成像会旋转90
    //      uni.scanCode({
    //          success: function (res) {
    //              console.log('条码类型：' + res.scanType);
    //              console.log('条码内容：' + res.result);
    //              // uni.showModal({
    //              //  title: '条码类型：' + res.scanType + "",
    //              //  content: '条码内容：' + res.result + ""
    //              // });
    //              if(res.result && res.result != "" && res.result != "用户取消" ){
    //                  typeof param.success == "function" && param.success(res);
    //              }
    //          }
    //      });
    //      break;
    //  default:
    //      var options = {
    //          scanType:['QR','EAN13','EAN8','PDF_417'],//扫码类型
    //          prompt:'将二维码/条形码放入框内，即可自动扫描',//扫码提示语
    //          // locked:true,//方向是否锁定、旋转(默认true)
    //          // beepEnabled:true,//扫码完成是否有提示音(默认true)
    //          // imageEnabled:false,//扫码成功时是否保存二维码图片(默认false)
    //          // cameraId : 1, //使用指定的相机ID(摄像头前1后0,默认0)
    //          cameraId : cameraId_int,
    //      };
    //      myScanCode.scanCode(options, res => {//res:{"result":"https://qr.alipay.com/cpx05564fwylkybgq7dxjb9","scanType":"QR_CODE","success":"true"}
    //          console.log("gotoScanCode-扫码res:" + JSON.stringify(res));
    //          // uni.showModal({
    //          //  title: '条码类型：' + res.scanType + "",
    //          //  content: '条码内容：' + res.result + ""
    //          // });
    //          if(res.result && res.result != "" && res.result != "用户取消" ){
    //              typeof param.success == "function" && param.success(res);
    //          }
    //      });
    //      break;
    // }
    
},

//cameraId
Vue.prototype.cameraKey = "camera_jk";
Vue.prototype.getCameraId = function(){
    var _self = this;
    // return uni.getStorageSync(_self.cameraKey) || 1;//类型为整型时的错误写法：恒为1
    return uni.getStorageSync(_self.cameraKey) || "1";//默认为1
    // return uni.getStorageSync(_self.cameraKey) === 0 ? 0 : 1;//类型为整型尚未测试(页面中类型也需进行修改)
    
},
Vue.prototype.setCameraId = function(cameraId){
    var _self = this;
    uni.setStorageSync(_self.cameraKey,cameraId);
},

index.vue中调用

//前置扫码
frontScan:function(){
    // #ifndef H5

    _self.gotoScanCode({
        success:function(res){
            console.log("扫码res:" + JSON.stringify(res));
            uni.showModal({
                title: '条码类型：' + res.scanType + "",
                content: '条码内容：' + res.result + ""
            }); 
        }
    });
            
    // #endif   
},

摄像头扫码功能封装

猜你喜欢

热点阅读