uni-app自定义app端的扫码界面

Posted 2021-03-21 小熊是安妮的

记得当时是在西班牙有这样的一个需求，需要自定义扫码页面，还需要加上西班牙文，当时是在一个组件里面找到了这样的一个方法，全文大部分使用的app端的Native里面的方法，记录一下，跑路了项目代码要删库了

 

 效果图大概是这样的

以下是vue页面代码
<template>
<view></view>
</template>
<script>
import { mapState, mapMutations } from \'vuex\';
var barcode = null;
export default {
data() {
return {
name: \'PUEDES ENCONTRAR EL QR AQUÍ\', //要在扫码界面自定义的内容
flash: false, //是否打开摄像头
type: \'scan-listener\'
};
},
onLoad(d) {
var pages = getCurrentPages();
var page = pages[pages.length - 1];
// #ifdef APP-PLUS
plus.navigator.setFullscreen(true); //全屏
var currentWebview = page.$getAppWebview();
this.createBarcode(currentWebview); //创建二维码窗口
this.createView(currentWebview); //创建操作按钮及tips界面
// #endif
},
computed: {
...mapState([\'token\', \'user\', \'powerBank\', \'rackData\', \'orderNum\', \'slotId\']),
i18n() {
return this.$t(\'richScan\');
}
},
methods: {
...mapMutations([\'tokenStorage\', \'powerBankStorage\']),
// 扫码成功回调
onmarked(type, result) {
var text = \'未知: \';
console.log(\'内容\' + JSON.stringify(result));
switch (type) {
case plus.barcode.QR:
text = \'QR: \';
break;
case plus.barcode.EAN13:
text = \'EAN13: \';
break;
case plus.barcode.EAN8:
text = \'EAN8: \';
break;
}
plus.navigator.setFullscreen(false);
let results = result.match(/WXXH.*/gi) + \'\';
this.powerBankStorage(results);
console.log(typeof this.powerBank);
uni.redirectTo({
url: \'/pages/money/paydeposit\'
});
// this.$eventHub.$emit(this.type, {
// result: result
// });
barcode.close();
},
// 创建二维码窗口
createBarcode(currentWebview) {
barcode = plus.barcode.create(\'barcode\', [plus.barcode.QR], {
top: \'0\',
left: \'0\',
width: \'100%\',
height: \'100%\',
scanbarColor: \'#1DA7FF\',
position: \'static\',
frameColor: \'#1DA7FF\'
});
barcode.onmarked = this.onmarked;
barcode.setFlash(this.flash);
currentWebview.append(barcode);
barcode.start();
},
// 创建操作按钮及tips
createView(currentWebview) {
// 顶部指引
var guide = new plus.nativeObj.View(
\'guide\',
{
top: \'12%\',
left: \'20%\',
height: \'150px\',
width: \'218px\'
},
[
{
tag: \'img\',
id: \'backBar\',
src: \'https://upower-spain.oss-eu-central-1.aliyuncs.com/spain/app/prompt.png\',
position: {
top: \'0\',
left: \'0\',
width: \'235px\',
height: \'161px\'
}
}
]
);
// 创建返回原生按钮
var backVew = new plus.nativeObj.View(
\'backVew\',
{
top: \'0px\',
left: \'0px\',
height: \'40px\',
width: \'100%\'
},
[
{
tag: \'img\',
id: \'backBar\',
src: \'https://upower-spain.oss-eu-central-1.aliyuncs.com/spain/app/backBar.png\',
position: {
top: \'2px\',
left: \'3px\',
width: \'35px\',
height: \'35px\'
}
}
]
);
// 创建打开手电筒的按钮
var scanBarVew = new plus.nativeObj.View(
\'scanBarVew\',
{
top: \'70%\',
left: \'40%\',
height: \'10%\',
width: \'20%\'
},
[
{
tag: \'img\',
id: \'scanBar\',
src: \'https://upower-spain.oss-eu-central-1.aliyuncs.com/spain/app/scanBar.png\',
position: {
width: \'28%\',
left: \'36%\',
height: \'30%\'
}
},
{
tag: \'font\',
id: \'font\',
text: this.i18n.open,
textStyles: {
size: \'10px\',
color: \'#ffffff\'
},
position: {
width: \'80%\',
left: \'10%\'
}
}
]
);
// 创建展示类内容组件
var content = new plus.nativeObj.View(
\'content\',
{
top: \'0px\',
left: \'0px\',
height: \'100%\',
width: \'100%\'
},
[
{
tag: \'font\',
id: \'scanTitle\',
text: \'\',
textStyles: {
size: \'18px\',
color: \'#ffffff\'
},
position: {
top: \'0px\',
left: \'0px\',
width: \'100%\',
height: \'40px\'
}
},
{
tag: \'font\',
id: \'scanTips\',
text: this.i18n.name,
textStyles: {
size: \'14px\',
color: \'#ffffff\',
whiteSpace: \'normal\'
},
position: {
top: \'90px\',
left: \'10%\',
width: \'80%\',
height: \'wrap_content\'
}
}
]
);
if (this.$i18n.locale == \'en-US\') {
// 打开蓝牙指引
var SpiderGuideIcon = new plus.nativeObj.View(
\'SpiderGuideIcon\',
{
left: \'0%\',
right: \'0\',
bottom: \'0\',
height: \'60px\'
},
[
{
tag: \'img\',
id: \'backBar\',
src: \'https://upower-spain.oss-eu-central-1.aliyuncs.com/spain/app/bluetooth.png\',
position: {
left: \'0\',
right: \'0\',
bottom: \'0\',
height: \'60px\'
}
}
]
);
} else {
// 打开蓝牙指引
var SpiderGuideIcon = new plus.nativeObj.View(
\'SpiderGuideIcon\',
{
left: \'0%\',
right: \'0\',
bottom: \'0\',
height: \'60px\'
},
[
{
tag: \'img\',
id: \'backBar\',
src: \'https://upower-spain.oss-eu-central-1.aliyuncs.com/spain/app/hybrid/lanyas.png\',
position: {
left: \'0\',
right: \'0\',
bottom: \'0\',
height: \'60px\'
}
}
]
);
}
backVew.interceptTouchEvent(true);
scanBarVew.interceptTouchEvent(true);
currentWebview.append(guide); // 顶部指引
currentWebview.append(content);
currentWebview.append(scanBarVew);
currentWebview.append(backVew);
currentWebview.append(SpiderGuideIcon);
backVew.addEventListener(
\'click\',
function(e) {
//返回按钮
uni.navigateBack({
delta: 1
});
barcode.close();
plus.navigator.setFullscreen(false);
},
false
);
var temp = this;
scanBarVew.addEventListener(
\'click\',
function(e) {
//点击按钮点亮手电筒
temp.flash = !temp.flash;
if (temp.flash) {
scanBarVew.draw([
{
tag: \'img\',
id: \'scanBar\',
src: \'https://upower-spain.oss-eu-central-1.aliyuncs.com/spain/app/yellow-scanBar.png\',
position: {
width: \'28%\',
left: \'36%\',
height: \'30%\'
}
},
{
tag: \'font\',
id: \'font\',
text: temp.i18n.close,
textStyles: {
size: \'10px\',
color: \'#ffffff\'
},
position: {
width: \'80%\',
left: \'10%\'
}
}
]);
} else {
scanBarVew.draw([
{
tag: \'img\',
id: \'scanBar\',
src: \'https://upower-spain.oss-eu-central-1.aliyuncs.com/spain/app/scanBar.png\',
position: {
width: \'28%\',
left: \'36%\',
height: \'30%\'
}
},
{
tag: \'font\',
id: \'font\',
text: temp.i18n.open,
textStyles: {
size: \'10px\',
color: \'#ffffff\'
},
position: {
width: \'80%\',
left: \'10%\'
}
}
]);
}
if (barcode) {
barcode.setFlash(temp.flash);
}
},
false
);
}
},
onBackPress() {
// #ifdef APP-PLUS
// 点击返回时退出全屏
barcode.close();
plus.navigator.setFullscreen(false);
// #endif
},
onUnload() {
plus.navigator.setFullscreen(false);
}
};
</script>

<style scoped>
//@import \'../../common/uni.css\';
</style>