(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
},
说明：目前已发布为uniapp插件，有需要请移步原生扫码插件。
