应用场景:APK里面webView,访问用uniapp写的H5页面,需要调用设备摄像头扫描二维码
首先下载导入扫描插件:H5调用摄像头识别二维码(原生H5调用,不需要任何sdk,本地扫描识别,不需要后端) - DCloud 插件市场
插入好之后,新建页面用于展示扫描界面
<template>
<view>
<mumu-get-qrcode @success="qrcodeSucess" @error="qrcodeError" :continue="false">
<template v-slot:error>
<view>摄像头启动失败</view>
</template>
</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.$emit('refreshPreviousPage', data);
uni.navigateBack({
delta: 1
});
}
})
},
qrcodeError(err) {
console.log(err)
uni.showModal({
title: '摄像头授权失败',
content: '摄像头授权失败,请检测当前浏览器是否有摄像头权限。',
success: () => {
uni.navigateBack({})
}
})
}
}
}
</script>
<style></style>
点击扫描按钮
//扫描二维码
saomiao() {
uni.navigateTo({
url: `/pages/saomiao/saomiao`
})
},
这样就可以打开扫描界面,返回你扫描得到的信息。
切记!!!H5页面的环境必须是HTTPS!!!
切记!!!H5页面的环境必须是HTTPS!!!
切记!!!H5页面的环境必须是HTTPS!!!