2,uniapp功能之—扫码(条形码,二维码)点击扫码或者pda侧边按钮扫码

最近在搞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>
	

没了,结束了,是不是很简单呐,如有问题,欢迎留言。
最后:如果此篇博文对您有帮助,还请动动小手点点关注点点赞呐~,谢谢 ~ ~

  • 13
    点赞
  • 68
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 41
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 41
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨同学*

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值