uniapp开发h5调摄像头识别二维码信息

短命女 2023-01-05 12:57 251阅读 0赞

1.  #### 因为html5+是要在app环境下运行,所以先创建一个5+项目 ####
2.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0_size_16_color_FFFFFF_t_70 1]  
    我是觉得一个页面想要扫码识别后拿到数据不是很方便就创建了两个vue来进行测试，也可以在一个页面进行  
    **index.vue**

<template>
    	<view class="content">
    		<view>二维码数据是：{ { result}}</view>
    		<button class="btn" type="primary" @tap="open">打开扫码</button>
    	</view>
    
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				result: '' //获取到的二维码内容
    
    			}
    		},
    
    		methods: { 
    			open() { 
    				uni.navigateTo({ 
    					url: '../text/text'
    				});
    			}
    		},
    
    		onShow() { 
    			let pages = getCurrentPages();
    			let currPage = pages[pages.length - 1];
    			if (currPage.data) { 
    				this.result = currPage.data.result
    				console.log(this.result, currPage.data.result, '扫码返回')
    			}
    
    		},
    
    
    	}
    </script>
    
    <style>
    	.content { 
    		width: 100%;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    	}
    
    	.btn { 
    		width: 50%;
    	}
    </style>

**scan.vue**  
依赖的是一个空白页面进行扫码

<template>
    	<view>
    	</view>
    </template>
    <script>
    	export default { 
    		data() { 
    			return { 
    			};
    		},
    		onLoad() { 
    			var currentWebview = plus.webview.currentWebview()
    			var barcode = plus.barcode.create('barcode', [plus.barcode.QR], {   
    			    top:'20px',  
    			    left:'0px',  
    			    width: '100%',  
    			    height: '80%',  
    			    position: 'static'  
    			});  
    			 // 扫码识别成功
    			  barcode.onmarked = (type, result) => { 
    				  console.log(result,'扫码结果')
    				  var text = '未知: ';
    				  switch (type) { 
    				  	case plus.barcode.QR:
    				  		text = 'QR: ';
    				  		break;
    				  	case plus.barcode.EAN13:
    				  		text = 'EAN13: ';
    				  		break;
    				  	case plus.barcode.EAN8:
    				  		text = 'EAN8: ';
    				  		break;
    				  }
    				  var pages = getCurrentPages(); //当前页面
    				  var prevPage = pages[pages.length - 2]; //上一页面
    				  prevPage.data = { 
    				  	//直接给上一个页面赋值
    				  	result: result
    				  }
    				  uni.navigateBack({ 
    				  	delta: 1
    				  });
    				  barcode.close();
    			  }
    			  barcode.onerror = (error) => { 
    				  console.log(error,'扫码失败')
    			  }
    			currentWebview.append(barcode);
    		},
    		methods: { 
    
    		},
    	}
    </script>
    
    <style scoped>
    </style>

**注意怎么测试：**  
只有把创建的5+app运行到真机上才能打开摄像头看到效果  
apple调试下载itues看看能否连接，不然搜不到真机  
![在这里插入图片描述][20210112200517155.png]  
保持手机和电脑在同一个网下，本地ip就可以互通

[项目地址][Link 1] 对你有帮助的话记得star一下~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0_size_16_color_FFFFFF_t_70]: /images/20221119/9491c9c36947480bbf4715c282f0c9f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0_size_16_color_FFFFFF_t_70 1]: /images/20221119/dfe3d17986c643cfb6692a865346fd79.png
[20210112200517155.png]: /images/20221119/c957242fd42b44cea2e18cd0eb6f8bed.png
[Link 1]: https://github.com/pretty-git/h5-scan