uniapp+h5+vue3扫码二维码获取结果提交给上一个页面

最新推荐文章于 2025-04-17 09:49:25 发布

YourMoonLight

最新推荐文章于 2025-04-17 09:49:25 发布

阅读量1k

点赞数 17

分类专栏： uniapp h5 vue 文章标签： uni-app javascript vue.js

本文链接：https://blog.youkuaiyun.com/YourMoonLight/article/details/137924051

版权

本文介绍了如何在uni-app项目中集成并使用@zxing/library插件实现视频设备上的二维码和条形码扫描功能，包括组件代码和事件处理过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用的是@zxing/library插件
1、下载插件 npm install @zxing/library
2、奉上整个组件代码

<template>
	<view class="camera_page">
		<view class="camera_content">
			<view class="code_close" @click="closeClick()">
				<!-- <img src="../../static/close.png"> -->
			</view>
			<view class="loop_line"></view>
			<view class="video_nav">
				<video id="video_nav_id" autoplay :controls="false"></video>
			</view>
		</view>
		<view class="">
			扫描设备结果：{
  {videoInputDevices}}
		</view>
		<view class="">
			最终结果：{
  {result}}
		</view>
	</view>