Ich bin kürzlich auf ein ziemlich neues Cordova-Plugin namens cordova-plugin-qrscanner ( Ссылка ) gestoßen. Ich habe vorher andere QR-Scanner benutzt, aber diese überlagern einfach eine Art native Kamera-UI, bis der QR gescannt wurde und kehren dann zur App zurück.
Allerdings ist der Ansatz dieses Plugins ein bisschen anders. Die Kamera wird tatsächlich "hinter" Ihrer App angezeigt und Sie müssen alles transparent machen, um es zu sehen.
Dies ist sehr interessant, weil Sie dann einfach benutzerdefinierte Überlagerungen mit HTML und CSS hinzufügen können. Ich bin mir jedoch nicht ganz sicher, was hier am besten ist.
Nachdem Sie das Plugin hinzugefügt und einfach QRScanner.scan(displayContents); aufgerufen haben, können Sie nichts mehr sehen, aber der Scanner läuft bereits im Hintergrund. Ich habe dann rekursiv alle Stile entfernt (siehe einfachste Weg, um zu entfernen alle Stile in einer Seite ) von der App und setzen Sie die Hintergrundfarbe auf transparent, um zu sehen, ob es funktionierte. Es tat, aber ich konnte offensichtlich immer noch den Text sehen, der vorher angezeigt wurde.
Ich denke, ich könnte eine neue Seite mit meinem Overlay erstellen und darauf schieben, die Hintergrundfarbe transparent machen und dann zurück navigieren, sobald der Code gescannt wurde. Aber das fühlt sich wirklich hacky.
Hat jemand dafür eine bessere Lösung?
Gibt es zum Beispiel eine Möglichkeit, den gesamten sichtbaren Teil der App mit dem Overlay zu "tauschen" und den Zustand wiederherzustellen, nachdem der Code gescannt wurde?
Danke für Ihre Hilfe.
BEARBEITEN:
Es ist nicht das gleiche Plugin, aber dieser Artikel ist relevant für meine Frage.
Das Anwenden der CSS-Stile funktioniert, aber auch hier ist der Rest der App nicht verwendbar.
@Andreas Ich hatte vor ein paar Wochen das Problem. Hier ist, wie ich es behoben habe:
1) Erstellen Sie zuerst eine Klasse namens lowOpacity auf Ihrem Thema / Variablen.Scss, es muss global sein, wenn Sie es in der scss der Seite erstellen hinzufügen es dynamisch nicht funktioniert:
%Vor%2) Wenn Sie den qrScanner anzeigen, sollten Sie die Klasse auf das ion-app-Element anwenden und optional eine backbutton-Aktion registrieren:
%Vor%3) Denken Sie daran, die Klasse zu entfernen, nachdem der qrScanner etwas gescannt hat, das geschlossen wurde:
%Vor%Hoffe es hilft
Ich würde die App nicht transparent machen, da ich den Sinn nicht verstehe. Stattdessen würden Sie einfach den Inhalt der Kamera in einem div auf Ihrer Seite anzeigen und andere HTML-Elemente darüber mit einem höheren Z-Index als das Element, das das Kamerabild enthält, überlagern.
Wie @vrijdenker sagte, sollten Sie den Inhalt der Kamera auf die richtige Ebene bringen und das CSS nicht unheimlich hacken.
Dafür können Sie Ihre App remote debuggen, um den Kamera-Container zu lokalisieren und etwas CSS darauf anzuwenden, um den Z-Index / Anzeige / etc.
zu ändernRemote-Debugging für Android:
Remote debuggen auf iOS:
Sie können das auf einem echten Gerät oder im Simulator tun