正常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，作为扫码页面，在需要调用扫码功能的页面进行 页面跳转。但是我建议把点击事件和扫一扫写在同一页面，这样可解决点击浏览器自带返回按钮，返回到扫一扫页面的问题～～～～～～～～～～～～～～～～～～
