uni-app内置组件camera在微信小程序中的扫码使用

最新推荐文章于 2024-09-14 05:10:53 发布

栖柚与苏璃

最新推荐文章于 2024-09-14 05:10:53 发布

阅读量1.1k

点赞数 9

文章标签： uni-app 微信小程序

本文链接：https://blog.csdn.net/m0_73075579/article/details/136533997

版权

本文详细介绍了如何在uni-app微信小程序中使用camera组件进行扫码操作，包括初始化、权限获取、错误处理和扫码结果处理，以及注意事项关于正式版小程序的隐私协议要求。

摘要由CSDN通过智能技术生成

/*本文主要讲解uni-app内置组件camera在微信小程序中的扫码运用*/
<template>
	<view>
		/*device-position：后置摄像头*/
		/*flash：关闭闪光灯*/
		/*mode：扫码模式*/
		/*@error：报错时触发*/
		/*@scancode：扫码识别成功时触发*/
		/*@initdone：初始化完成时触发*/
		/*@ready：初始化成功时触发*/
		/*@stop：非正常中止时触发，如后台退出*/
		<camera device-position="back" flash="off" @error="error" mode="scanCode" @scancode="scancode"
			@initdone="initdone" @ready="ready" @stop="stop">
		</camera>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				/*是否加载camera组件*/
				status: "load" /*扫码状态*/
			}
		},
		onLoad() {
			this.getAuth()
		},
		methods: {
			initdone() {
				console.log("camera初始化完成")
			},
			stop() {
				console.log("camera中止")
			},
			ready() {
				console.log("camera初始化成功")
			},
			error(e) {
				console.log("错误信息：" + e.detail.errMsg)
			},
			scancode(e) {
				if (this.status == "loading") {
					return
				}
				this.status = "loading"
				console.log("扫码结果：" + e.detail.result)
				setTimeout(() => {
					console.log("处理数据")
					this.status = "load"
				}, 2000)
			},
			getAuth() {
				uni.getSetting({
					success: (res => {
						if (res.authSetting["scope.camera"]) {
							console.log("已授权")
							this.loading = true
						} else {
							console.log("未授权")
							this.showModal()
						}
					})
				})
			},
			showModal() {
				uni.showModal({
					content: "当前页面功能需打开相机权限，请点击跳转设置",
					showCancel: false,
					confirmText: "点击跳转",
					success: (res => {
						this.goAuth()
					})
				})
			},
			goAuth() {
				uni.openSetting({
					success: (res => {
						if (res.authSetting["scope.camera"]) {
							console.log("已授权")
							this.loading = true
						} else {
							console.log("未授权")
							this.showModal()
						}
					})
				})
			}
			/*需要注意，发布正式版小程序时，需要在隐私协议添加相机权限，否则在设置中无法开启授权*/
		}
	}
</script>

<style lang="scss" scoped>
</style>