Résumé des points de connaissances sur les mini-programmes WeChat

Chargement du sous-paquet des sous-paquets

Étant donné que la taille du paquet principal du mini-programme ne dépasse pas la limite de 2 Mo, c'est un bon choix d'utiliser le sous-paquet. La taille totale du sous-paquet ne dépasse pas. 8M Vous pouvez ajouter plus de sous-packages, le chargement du sous-package peut optimiser le temps de téléchargement lorsque le mini-programme est démarré pour la première fois. Lorsque vous entrez dans la page du sous-package puis téléchargez, ce chargement à la demande peut extraire certaines grandes quantités de. données et mettez-les dans des sous-packages (comme le graphique)

unité rpx,

La méthode d'adaptation la plus couramment utilisée sur le terminal mobile est d'utiliser rem ou vw comme unité d'adaptation, donc l'applet WeChat fournit une unité rpx pour adapter

Fenêtre contextuelle d'autorisation

ajustement de l'interface wx.getUserInfo Dans le passé, vous. pourrait appeler et afficher directement la fenêtre contextuelle d'autorisation. Vous devez maintenant utiliser Cliquez pour guider l'utilisateur à autoriser. L'interface du mini programme a été ajustée. La version d'essai et la version de développement peuvent toujours utiliser la méthode originale.

Z-index du composant natif

Le niveau du composant natif est le plus élevé, donc quel que soit le réglage du z-index, les autres composants dans la page ne peut pas La couverture des composants natifs peut être résolue par la vue de couverture, mais dans certains environnements spécifiques tels que les fenêtres contextuelles ou les fenêtres contextuelles, les composants natifs doivent être masqués et masqués. Vous devez utiliser

pseudo-élément

Les attributs de pseudo-élément du mini-programme ne peuvent pas être vus dans les attributs CSS de l'outil de développement WeChat, donc lorsque certains styles de composants ne peuvent pas être remplacés (comme la bordure de un bouton ou certains paramètres de ligne), c'est parce que le pseudo-élément ::after est défini, donc les pseudo-éléments doivent être utilisés pour couvrir

Pile de pages

Une l'application ne peut ouvrir que 5 piles de pages en même temps. Lorsque 5 sont déjà ouvertes. Une fois la page ouverte (la limite actuelle est de 10 niveaux), les nouvelles pages peuvent ne pas être ouvertes normalement. wx.navigateTo jump conservera la page actuelle, wx.redirectTo ne le fera pas, veuillez donc éviter les interactions à plusieurs niveaux et utiliser la méthode de saut de manière appropriée

Componentisation

Le module modèle et le composant composant sont des méthodes de composantisation dans les petits programmes. La différence entre les deux est que le module modèle est principalement destiné à l'affichage et que les méthodes doivent être définies dans la page à l'aide du modèle. Le composant composant a son propre fichier js et l'ensemble du composant composant est similaire à une page. Pour faire simple, c'est juste pour l'affichage. Il est recommandé d'utiliser un modèle. Il y a beaucoup de logique impliquée dans le composant. Il est recommandé d'utiliser le composant

Mode débogage<.> 1. Saut de source de l'outil de développement Cliquez sur débogage, console.log pour imprimer les données et AppData pour afficher les données

2. Faites attention à la version actuelle de la bibliothèque de base du mini programme pour déboguer une certaine compatibilité et problèmes de bugs

3. Le mini programme est d'abord dans la version de développement Ou ouvrez l'affichage de débogage de la vConsole dans le coin supérieur droit de la version d'essai, puis passez à la version officielle pour voir le mode vConsole

Transfert de données

1. Utiliser le cache de données, wx.setStorage Avec wx.getStorage, les données stockées ne peuvent être qu'au format chaîne, vous devez donc généralement utiliser JSON.stringfy pour convertir l'objet en chaîne lors de sa configuration et utiliser JSON.parse pour le restaurer dans l'objet lors de son obtention

2 , wx.navigateTo saute pour transmettre les paramètres et épisse la chaîne après en passant à l'URL. Dans la fonction onLoad(), obtenez les paramètres transmis via options.parameter name. Notez que s'il y a des caractères spéciaux (tels que ?#, etc.), vous pouvez utiliser encodeURIComponent et decodeURIComponent pour encoder et décoder, sinon, il sera tronqué, ce qui empêchera la transmission des données derrière les caractères spéciaux

3. La fonction getCurrentPages() est utilisée pour obtenir l'instance de la pile de pages actuelle que vous pouvez obtenir. la pile de pages ou Modifier les données de la pile de pages

4. getApp() peut obtenir des objets et des méthodes globales

Adaptation de l'alignement des capsules de la barre de navigation

La barre de navigation est généralement personnalisée, ce qui est plus flexible et contrôlable. Tout d'abord, vous devez définir navigationStyle: custom dans app.json, puis utiliser le mini programme wx.getMenuButtonBoundingClientRect() pour obtenir les informations de localisation du. menu capsule dans le coin supérieur droit, mais cette interface est instable, certains modèles auront un bug qui ne parviendra pas à obtenir, utilisez donc wx.getSystemInfo pour obtenir la hauteur de la barre d'état de l'appareil (c'est-à-dire la hauteur du téléphone mobile). temps et batterie), hauteur de la barre de titre (c'est-à-dire y compris la touche de retour de navigation, le titre et la hauteur de la capsule) Le paramètre par défaut est 48 pour Android et 44 pour iOS (la capsule par défaut de l'applet est de 48 pixels au centre de la barre de titre sous Android. Comme il existe de nombreuses catégories Android, il y aura une légère différence. L'ios est de 44 pixels au centre de la barre de titre). La hauteur totale de la barre de navigation est la hauteur de la barre d'état + la hauteur du titre. barre, la hauteur du haut du remplissage est la hauteur de la barre d'état et les éléments de la barre de titre sont alignés verticalement pour s'adapter et s'aligner avec la capsule. Lors de la définition de la hauteur du contenu, vous pouvez utiliser calc (100vh - la hauteur totale de. la barre de navigation). Le style est placé dans l'identifiant global app.wxss

unionid

Unionid est l'identification inter-programmes des utilisateurs du mini-programme. Pour avoir un unionid, vous devez d'abord lier la plateforme ouverte WeChat (plateforme ouverte WeChat - plateforme de gestion - mini-programme - mini-programme de liaison), car l'unionid est distribué. par la plateforme ouverte WeChat. Lorsque le mini-programme est lié à la plateforme ouverte WeChat, il n'y aura pas d'unionid. Lorsque l'unionid des différents mini-programmes est différent, le mini-programme doit être monté sur le même sujet. , pour différentes applications sous la même plateforme ouverte WeChat, les unionid sont les mêmes

L'arrière-plan renvoie l'unionid au front-end : wx.login obtient d'abord le code d'identification de connexion de l'utilisateur, puis wx.getSetting vérifie s'il est autorisé, wx.getUserInfo obtient les informations utilisateur et les envoie en arrière-plan via le champ crypté des informations utilisateur. Le serveur WeChat renvoie l'unionid en retour Puisque les données renvoyées par la requête peuvent être renvoyées après Page.onLoad, un. un rappel est généralement ajouté (l'obtention de l'unionid est généralement placée dans onLaunch de app.js, donc un rappel est nécessaire pour le traiter ainsi que les données de la page onLoad. Get)

Demande d'interface

Il est recommandé d'extraire toutes les requêtes dans le même api.js, ce qui peut faciliter les modifications et le dépannage ultérieurs. Les requêtes du mini-programme se font via le backend WeChat demande notre adresse backend pour le mappage backend. mappé au backend WeChat. Le backend WeChat obtient l'URL appelée par votre wx.request et utilise le backend pour demander le backend. Il n'y aura donc pas de problèmes entre domaines

clavier de saisie.

Envisagez d'utiliser différents types dans différents scénarios, tels que le clavier texte et le clavier numérique pour améliorer l'expérience utilisateur

wux-weapp

Nous recommandons wux- weapp en tant que petit composant de programme, avec des composants riches et une extension flexible

Tutoriel recommandé : "WeChat Mini Program"

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!