Хобрук: Ваш путь к мастерству в программировании

Плагин Angular2 + Cordova + сканер штрих-кода: поведение Android

Я пытаюсь использовать сканер штрих-кода в своем приложении Angular2 с Cordova и относительным плагином.

Я могу просто протестировать на Android сейчас, и я получаю странное поведение. Я не могу найти проблему, будь то плагин или мой код.

Сканирование работает правильно, но после переключения с активности камеры на веб-просмотр приложения кажется, что события и привязка данных плохо обрабатываются.

Когда сканирование возвращает результат, я устанавливаю свойство в своем представлении, чтобы сообщить приложению, что состояние сканирования является успешным, и поэтому мое угловое представление показывает некоторые кнопки, например, для открытия ссылки.

Одни работают, другие нет. Также, если я повторно сканирую код и отменяю его, выходя из активности камеры, он показывает мне предыдущий не показанный результат.. Или иногда просто не работает :(

ЯВАСКРИПТ:

export class ScanQRView extends View {

    private scanState: string = 'ready';


    [....]


    public scan(): void {

        if (this.utility.inApp('barcodeScanner')) {

            cordova.plugins.barcodeScanner.scan(
                (result) => {
                    setTimeout(() => {
                        if (!result.cancelled) {
                            this.onResult(result.text);
                            console.log(this.scanState);
                        } else {
                            this.onResult(false);
                        }
                    }, 500);
                },
                (error) => this.onResult(false), {
                    preferFrontCamera : true, 
                    showFlipCameraButton : true, 
                    showTorchButton : true,
                    torchOn: true, 
                    //prompt : "Place a barcode inside the scan area", 
                    resultDisplayDuration: 500, 
                    formats : "QR_CODE", 
                    disableAnimations : true,
                    disableSuccessBeep: false 
                }
            );
        }
    }


    public onResult(result: string|boolean): void {
        if (result === false) {
            this.scanState = 'error';
        } else {
            this.link = result.toString();
            this.scanState = 'success';
        }
    }


}

ШАБЛОН:

<div class="row scan" *ngIf="scanState == 'ready'">
    <div class="col-xs-3"></div>
    <div class="col-xs-6">
        <button type="button" class="btn btn-info btn-lg btn-block fade-in-out-button" (click)="scan()">
            <i class="fa fa-camera" aria-hidden="true"></i>
        </button>
    </div>
    <div class="col-xs-3"></div>
</div>


<div class="row scan" *ngIf="scanState == 'success'">
    <div class="col-xs-12">
        <div class="btn-group">
            <div class="btn-group">
                <button type="button" class="btn btn-info btn-lg" (click)="cancel()">
                    <i class="fa fa-refresh" aria-hidden="true"></i>
                </button>
            </div>
            <div class="btn-group">   
                <button type="button" class="btn btn-info btn-lg fade-in-out-button" (click)="openLink()">
                    <i class="fa fa-link" aria-hidden="true"></i> Apri
                </button>
            </div>
        </div>
    </div>
</div>

Пробовал с таймером и без, ничего не меняется. У кого-нибудь были подобные проблемы?


Ответы:


1

Вы можете использовать обещание:

public scan(): void {
this.promiseScan().then(result => {
  this.resultQrcode = result;
}).catch((ex) => {
  console.log(ex);
});

}

public promiseScan(): any {
return new Promise((resolve, reject) => {
  cordova.plugins.barcodeScanner.scan(
    (result) => {
      return resolve(result.text);
    },
    (error) => {
      return reject('ERROR');
    }
  );
});

}

19.02.2018
  • это сработало для меня, спасибо. Я просто не уверен, почему это работает, а использование функции стрелки напрямую не работает. 08.02.2019
  • Новые материалы

    Понимание дженериков в TypeScript: подробное руководство
    Введение TypeScript, строго типизированный надмножество JavaScript, хорошо известен своей способностью улучшать масштабируемость, удобочитаемость и ремонтопригодность приложений. Одной из..

    Учебные заметки JavaScript Object Oriented Labs
    Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..

    Разбор строк запроса в vue.js
    Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..

    Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
    «Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..