项目中H5用到的扫码功能：特此记录
不算原创，csdn有很多大牛也有相似或者更全面的说法，
运用 MUI 技术 实现扫码功能：
1、在 mainjs 中引入 mui
2、在首页扫码图标中添加扫码点击事件 触发路由跳转
3、扫码页面的代码，方便下次使用就直接粘出来了，有需要的自己搬，根据需求做更改
<template>
<!-- 进入扫码页面 -->
<div class="msgbox">
<div class="common-header">
<van-nav-bar title="扫一扫" left-arrow @click-left="back"/>
</div>
<div id="code" style="margin-top:50px">
<div style="width:14rem;height:14rem; background-color: #fff; margin: 15% auto 5%; text-align: center"></div>
<p class="tip" style="text-align: center">...载入中...</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
scan: ""
}
},
mounted () {
const self = this
if (window.plus) {
self.plusReady()
} else {
document.addEventListener('plusready', self.plusReady, false);
}
document.addEventListener('DOMContentLoaded', function() {
alert('DOMLoaded')
self.domready = true;
self.plusReady()
}, false)
setTimeout(function () {
self.sweep() // 扫码函数
}, 1000)
},
beforeDestroy () {
const self = this
self.scan.close()
},
methods: {
// 点击返回并关闭
back () {
// const self = this
// self.scan.close()
this.$nextTick(() => {
this.$router.back()
})
},
plusReady() {
const self = this
// 获取窗口
self.scan = new plus.barcode.Barcode('code')
self.scan.onmarked = self.onmarked
// console.log(self.scan)
},
sweep() {
const self = this
self.scan.start();
},
onmarked(type, result) {
switch (type) {
case plus.barcode.QR:
type = 'QR';
break;
case plus.barcode.EAN13:
type = 'EAN13';
break;
case plus.barcode.EAN8:
type = 'EAN8';
break;
default:
type = '其他' + type
break;
}
result = result.replace(/\n/g, '')
this.$toast(result)
if (result.indexOf('http://') == 0 || result.indexOf('https://') == 0) {
plus.nativeUI.confirm("二维码类型：" + type + "\n扫描结果：" + result, function(i) {
if (i.index == 0) {
var urlStr = encodeURI(result) // 获取跳转地址
plus.runtime.openURL(urlStr) // 确保（）无中文才能打开扫码页面
} else {
self.back(); //返回上个页面
}
}, '', ['打开', '取消']);
} else {
self.back(); //返回上个页面
plus.nativeUI.alert("二维码类型：" + type + "\n扫描结果：" + result)
}
}
},
}
</script>