[uniapp] 扫码功用
APP、微信小程序 （原生扫码功用）
<!-- 在 'manifest.json' 中答应翻开摄像头权限 -->
<template>
<button @click="scanQRcodes">扫码</button>
</template>
<script setup>
// 扫码
const scanQRcodes = () => {
uni.scanCode({
success: (res) => {
if (res.result) {
console.log('扫描成果：', res.result);
} else {
uni.showToast({
title: '扫描失利',
icon: 'none'
});
}
},
fail: (err) => {
if (err.errMsg.includes('cancel')) {
uni.showToast({
title: '扫描已撤销',
icon: 'none'
});
} else {
uni.showToast({
title: '调用相机失利',
icon: 'none'
});
}
}
});
};
</script>
h5（扫码功用插件）
-
导入插件（两种方法，选其一）
（1）HBuilder 创立的项目：从运用商场导入 mumu-getQrcode 到uniapp项目中
（2）脚手架创立的 uni 项目：需求自行装置
jsQR依靠，并且修正组件中源码中的引进。# 装置 jsQR npm install jsqr --save # 修正组件源码对 jsQR 依靠 import jsQR from "jsqr" -
新建页面 scan-qrcode，作为扫码页面。
<template> <view class="container"> <mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError"></mumu-get-qrcode> </view> </template> <script> import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue' export default { components: { mumuGetQrcode //注册 }, data() { return { } }, name: 'Qrcode', methods: { qrcodeSucess(data) { //扫码成功 console.log(data) // 承认弹窗（若不需求能够去除） uni.showModal({ title: '成功', content: data, success: () => { // 承认弹窗后的操作 } }) }, qrcodeError(err) { //扫码失利 uni.showModal({ title: '摄像头授权失利', content: '摄像头授权失利，请检测当时浏览器是否有摄像头权限。', success: () => { uni.navigateBack({}) //回来到上一页 } }) } } }; </script> -
在需求调用扫码功用的页面进行 页面跳转
uni.navigateTo({ url: '/pages/scan-qrcode/scan-qrcode' }); -
相关API
可传特点（Props）
参数 阐明 类型 默认值 continue 是否接连获取。false 监听一次 true 继续监听 Boolean false exact 选调用摄像头。environment 后摄像头 user 前摄像头 String environment size 扫码屏幕巨细。whole 全屏 balf 半屏 String whole definition 调用摄像头清晰度。fasle 正常 true 高清 Boolean false 事情（Events）
事情名 阐明 回调参数 success 检测到图中有二维码并读取到数据是回调 二维码数据 error 组件内部发送过错，通常是摄像头没有调用成功 过错信息，概况见下 常见的过错信息：
-
AbortError［间断过错］虽然用户和操作系统都颁发了拜访设备硬件的权力，并且未呈现或许抛出
NotReadableError反常的硬件问题，但仍然有一些问题的呈现导致了设备无法被运用。 -
NotAllowedError［回绝过错］用户回绝了当时的浏览器实例的拜访恳求；或许用户回绝了当时会话的拜访；或许用户在大局范围内回绝了一切媒体拜访恳求。
-
NotFoundError［找不到过错］找不到满意恳求参数的媒体类型。
-
NotReadableError［无法读取过错］虽然用户现已授权运用相应的设备，操作系统上某个硬件、浏览器或许网页层面产生的过错导致设备无法被拜访。
-
OverconstrainedError［无法满意要求过错］指定的要求无法被设备满意，此反常是一个类型为
OverconstrainedError的目标，具有一个constraint特点，这个特点包括了当时无法被满意的constraint目标，还具有一个message特点，包括了阅览友爱的字符串用来阐明状况。 -
SecurityError［安全过错］在
getUserMedia()被调用的Document上面，运用设备媒体被制止。这个机制是否敞开或许封闭取决于单个用户的偏好设置。 -
TypeError［类型过错］constraints 目标未设置［空］，或许都被设置为
false。
插槽 （slot）
插槽称号 阐明 默认值 error 当发送过错时，在页面上显现的内容 相机权限被回绝提示 -
