UNIAPP郭
UNIAPP郭
  • 发布:2023-03-09 11:45
  • 更新:2023-03-09 16:22
  • 阅读:691

【报Bug】nvue 使用 barcode 组件在安卓手机下会黑屏

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS 13.0.1 M1

HBuilderX类型: 正式

HBuilderX版本号: 3.6.18

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: 小米

手机机型: MI 9 SE , ReamiK40

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://mcube.mpaas.accelerate.aliyuncs.com/ALIPUB9C08053141818-default/1.0.5/ANDROID/享云付_39.apk

示例代码:
<template>  
    <view>  
        <!-- #ifdef APP-PLUS -->  
        <barcode :style="{height: $store.state.windowHeight + 'px'}" id='1' class="barcode"  
            :autostart="true"  
            background="rgb(0,0,0)" frameColor="#FFFFFF" scanbarColor="#FFFFFF"  
            ref="barcode" :filters="fil"  
            @marked="success1" @error="fail1"></barcode>  
        <!-- #endif -->  
        <view class="navbar" :style="{height: $store.state.statusBarHeight * 2 + 88 + 'upx',  
                    paddingTop: $store.state.statusBarHeight * 2 + 'upx'}">  
            <view class="flex-between flex-y-center con">  
                <view class="btn-btn" @click="toBack">  
                    <image class="icon5" src="@/static/image/my/icon5.png" mode="widthFix"></image>  
                </view>  
                <view><text class="title">扫一扫</text></view>  
                <view class="btn-btn-1" @click="toFlash">  
                    <image class="icon6" src="@/static/image/my/icon6.png" mode="widthFix"></image>  
                </view>  
            </view>  
        </view>  
        <view class="tips"><text class="t1">正在识别中…</text></view>  
        <view class="tips2">  
            <view class="tips2-box">  
                <text class="t2-t">条形码/二维码</text>  
            </view>  
        </view>  
        <view class="tabbar">  
            <view class="image-box">  
                <image @click="toNFCPage" class="img" src="@/static/image/my/icon7.png" mode="widthFix"></image>  
                <image @click="chooseImage" class="img" src="@/static/image/my/icon8.png" mode="widthFix"></image>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    import {request} from '@/common/http/nvue.api.js'  
    import isNFC from '@/common/utils.js'  
    export default {  

        data() {  
            return {  
                fil: [0, 2, 1],  
                flash: false,  
            }  
        },  
        onLoad() {  
            this.$nextTick(() => {  
                setTimeout(() => {  
                    uni.$on('restartScan', () => {  
                        console.log('33333333')  
                        this.$refs.barcode.cancel();  
                        this.$refs.barcode.start();  
                    })  
                }, 1000)  
            })  
        },  
        onUnload() {  
            uni.$off('restartScan')  
        },  
        mounted() {  
            console.log("barcode:", this.$refs.barcode)  
            console.log("start:", this.$refs.barcode.start)  
            this.$refs.barcode.start();  
        },  

        methods: {  
            toBack() {  
                uni.navigateBack()  
            },  
            // 手电筒  
            toFlash() {  
                this.flash = !this.flash  
                this.$refs.barcode.setFlash(this.flash);  
            },  
            chooseImage() {  
                this.$refs.barcode.cancel();  
                uni.chooseImage({  
                    count: 1,  
                    sourceType: ['album'],  
                    success: (res) => {  
                        console.log(res)  
                        this.scanImg(res.tempFiles[0].path)  
                    },  
                    fail: err => {  
                        this.$refs.barcode.start();  
                        console.log(err)  
                    }  
                });  
            },  
            scanImg(path) {  
                plus.barcode.scan(path, (type, reuslt) => {  
                        console.log("Scan success:(" + type + ")" + reuslt);  
                        uni.navigateTo({  
                            url: '/pages/scan/payMoney?url=' + reuslt + '&type=QR'  
                        })  
                    },  
                    err => {  
                        uni.showToast({  
                            title: "未发现指定的条码",  
                            icon: 'none',  
                            duration: 2500  
                        })  
                        setTimeout(() => {  
                            this.$refs.barcode.start();  
                        }, 1500)  
                    })  
            },  
            success1(e) {  
                console.log('e', e)  
                uni.navigateTo({  
                    url: '/pages/scan/payMoney?url=' + e.detail.message + '&type=QR'  
                })  
            },  
            fail1(e) {  
                console.log("fail1:" + JSON.stringify(e));  
            },  
            toNFCPage() {  
                if(isNFC()) {  
                    this.$refs.barcode.cancel();  
                    uni.navigateTo({  
                        url: '/pages/scan/nfc?type=PAY_CASHIER'  
                    })  
                }else {  
                    setTimeout(() => {  
                        uni.navigateBack()  
                    }, 1500)  
                }  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .navbar {  
        width: 750upx;  
        background: #000;  
        position: fixed;  
        top: 0;  
        z-index: 100;  
        color: #fff;  
        align-items: center;  
        justify-content: center;  

        .con {  
            height: 88upx;  
            width: 690upx;  
            flex-direction: row;  
            align-items: center;  

            .btn-btn {  
                width: 100upx;  
            }  

            .btn-btn-1 {  
                width: 80upx;  
                flex-direction: row;  
                justify-content: center;  
            }  

            .title {  
                font-size: 40upx;  
                color: #fff;  
                font-weight: 500;  
            }  

            .icon5 {  
                width: 20upx;  
                height: 36upx;  
                display: block;  
            }  

            .icon6 {  
                width: 24upx;  
                height: 40upx;  
                display: block;  
            }  
        }  
    }  

    .tips {  
        position: fixed;  
        top: 250upx;  
        width: 750upx;  
        align-items: center;  
        justify-content: center;  

        .t1 {  
            color: #fff;  
            font-size: 32upx;  
        }  
    }  

    .tips2 {  
        position: fixed;  
        bottom: 300upx;  
        width: 750upx;  
        align-items: center;  
        justify-content: center;  

        .tips2-box {  
            align-items: center;  
            justify-content: center;  
            width: 210upx;  
            height: 40upx;  
            border-radius: 20upx;  
            background: #fff;  

            .t2-t {  
                font-size: 24upx;  
                color: #000;  
            }  
        }  
    }  

    .tabbar {  
        width: 750upx;  
        position: fixed;  
        bottom: 50upx;  
        align-items: center;  
        justify-content: center;  

        .image-box {  
            width: 600upx;  
            flex-direction: row;  
            justify-content: space-between;  
            align-items: center;  

            .img {  
                width: 72upx;  
                height: 72upx;  
                display: block;  
            }  
        }  
    }  

    .barcode {  
        width: 750rpx;  
        background-color: #808080;  
    }  
</style>  

操作步骤:
  • 多次返回上一页,进入扫码界面

预期结果:
  • 不会出现扫码黑屏,百分百扫码成功

实际结果:
  • 多次操作会黑屏

bug描述:

nvue 页面使用 barcode 组件,扫码黑屏

  • monted 生命周期中 调用 this.$refs.barcode.start() 这个方法,初次会打开摄像头
  • 返回上一页,重新进入扫码 nvue 页面
  • 多此操作,扫码界面黑屏
2023-03-09 11:45 负责人:DCloud_Android_DQQ 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

请麻烦 附件提供一下完整的HX示例demo项目

  • UNIAPP郭 (作者)

    上传demo 了,在安卓小米真机上反复操作几次就会黑屏

    2023-03-09 13:50

UNIAPP郭

UNIAPP郭 (作者) - 510587

案列demo

z***@163.com

z***@163.com

这个得在 app模块配置下 重新选下 Barcode 和 Camera&Gallery, 版本号最好也改下。

  • UNIAPP郭 (作者)

    Barcode 和 Camera&Gallery,,这个demo 上我没勾,在我项目里是勾了的。那个版本号要改成什么?

    2023-03-09 14:22

  • z***@163.com

    回复 UNIAPP郭: 就是随便给个 别和你 上一次的一样就行。这种情况是你勾选了打包 还是不可以扫描的情况下,可以试试改版本号

    2023-03-10 16:16

9***@qq.com

9***@qq.com

官方的demo运行了不出结果,是什么原因啊

DCloud_Android_DQQ

DCloud_Android_DQQ


mounted() {  
            console.log("barcode:", this.$refs.barcode)  
            console.log("start:", this.$refs.barcode.start)  
//把这行注释掉  
            // this.$refs.barcode.start();  
        },  

组件内部有自动star的逻辑,不需要外面手动调用。

即使手动调用,正常也无问题。你这个示例的问题,在于组件正在初始化,还没有赋予权限,就收到触发了start 导致了失败。赋予权限后手动启动就可以了。

要回复问题请先登录注册