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

不负时光不负卿 發表於 2019-12-21 17:33:00

记得当时是在西班牙有这样的一个需求，需要自定义扫码页面，还需要加上西班牙文，当时是在一个组件里面找到了这样的一个方法，全文大部分使用的app端的Native里面的方法，记录一下，跑路了项目代码要删库了
<img src="https://img2018.cnblogs.com/i-beta/1680246/201912/1680246-20191221172856852-1908225784.png">
 
 效果图大概是这样的
 以下是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; // #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', , { 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>

</div>
<div id="MySignature" role="contentinfo">
流下了没有技术的泪水 
来源：https://www.cnblogs.com/Mr-ZhangH/p/12077603.html

頁: [1]

琼殿技术论坛's Archiver

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