Problèmes et solutions rencontrés dans le développement mobile H5

Le contenu de cet article concerne les problèmes et les solutions rencontrés dans le développement mobile H5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Erreur de signature de partage WeChat signature invalide

En mode historique d'application sur une seule page, le partage WeChat provoque toujours une erreur de signature signature invalide

Selon le document du site officiel de WeChat, jssdk a été introduit, corrigez Configurez un nom de domaine sécurisé js et la signature générée par le développeur backend est également vérifiée par l'outil de signature WeChat. Cependant, le partage personnalisé sur le front-end continue de signaler une erreur de signature et il n'y a aucun moyen de le faire. personnalisez le partage. Si vous vous assurez qu'il n'y a aucun problème avec la configuration de base et que la signature réussit également la vérification de l'outil de signature WeChat, il peut s'agir d'une erreur de signature causée par l'incohérence entre l'URL accessible par le front-end et l'URL. généré par l'arrière-plan.

Si le front-end transmet l'URL au back-end via ajax pour obtenir la signature, alors nous devons supprimer la partie de hachage de la page actuelle du lien, et nécessite encodeURIComponent

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

Normalement, cela peut permettre un partage personnalisé sur WeChat, mais une fois le routage de l'application d'une seule page changé, le côté IOS affiche toujours une erreur de signature, et le côté Android ne le fait pas. Problème

Cela est dû au fait que l'affichage en mode historique est commuté via pushState, mais le client IOS WeChat (le client Android a été corrigé) ne prend pas en charge la nouvelle fonctionnalité H5 de pushState, donc le routage a changé mais le navigateur WeChat L'URL obtenue n'a pas changé. Lorsque j'ai copié le lien dans le coin supérieur droit, j'ai constaté que l'URL enregistrée par WeChat est toujours l'URL lorsque je l'ai saisie pour la première fois, sauf si vous l'actualisez manuellement ou à l'aide de window.location. et d'autres méthodes de saut de page, vous pouvez obtenir la dernière URL

La solution consiste à enregistrer l'URL lors de la saisie de la page. S'il s'agit d'un appareil iOS, utilisez cette URL pour obtenir la signature WeChat

<.>

À l'heure actuelle, il est correct d'utiliser cette URL pour obtenir la signature WeChat. Cette méthode ne convient qu'aux appareils IOS. Tant que l'URL signée est cohérente avec l'URL enregistrée par WeChat, elle sera correcte. .

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])
}

Problème de mise en cache aller-retour

Cliquez sur l'avant et l'arrière du navigateur, parfois cela ne fonctionne pas. L'exécution automatique de js, en particulier dans Safari, a quelque chose à voir avec la mise en cache aller-retour (bfcache).

Solution : window.onunload = function(){};

S'il s'agit d'une application Vue monopage et que keep-alive est utilisé, la page ne sera pas actualisée pour le moment, certaines interfaces. les requêtes peuvent être Placez-le dans la méthode beforeRouteEnter

IOS ne prend pas en charge le format de new Date("2019-01-01 00:00:00")

Cette façon d'écrire une nouvelle Date ("2019-01 -01 00:00:00") est pris en charge du côté Android, mais pas du côté IOS, et une erreur NAN sera signalée, vous devez donc modifier la nouvelle Date ("2019-01- 01 00:00:00") à la nouvelle Date("2019/01/01 00:00:00") se présente sous la forme

Code QR WeChat

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

Une page peut avoir plusieurs codes QR, mais un appui long La reconnaissance des codes QR ne peut reconnaître que le dernier code QR Pour le moment, nous devons contrôler qu'un seul code QR puisse apparaître dans la zone visible de la page

Impossible. être cliqué sur IOS

span, p, etc. Les balises sur lesquelles on ne peut pas cliquer par défaut, la surveillance des événements de clic dans IOS ne sont pas valides

Solution, ajouter un curseur : pointeur ;

l'audio ne peut pas être joué

La méthode audio.play() peut être utilisée sur les appareils Android. Elle joue normalement, mais ne peut pas être lue sur le client IOS. Après avoir défini le src de l'audio, nous devons ajouter cette ligne de code audio.load() pour charger l'audio

Vous pouvez regarder l'audio en écoutant la méthode LoadData. S'il peut commencer à jouer, Android est configuré pour commencer à jouer une fois l'audio chargé, mais il peut y avoir un problème. léger retard du côté iOS. À ce moment-là, nous pouvons savoir si la lecture audio a commencé via audio.currentTime. Si cette valeur est supérieure à 0, cela signifie que la lecture a commencé

Réponse retardée de 300 ms. de l'événement de clic mobile IOS

Problème résolu

Dans les systèmes inférieurs à iOS8, lorsque le petit clavier est activé, le problème de position flottante se produira. La solution : il vous suffit d'ajouter des styles CSS au. middle external p Pour un contenu passionnant, vous pouvez faire attention à la colonne

Tutoriel vidéo HTML5

sur le site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!