Notes for a front-end developer, esyou.net

0%

解决phonegap-plugin-barcodescanner插件开启扫码时点击返回后导致触发页面回退两次

发表于 分类于 Valine：
本文字数： 2k 阅读时长 ≈ 2 分钟

其实在使用了多次phonegap-plugin-barcodescanner插件后，发现这个插件其实有个问题，就是在android手机上，扫码界面没有取消按钮或返回按钮，但是ios上却提供了一个取消按钮。当我们点击返回按钮时，会导致android上触发两次backButton的事件，从而导致页面回退2页，本来我们只是想关闭扫码页面而已，但却在关闭扫码页面后，当前页面又返回到上一页。
以下场景应用在ionic上，如果是非ionic应用，请根据cordova官方提供的监听backButton事件来进行监听是否触发了返回按钮。

barScannerServicce.ts

对phonegap-plugin-barcodescanner进行封装，并手动修改对应的状态

1
import { Injectable } from '@angular/core';
2
import { BarcodeScanner } from '@ionic-native/barcode-scanner';
3
import { BehaviorSubject } from 'rxjs';
4
@Injectable()
5
export class BarScannerService{
6
    scannerState = new BehaviorSubject(false);
7
    constructor(public barcodeScanner: BarcodeScanner){
8
9
    }
10
11
    scan() {
12
        let options = {
13
            prompt: "请将条形码/二维码放置于取景框内扫描",
14
            resultDisplayDuration: 0 // android禁止返回扫描内容
15
        };
16
        // 重点，修改状态
17
        this.scannnerState.next(true);
18
        this.barcodeScanner.scan(option).then(barcodeData => {
19
            // do something
20
        }).catch(err => {
21
            console.log(`barcode scan is err: ${err}`);
22
        })
23
    }
24
25
    // 重置扫描状态
26
    resetScannerState() {
27
        this.scannnerState.next(false);
28
    }
29
30
    // 获取当前扫描状态
31
    getScannerState() {
32
        return this.scannnerState.value;
33
    }
34
}

监听返回事件

一般在入口文件处对返回事件进行监听
ionic3中采用platform.registerBackButtonAction监听；ionic4中采用platform.backButton进行监听，代码如下：

1
import { BarScannerService } form "../sevice/barScannerService.ts";
2
@Component({
3
    templateUrl: "app.html";
4
})
5
export class App{
6
    constructor(public barScannerService: BarScannerService){
7
        // ionic3
8
        this.platform.registerBackButtonAction((): any => {
9
            // barcode scanner状态监听
10
            if(this.barScannerService.actualState()) {
11
                this.barScannerService.resetScannerState();
12
                return;
13
            }
14
        })
15
16
        // ionic4
17
        this.platform.backButton.subscribeWithPriority(10, () => {
18
            if(this.barScannerService.actualState()) {
19
                this.barScannerService.resetScannerState();
20
                return;
21
            }
22
        })
23
    }
24
}

更多其他的解决方法，大家可以关注phonegap-plugin-barcodescanner的issue，关于这个问题的解决方法可以查看
https://github.com/phonegap/phonegap-plugin-barcodescanner/issues/717