1***@163.com
1***@163.com
  • 发布:2023-08-11 11:01
  • 更新:2023-08-14 17:42
  • 阅读:258

【报Bug】uniapp 自定义扫码,barcode setFlash iOS无效,Android可用

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.6

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

手机系统: iOS

手机系统版本号: iOS 16

手机厂商: 苹果

手机机型: iPhone se

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view>
<!-- 扫码页面 -->
<!-- #ifndef APP-PLUS -->
<view class="wrap">
<view class="u-tips-color">
请在app中打开
</view>
</view>
<!-- #endif -->
</view>
</template>

<script>
export default {
data() {
return {
from: '',
barcode: null,
flash: false,
tip: '将取景框对准二维码/条码,即可自动扫描',
barcodeTypes: [plus.barcode.EAN13,plus.barcode.EAN8,plus.barcode.QR],
}
},
onShow() {
// 页面展示时,重新启动扫描检测
if (this.barcode) {
this.barcode.start()
}
},
onLoad(option) {
this.from = option.from
// #ifdef APP-PLUS
// plus.navigator.setFullscreen(true); //全屏
let currentWebview = this.$scope.$getAppWebview();
this.createBarcode(currentWebview)
this.createTipInfoView(currentWebview)
this.createFlashBarView(currentWebview)
// #endif
},
mounted() {

    },  
    methods: {  
        /**  
         * 创建二维码  
         * @param {Object} currentWebview  
         */  
        createBarcode(currentWebview) {  
            if (!this.barcode) {  
                this.barcode = plus.barcode.create('barcode', this.barcodeTypes, {  
                    top: `0px`,  
                    left: '0px',  
                    height: `100%`,  
                    width: '100%',  
                    position: 'absolute',  
                    background: '#06C263',  
                    frameColor: '#06C263',  
                    scanbarColor: '#06C263',  
                });  
                this.barcode.onmarked = this.onmarked;  
                this.barcode.setFlash(this.flash);  
                //此处未演示扫码成功回调的地址设置,实际请参考HTML5Plus API自行处理    
                //注意扫码区域需为正方形,否则影响扫码识别率    
                currentWebview.append(this.barcode);  
            }  
            this.barcode.start()  
        },  

        /**  
         * 创建提示信息  
         * @param {Object} currentWebview  
         */  
        createTipInfoView(currentWebview) {  
            var top = ''  
            if (uni.getSystemInfoSync().platform == "ios") {  
                top = '77%'  
            } else {  
                top = '70%'  
            }  
            const content = new plus.nativeObj.View('content', {  
                    top: '0px',  
                    left: '0px',  
                    height: '100%',  
                    width: '100%'  
                },  
                [{  
                    tag: 'font',  
                    id: 'scanTips',  
                    text: this.tip,  
                    textStyles: {  
                        size: '14px',  
                        color: '#ffffff',  
                        whiteSpace: 'normal'  
                    },  
                    position: {  
                        top: top,  
                        left: '10%',  
                        width: '80%',  
                        height: 'wrap_content'  
                    }  
                }]);  
            currentWebview.append(content);  

        },  
        // 创建 开关灯按钮  
        createFlashBarView(currentWebview) {  
            var top = ''  
            if (uni.getSystemInfoSync().platform == "ios") {  
                top = '69%'  
            } else {  
                top = '62%'  
            }  
            const openImg = this.crtFlashImg('static/yellow-scanBar.png')  
            const closeImg = this.crtFlashImg('static/scanBar.png')  
            const scanBarVew = new plus.nativeObj.View('scanBarVew', {  
                    top: top,  
                    left: '40%',  
                    height: '10%',  
                    width: '20%',  
                },  
                closeImg);  
            scanBarVew.interceptTouchEvent(true);  

            currentWebview.append(scanBarVew);  

            scanBarVew.addEventListener("click", (e) => { //点亮手电筒  
                this.flash = !this.flash;  
                if (this.flash) {  
                    scanBarVew.draw(openImg);  
                } else {  
                    scanBarVew.draw(closeImg)  
                }  
                if (this.barcode) {  
                    this.barcode.setFlash(this.flash);  
                }  
            }, false)  
        },  
        crtFlashImg(imgsrc) {  
            return [{  
                tag: 'img',  
                id: 'scanBar',  
                src: imgsrc,  
                position: {  
                    width: '28%',  
                    left: '36%',  
                    height: '30%'  
                }  
            }, {  
                tag: 'font',  
                id: 'font',  
                text: '轻触照亮',  
                textStyles: {  
                    size: '10px',  
                    color: '#ffffff'  
                },  
                position: {  
                    width: '80%',  
                    left: '10%'  
                }  
            }]  
        },  
        // 扫码成功回调  
        onmarked(type, result) {  
            console.log('条码类型:' + type);  
            console.log('条码内容:' + result);  
            let data = {  
                from: this.from,  
                type: type,  
                code: result  
            }  
            uni.$emit("scan-"+this.from,data)  
            uni.navigateBack()  
        }  

    }  
}  

</script>

<style scoped>
.wrap {
height: calc(100vh);
/ #ifdef H5 /
height: calc(100vh - var(--window-top));
/ #endif /
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>

操作步骤:

打开扫码页面,点击轻触照亮

预期结果:

可以照亮

实际结果:

iOS无法照亮,Android可以照亮

bug描述:

uniapp 自定义扫码,barcode setFlash iOS无效,Android可用

2023-08-11 11:01 负责人:无 分享
已邀请:
DCloud_iOS_WZT

DCloud_iOS_WZT

未复现提供一个简单的示例工程吧

  • 1***@163.com (作者)

    不知为何,又可以了-_-

    2023-08-16 09:55

  • DCloud_iOS_WZT

    回复 1***@163.com: 你再试试 有问题的话发一个示例给我

    2023-08-16 11:19

要回复问题请先登录注册