前言：项目需求扫描机器条形码，获取编号进行搜索，刚开始获取返回值不完整，后来发现要设置一下filter
提示plus方法要进行真机测试
如果plus没有找到的话，可以用原生监听。
document.addEventListener(“plusready”,function(){})
图片：
代码：
<template><div class="scan"><!-- 我topTitle是封装的全局头部返回 根据自己条件进行休整 --><topTitle>扫一扫</topTitle><div id="bcid"><div style="height:40%"></div><p class="item">...载入中...</p></div></div></template><script>let scan = null;export default {data() {return {};},mounted() {this.startRecognize();setTimeout(() => {this.startScan();}, 500);},methods: {//创建扫描控件startRecognize() {let that = this;if (!window.plus) return;//filter 扫描类型var filter = [plus.barcode.CODE128,plus.barcode.EAN13,plus.barcode.EAN8,plus.barcode.QR,];scan = new plus.barcode.Barcode("bcid", filter);scan.onmarked = onmarked;function onmarked(type, result, file) {switch (type) {case plus.barcode.QR:type = "QR";break;case plus.barcode.EAN13:type = "EAN13";break;case plus.barcode.EAN8:type = "EAN8";break;case plus.barcode.CODE128:type = "EAN8";break;default:type = "其它" + type;break;}that.$toast(result); //我这里是封装的vant 需要根据自己情况进行修改that.closeScan();}},// 关闭控件acloseScan() {if (!window.plus) return;scan.close();},startScan() {if (!window.plus) return;scan.start();},// 关闭扫描cancelScan() {if (!window.plus) return;scan.cancel();},},destroyed() {this.cancelScan();this.closeScan();},};</script><style lang="scss">.scan {width: 100%;height: 100vh;background-color: #ccc;}#bcid {width: 100%;position: absolute;left: 0;right: 0;top: 1.226667rem;bottom: 0;text-align: center;color: #fff;background: #ccc;}.item {font-size: 0.4rem;}</style>
测试条形码也特别完整👍
如果觉得《Vue 移动端项目调用扫一扫功能（可条形码）》对你有帮助，请点赞、收藏，并留下你的观点哦！
