uniapp h5实现扫一扫功能

正常uniapp小程序使用uni.scanCode实现扫一扫功能即可，但是当要求使用h5调用摄像头识别二维码可以使用 mumu-get-qrcode组件，
切记
只支持https域名
只支持https域名
只支持https域名
因为uniapp自带的api不支持h5，而且非微信环境也无法使用公众号isjdk的扫码，只能尝试其他方法但是发现只能https域名才可以调用，其他所有人的都不许http域名。开发调试记得去把这两个点起来，manifest.json => web配置 => 启动https协议

插件市场地址:(H5调用摄像头识别二维码(原生H5调用，不需要任何sdk，本地扫描识别，不需要后端))

HBX 导入就行，引用，注册，使用

<template>
    <view class="">
        <view class="flex align-center" @click="handleScan()">
            <image src="@/static/images/scan_icon.png" style="width: 50rpx;height: 50rpx;"/>
            <view class="ml-1 font32">
                扫一扫
            </view>
        </view>
        <view class="sectionview flex-center" v-if="showScan" @click="showScan=false">
            <mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError">
                <template v-slot:error>
                    <view>摄像头启动失败</view>
                </template>
            </mumu-get-qrcode>
        </view>
    </view>
</template>

<script>
    import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'
    export default {
        components: {
            mumuGetQrcode
        },
        data() {
                showScan: false
        },
        methods: {
            handleScan() {
                this.showScan = true;
            },
            qrcodeSucess(data) {
                this.$tab.navigateTo(`/pages/assetList/detail?assetsCode=` + data +
                    '&flag=2') //扫码跳转页面
                this.showScan = false;
            },
            qrcodeError(err) {
                console.log(err)
                uni.showModal({
                    title: '摄像头授权失败',
                    content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
                    success: () => {
                        uni.navigateBack({})
                    }
                })
                this.showScan = false;
            },
        }
    }
    

</script>

<style>
    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sectionview {
        position: fixed;
        top: 0;
        left: 0rpx;
        width: 100%;
        height: 100vh;
        z-index: 0;
    }
</style>

导入插件，使用的时候可能会报错，则需要安装 jsQR

# 安装 jsQR
npm install jsqr --save

# 修改组件源码对 jsQR 依赖
import jsQR from "jsqr"

也可以单独新建页面 scan-qrcode，作为扫码页面，在需要调用扫码功能的页面进行 页面跳转。但是我建议把点击事件和扫一扫写在同一页面，这样可解决点击浏览器自带返回按钮，返回到扫一扫页面的问题～～～～～～～～～～～～～～～～～～