uniapp开发H5项目扫描二维码
因为调用了手机摄像头扫描二维码,所以只支持https域名,一开始我就是在http环境下,进入扫描时,摄像头不起作用,扫描不了,所以一定要在https域名下进行扫描。在uniapp中有专门扫描的方法,uni.scanCode,但是好巧不巧H5端它却不支持,现在简单的东西就变麻烦了。H5项目扫描二维码,获取解析的code,传入接口,获取数据。下载mumu-getQrcode插件,导入项目中,
·
文章目录
需求
H5项目扫描二维码,获取解析的code,传入接口,获取数据。
一、uniapp扫描
在uniapp中有专门扫描的方法,uni.scanCode,但是好巧不巧H5端它却不支持,现在简单的东西就变麻烦了。
二、H5项目扫描二维码-mumu-getQrcode插件
1.mumu-getQrcode插件
下载mumu-getQrcode插件,导入项目中,mumu-getQrcode插件下载地址
##导入到项目中后,就可以创建页面使用了,列如我创建的sacn.vue
sacn.vue代码如下(示例):
```c
<template>
<view class="container">
<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 {
}
},
name: 'Qrcode',
methods: {
qrcodeSucess(data) { //摄像头扫码成功后返回
console.log('摄像头扫码成功 =>', data)
uni.showModal({
title: '成功',
content: data,
success: () => {
}
})
},
qrcodeError(err) { //摄像头扫码失败返回
uni.showModal({
title: '摄像头授权失败',
content: '摄像头授权失败,请检测当前浏览器是否有摄像头权限。',
success: () => {
uni.navigateBack({}) //返回到上一页
}
})
}
},
onLoad() {
}
}
</script>
<style scoped lang="scss">
.container {
height: 100%;
}
</style>
2.在要点击扫描的方法上,跳转到这个sacn.vue页面
scanCode() {
uni.navigateTo({
url: '/pages/scan/scan'
})
}
特别注意
因为调用了手机摄像头扫描二维码,所以只支持https域名,一开始我就是在http环境下,进入扫描时,摄像头不起作用,扫描不了,所以一定要在https域名下进行扫描。
更多推荐
所有评论(0)