記得當時是在西班牙有這樣的一個需求，需要自定義掃碼頁面，還需要加上西班牙文，當時是在一個組件里面找到了這樣的一個方法，全文大部分使用的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>