生成二维码
https://blog.csdn.net/weixin_43924228/article/details/101621089
扫描二维码
方案1：（调用第三方）
1、https://blog.csdn.net/qq_37896578/article/details/96480198
2、https://blog.csdn.net/weixin_40679578/article/details/103045305?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf
3、https://www.cnblogs.com/rrene/p/9549870.html
4、http://www.manongjc.com/detail/16-djuzfzsiefojxil.html
5、https://www.jb51.net/article/182158.htm
方案2：（调用微信官方）
1、调用微信扫码功能 ：https://blog.csdn.net/xiaozhuge_S/article/details/102546837?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
2、https://www.jianshu.com/p/8a0c66620136【需调用后端接口，拿到返回值后调取微信 $ 换成vue写法】
3、https://www.jianshu.com/p/1346264b32b2【需调用后端接口，拿到返回值后调取微信】
4、https://blog.csdn.net/xiamoziqian/article/details/109332080
调用第三方（方法1）
<template>
<div>
<div class="erwm">
<div class="scan">
<div id="bcid">
<div style="height:40%"></div>
<p class="tip">...载入中...</p>
</div>
<footer class="footer">
<p @click="startRecognize">11</p>
<p @click="startScan">22</p>
<p @click="cancelScan">33</p>
<p @click="closeScan">44</p>
</footer>
</div>
</div>
</div>
</template>
<script type='text/ecmascript-6'>
import Vue from 'vue'
var scan = null;
var styles = {frameColor: "#2e5dea",scanbarColor: "#2e5dea",};//边框属性，中间线属性，背景色
var filter;//扫码格式 空为全类型
export default {
name: 'erwm',
components: {
},
data() {
return {
codeUrl: '',
isShow:true
}
},
created () {
进入页面就调取扫一扫
this.startRecognize();
this.startScan();
alert('创建');
},
mounted(){
this.startRecognize();
this.startScan();
// this.isShow = true;
},
updated(){
this.startRecognize();
this.startScan();
this.isShow = true;
alert('更新');
},
// destroyed(){
// console.log('aaa');
}
,
methods: {
创建扫描控件
startRecognize() {
let that = this;
if (!window.plus) return;
scan = new plus.barcode.Barcode('bcid',filter,styles);
console.log(scan)
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);
}
that.startScan();
},
//开始扫描
startScan() {
if (!window.plus) return;
scan.start();
},
//关闭扫描
cancelScan() {
if (!window.plus) return;
scan.cancel();
},
//关闭条码识别控件
closeScan() {
if (!window.plus) return;
scan.close();
},
goback() { // 返回
this.closeScan()
this.$router.push({ path: '/Transferoptions' });
// this.isShow = false;
}
}
}
</script>
<style lang="less" scoped>
.scan {
height: 100%;
#bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
text-align: center;
color: red;
background: #fff;
}
footer {
position: absolute;
left: 0;
bottom: 1rem;
height: 2rem;
line-height: 2rem;
z-index: 2;
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
}
</style>
调用第三方（方法2 ---- 亲测好用）
<template>
<div>
<div title="扫码" class="topbar">
<router-link to="/home" slot="left"
@click.native='cancelScan'
class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">
</router-link>
</div>
<div class="mui-content">
<div class="scan">
<div id="bcid">
<div class="content"></div>
<p class="tip">...载入中...</p>
</div>
<div class="footer">
<button type="primary" @click="startScan" v-show="isShow">点击扫描</button>
<button type="primary" @click="cancelScan">取消</button>
</div>
</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 lang='less'>
.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: 10px;
width: 100%;
height: 30px;
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>
网友评论