vue 开发webapp 进行扫一扫功能

项目启动

npm install

npm start

npm run build//打包

将打包好的dist文件放到hbuilder中转换成app


 

<template>
<div>
  <topbar title="扫码">
    <router-link to="/home" slot="left" @click.native='cancelScan' class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></router-link>
  </topbar>
<div class="mui-content">
<div class="scan">
<div id="bcid">
<div class="content"></div>
<p class="tip">...载入中...</p>
</div>
<footer>
<button @click="startScan" v-show="isShow">点击扫描</button>
<button @click="cancelScan">取消</button>
</footer>
</div>
</div>
</div>
</template>

<script type='text/ecmascript-6'>

let scan = null;
//点手机虚拟返回键
document.addEventListener("plusready", function() {
// 注册返回按键事件
plus.key.addEventListener('backbutton', function() {
// 事件处理
scan.close();//关闭条码识别控件
window.history.back();
}, false);
});
  export default{
data(){
return{
codeUrl: '',
isShow:true
}
},
components:{
topbar
},
mounted () {
this.startScan()//进入页面就调取扫一扫
},
created(){
this.startRecognize();
this.startScan();
},
methods: {
//创建扫描控件
startRecognize() {
let that = this;
if (!window.plus) return;
that.isShow=false;
// 创建条码扫描识别控件
scan = new plus.barcode.Barcode('bcid');
// 条码识别成功
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;
default:
type = '其它' + type;
break;
}
result = result.replace(/\n/g, '');
that.codeUrl = result;//扫描后返回值
alert(result);
scan.cancel();//关闭扫描
scan.close();//关闭条码识别控件
if(that.codeUrl){
that.isShow=true
}
}
},
//开始扫描
startScan() {
if (!window.plus) return;
this.startRecognize()//创建控件
scan.start();
},

cancelScan(){
this.isShow=true;
scan.cancel();//关闭扫描
scan.close();//关闭条码识别控件
}
}
  };
</script>
<style scoped>
.mui-content{
padding: 44px 0 60px 0;/*px*/
box-sizing: border-box;
margin-top: 60px;/*px*/
}
.scan {
height: 100%;
}
.scan #bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 50px;/*px*/
bottom:3rem;
text-align: center;
color: #fff;
background: #ccc;
}
.scan footer {
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 1rem;
width: 100%;
height: 1rem;
/*line-height: 2rem;*/
z-index: 2;
display: flex;
justify-content: center;
}
.scan footer button{
width: 45%;
font-size: 30px;/*px*/
}
.clickBtn,.cancelBtn{
margin-top:20px;/*px*/
width: 150px;/*px*/
height: 60px;/*px*/
text-align: center;;
}
.cancelBtn{
margin-left: 20px;/*px*/
}
</style>


展开阅读全文

没有更多推荐了,返回首页