最近在搞uniapp的项目,所以最近的文章基本上是关于uniapp的。
分享一个自动生成二维码的网址,点击前往
注意 如果扫码和上一个nfc功能在同一个页面里面,会发生冲突,只有一个有用,一个没有用,所有,我给扫码的分装成了一个组件,这样就不会冲突了。
1,在component里面新建一个ScanCode.vue组件
<template>
<view class="Big">
<view id="page">
<text v-if="isKeshi" class="nameSty">扫描二维码获取</text>
<text v-if="!isKeshi" class="nameSty">{{codes}}</text>
</view>
</view>
</template>
<script>
var main, receiver, filter;
var _codeQueryTag = false;
export default {
name:"nfc",
data() {
return {
codes:'',//code
isKeshi:true,//提示字显影
nameStys:false,//动态样式
};
},
created(option) {
this.initScan();
this.startScan();
},
onHide() {
this.stopScan();
},
destroyed() {
this.stopScan();
},
methods:{
initScan() {
let _this = this;
main = plus.android.runtimeMainActivity(); //获取activity
let IntentFilter1 = plus.android.importClass('android.content.IntentFilter');
filter = new IntentFilter1();
filter.addAction("com.seuic.scan"); // 换你的广播动作
receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
onReceive: function(context, intent) {
plus.android.importClass(intent);
let code = intent.getStringExtra("scannerdata"); // 换你的广播标签
_this.codes = code;
_this.queryCode(code);
//传值,去除换行字符
_this.$emit("setData",code.replace(/\n/g,""));
_this.isKeshi = false;
}
});
},
startScan() {
main.registerReceiver(receiver, filter);
},
stopScan() {
main.unregisterReceiver(receiver);
},
queryCode(code) {
//防重复
if (_codeQueryTag) return false;
_codeQueryTag = true;
setTimeout(function() {
_codeQueryTag = false;
}, 150);
let id = code
},
// 点击扫码,或者直接用pda侧边的扫码按钮扫码都可以实现
ScanCode() {
let main1 = plus.android.runtimeMainActivity(); //获取acitivity
let Intent = plus.android.importClass("android.content.Intent");
let intent2 = new Intent("com.scan.onStartScan");
main1.sendBroadcast(intent2);
},
},
}
</script>
<style>
.Big{
width: 220px;
}
.nameSty{
height: 30px;
width: 220px !important;
line-height: 30px;
font-size: 18px;
font-weight: bold;
color: #828282 !important;
}
/deep/.u-size-default,/deep/.uni-input-input{
font-size: 18px;
}
</style>
2,在需要的页面引入
<template>
<view class="box">
<scanCode @setData="getData"></scanCode>
</view>
</template>
<script>
import scanCode from "../../components/saoma.vue";
export default {
components: {
scanCode
},
methods: {
// 接收扫码的值
getData(res){
console.log(res)
},
}
}
</script>
没了,结束了,是不是很简单呐,如有问题,欢迎留言。
最后:如果此篇博文对您有帮助,还请动动小手点点关注点点赞呐~,谢谢 ~ ~