83 lines
1.3 KiB
Markdown
83 lines
1.3 KiB
Markdown
# H5扫码
|
|
|
|
## 简介
|
|
|
|
基于 [vue-qrcode-reader](https://github.com/gruhn/vue-qrcode-reader) 库封装的 H5 扫码组件。
|
|
|
|
特性：
|
|
|
|
- 支持手电筒
|
|
- 支持摄像头切换
|
|
- 支持一次扫多个二维码，可自行选择识别哪一个
|
|
|
|
|
|
|
|
## **示例**
|
|
|
|
安装依赖
|
|
|
|
```bash
|
|
npm install vue-qrcode-reader
|
|
```
|
|
|
|
使用
|
|
|
|
```vue
|
|
<template>
|
|
<button @click="scanCode">扫一扫</button>
|
|
|
|
<!-- #ifdef H5 -->
|
|
<cshaptx4869-scancode
|
|
v-if="h5ScanCode"
|
|
@success="handleSuccess"
|
|
@fail="handleFail"
|
|
@close="handleClose"
|
|
></cshaptx4869-scancode>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const h5ScanCode = ref(false);
|
|
function scanCode() {
|
|
// #ifdef H5
|
|
h5ScanCode.value = true;
|
|
// #endif
|
|
// #ifndef H5
|
|
uni.scanCode({
|
|
success: (res) => {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res.result,
|
|
});
|
|
},
|
|
faile: (err) => {
|
|
console.log("err", err);
|
|
},
|
|
});
|
|
// #endif
|
|
}
|
|
function handleSuccess(res) {
|
|
h5ScanCode.value = false;
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res,
|
|
});
|
|
}
|
|
function handleFail(err) {
|
|
uni.showModal({
|
|
title: err.errName,
|
|
content: err.errMsg,
|
|
complete: () => {
|
|
h5ScanCode.value = false;
|
|
},
|
|
});
|
|
}
|
|
function handleClose() {
|
|
h5ScanCode.value = false;
|
|
}
|
|
</script>
|
|
```
|
|
|