uniapp h5浏览器扫描一维码（条形码）和二维码

扫描一维码和二维码

如果码小或者很密集可能识别不出来

<template>
    <view class="scan flex-center" @click="scanCode">
        <view>扫码</view>
        <view class="sectionview" v-if="scanshow == true" @click.stop="scanshowtab">
            <view class="qr-reader" id="qr-reader" style="width:100%;height:100%;"></view>
        </view>
    </view>
</template>

<script>
    // #ifdef H5
    import {
        Html5Qrcode
    } from 'html5-qrcode'
    // #endif
    export default {
        data() {
            return {
                cameraId: '',
                scanshow: false,
                scantext: '',
                html5QrCode: ''
            }
        },
        methods: {
            scanCode() {
                // #ifdef APP-PLUS
                const that = this
                uni.scanCode({
                    success: function(res) {
                        that.$emit('change', res.result)
                    }
                });
                // #endif
                // #ifdef H5
                this.getCameras()
                // #endif
            },
            scanshowtab() {
                this.scanshow = false
                this.stop();
            },
            getCameras() {
                this.$nextTick(() => {
                    if (this.scanshow) return
                    this.scanshow = true
                    Html5Qrcode.getCameras()
                        .then(devices => {
                            /**
                             * devices would be an array of objects of type:
                             * { id: "id", label: "label" }
                             */
                            if (devices && devices.length) {
                                if (devices.length > 1) {
                                    this.cameraId = devices[1].id;
                                } else {
                                    this.cameraId = devices[0].id;
                                }
                                this.start();
                            }

                        })
                        .catch(err => {
                            uni.$showMsg(err)
                            this.scanshow = false
                        });
                })
            },
            stop() {
                this.scanshow = false
                this.html5QrCode
                    .stop()
                    .then(ignore => {
                        // QR Code scanning is stopped.
                        console.log('QR Code scanning stopped.');
                    })
                    .catch(err => {
                        // Stop failed, handle it.
                        console.log('Unable to stop scanning.');
                    });
            },
            start() {
                this.html5QrCode = new Html5Qrcode('qr-reader');
                this.html5QrCode
                    .start(
                        this.cameraId, // retreived in the previous step.
                        {
                            fps: 10, // sets the framerate to 10 frame per second
                            qrbox: 250 // sets only 250 X 250 region of viewfinder to
                            // scannable, rest shaded.
                        },
                        qrCodeMessage => {
                            this.scantext = qrCodeMessage
                            // do something when code is read. For example:
                            if (qrCodeMessage) {
                                // uni.$showMsg(qrCodeMessage)
                                // uni.$showMsg(qrCodeMessage, 999)
                                // this.$refs.uToast.show({
                                // 	title: `扫码成功`,
                                // 	type: 'success'
                                // });
                                this.$emit('change', qrCodeMessage)
                                this.stop();
                            }
                        },
                        errorMessage => {
                            // uni.$showMsg('errorMessage' + errorMessage)
                            // parse error, ideally ignore it. For example:
                            // console.log(`QR Code no longer in front of camera.`);
                        }
                    )
                    .catch(err => {
                        // Start failed, handle it. For example,
                        console.log(`Unable to start scanning, error: ${err}`);
                        // this.$refs.uToast.show({
                        // 	title: `扫码失败：${err}`,
                        // 	type: 'error'
                        // });

                        uni.$showMsg(err)
                    });
            },
        }
    }
</script>

<style lang="scss">
    .scan {
        width: 56rpx;
        height: 56rpx;
        border-radius: 16rpx;
        background: rgba(255, 255, 255, 0.04);

        .img {
            width: 30rpx;
            height: 30rpx;
        }
    }

    .sectionview {
        position: fixed;
        top: 0;
        left: 0rpx;
        width: 100%;
        height: 100vh;
        background-color: green;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
    }

    .qr-reader {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0rpx;
    }
</style>

扫描二维码

码小或者很密集可以识别

<template>
    <view>
        <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 {};
        },
        methods: {
            qrcodeSucess(data) {
                uni.showModal({
                    title: '成功',
                    content: data,
                    success: () => {
                        uni.navigateBack({})
                    }
                })
            },
            qrcodeError(err) {
                uni.showModal({
                    title: '摄像头授权失败',
                    content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。'
                })
            }
        }
    };
</script>

插件地址：ext.dcloud.net.cn/plugin?id=7…

扫描一维码

<template>
    <view>
        <view class="" @click="openCameras">
            扫码
        </view>
        <view class="sectionview flex-center" v-if="show" @click="show=false">
            <mumu-one-code @success='handlerSuccess' definition :readers='["code_128_reader"]'></mumu-one-code>
        </view>
    </view>
</template>

<script>
    import MumuOneCode from '@/uni_modules/mumu-oneCode/components/mumu-oneCode/mumu-oneCode.vue'

    export default {
        components: {
            MumuOneCode
        },
        data() {
            return {
                show: false
            }
        },
        methods: {
            openCameras() {
                if (origin.indexOf('https') === -1) {
                    uni.$showMsg('请在 https 环境中使用摄像头组件。')
                    return
                }
                this.show = true;
            },
            handlerSuccess(code) {
                this.$emit('change', code)
                this.show = false
            }
        }
    }
</script>

<style lang="scss">
    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sectionview {
        position: fixed;
        top: 0;
        left: 0rpx;
        width: 100%;
        height: 100vh;
        z-index: 99;
    }
</style>

参考链接：

二维码：article.juejin.cn/post/701205…

条形码：ext.dcloud.net.cn/plugin?id=8…