Probleme und Lösungen bei der mobilen H5-Entwicklung

Der Inhalt dieses Artikels befasst sich mit den Problemen und Lösungen, die bei der mobilen H5-Entwicklung auftreten. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.

WeChat-Freigabe-Signaturfehler, ungültige Signatur

Im einseitigen Vue-Anwendungsverlaufsmodus fordert die WeChat-Freigabe immer zu einem Signaturfehler, ungültige Signatur

Laut dem offiziellen WeChat-Website-Dokument jssdk wurde eingeführt, richtig Konfigurieren Sie einen sicheren JS-Domänennamen, und die vom Backend-Entwickler generierte Signatur wird auch vom WeChat-Signaturtool überprüft. Die benutzerdefinierte Freigabe im Frontend meldet jedoch weiterhin einen Signaturfehler, und es gibt keine Möglichkeit, dies zu tun Passen Sie die Freigabe an. Wenn Sie sicherstellen, dass es keine Probleme mit der Grundkonfiguration gibt und die Signatur auch die Überprüfung durch das WeChat-Signatur-Tool besteht, liegt möglicherweise ein Signaturfehler vor, der durch die Inkonsistenz zwischen der vom Front-End aufgerufenen URL und der URL verursacht wird vom Hintergrund generiert.

Wenn das Front-End die URL über Ajax an das Back-End weitergibt, um die Signatur zu erhalten, müssen wir den #'Hash-Teil der aktuellen Seite aus dem Link entfernen und benötigen encodeURIComponent

let url = location.href.split('#')[0]
encodeURIComponent(url)

Normalerweise kann dadurch eine benutzerdefinierte Freigabe auf WeChat erreicht werden, aber nach der Umstellung auf das Single-Page-Application-Routing meldet die IOS-Seite immer noch einen Signaturfehler und die Android-Seite hat kein Problem

Dies liegt daran, dass die Ansicht im Verlaufsmodus über pushState umgeschaltet wird, der IOS-WeChat-Client (der Android-Client wurde repariert) die neue H5-Funktion von pushState jedoch nicht unterstützt, sodass sich das Routing ändert, der WeChat-Browser jedoch die URL erhält Kopieren Sie den Link in der oberen rechten Ecke und stellen Sie fest, dass die von WeChat aufgezeichnete URL immer noch die URL ist, die Sie zum ersten Mal eingegeben haben. Sofern Sie sie nicht manuell aktualisieren oder window.location und andere Seitensprungmethoden zum Aktualisieren verwenden, können Sie die neueste Version abrufen URL

Die Lösung besteht darin, die URL beim Aufrufen der Seite aufzuzeichnen. Wenn es sich um ein iOS-Gerät handelt, verwenden Sie diese URL, um die WeChat-Signatur zu erhalten.

router.afterEach(to => {
  sessionStorage.setItem('currentUrl',window.location.href)
})
let url = encodeURIComponent(location.href.split('#')[0])
if(system == "iOS" && sessionStorage.getItem('currentUrl')) {
  url = encodeURIComponent(sessionStorage.getItem('currentUrl').split('#')[0])
}

Zu diesem Zeitpunkt ist es richtig Verwenden Sie diese URL, um die WeChat-Signatur zu erhalten. Diese Methode ist nur für iOS-Geräte geeignet. Solange die signierte URL mit der von WeChat aufgezeichneten URL übereinstimmt, ist dies korrekt

Round-Trip-Caching-Problem

Durch Klicken auf die Vorwärts- und Rückwärtsschaltflächen des Browsers wird js manchmal nicht automatisch ausgeführt. Insbesondere in Safari hat dies mit Roundtrip-Caching (bfcache) zu tun.
Lösung: window.onunload = function(){};

Wenn es sich um eine Vue-Einzelseitenanwendung handelt und Keep-Alive verwendet wird, wird die Seite zu diesem Zeitpunkt nicht aktualisiert Anfragen können gestellt werden. Platzieren Sie es in der beforeRouteEnter-Methode.

IOS unterstützt das Format von new Date("2019-01-01 00:00:00") nicht.

Diese Schreibweise ist neu Date("2019-01 -01 00:00:00") wird auf der Android-Seite unterstützt, auf der IOS-Seite jedoch nicht, und es wird ein NAN-Fehler gemeldet, daher müssen Sie das neue Date("2019-01 -01 00:00:00") zum neuen Datum("2019/01/01 00:00:00") ist in dieser Form

let date = '2019-01-01 00:00:00'
date.replace(/\-/g, '/')

WeChat QR-Code

Eine Seite kann haben Mehrere QR-Codes, aber lange drücken, um zwei zu identifizieren. Der QR-Code kann nur den letzten QR-Code erkennen. Zu diesem Zeitpunkt müssen wir steuern, dass nur ein QR-Code im sichtbaren Bereich der Seite angezeigt werden kann

Kann unter IOS nicht angeklickt werden

span, p usw. können standardmäßig nicht angeklickt werden. Angeklickte Tags, Überwachung von Klickereignissen in IOS sind ungültig
Lösung, Cursor hinzufügen: Zeiger;

Audio Audio kann nicht abgespielt werden

Die Methode „audio.play()“ kann auf Android-Geräten normal abgespielt werden, aber nicht auf dem IOS-Client. Nachdem wir den Quellcode für Audio festgelegt haben, müssen wir diese Codezeile hinzufügen 🎜>audio.load() zum Laden des Audios

Sie können überprüfen, ob das Audio in Ordnung ist, indem Sie sich die Methode „Wiedergabe starten“ anhören. Android ist so eingestellt, dass die Wiedergabe beginnt, nachdem das Audio geladen wurde. Dies kann jedoch der Fall sein Eine leichte Verzögerung auf der iOS-Seite. Zu diesem Zeitpunkt können wir über audio.currentTime feststellen, ob die Audiowiedergabe begonnen hat.

300 ms verzögerte Reaktion von IOS Mobile Click Event

Problem behoben

In Systemen unter iOS8 tritt bei Aktivierung der kleinen Tastatur das Positionsschwebeproblem auf. Lösung: Fügen Sie einfach CSS-Stile zur äußeren Ebene hinzu im mittleren Teil

position:fixed;top:50px;bottom:50px;overflow:scroll;

Dieser Artikel ist hier, es gibt noch weitere spannende Inhalte, auf die Sie achten können

HTML5-Video-Tutorial Spalte auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonProbleme und Lösungen bei der mobilen H5-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!