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
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.
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, '/')
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
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;
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
position:fixed;top:50px;bottom:50px;overflow:scroll;
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!
