uni-app -- 调用扫一扫功能

最新推荐文章于 2025-10-17 09:19:47 发布

原创最新推荐文章于 2025-10-17 09:19:47 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uni-app 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何在uni-app中实现扫码功能。通过调用uni.scanCode() API，可以轻松集成扫码操作。当用户点击扫码按钮时，会触发scanCodeHandle方法，该方法内调用uni.scanCode进行扫码操作，成功时打印扫码结果，失败时打印错误信息，并在完成时输出提示。

关于移动端项目，功能种类比起pc端有过之无不及，就如扫码功能。

uni-app该如何实现该功能呢？

API：uni.scanCode({})
官方地址 : uni.scanCode(OBJECT)

具体代码如下：

<template>
	<view class="shortcut-container">
		<view class="shortcut-item">
			<image class='icon' src="../../../static/scanCode.png" mode="" @click="scanCodeHandle"></image>
			<view class="desc">
				扫码
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		methods: {
			// 点击扫码按钮
			scanCodeHandle() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码成功', res)
					},
					fail: (err) => {
						console.log('扫码失败', err)
					},
					complete: () => {
						console.log('扫码结束')
					}
				})
			},
		}
	}
</script>