Introduction détaillée à WXML, WXSS et JS pour le développement WeChat

Cet article présente principalement les informations pertinentes sur l'introduction et l'explication détaillée de WXML, WXSS et JS de l'applet WeChat. Les amis dans le besoin peuvent s'y référer

J'ai passé beaucoup de temps il y a quelques jours. . Énumérez ensuite quelques résultats expérimentaux pour votre référence.

Il y a une grande différence entre la simulation utilisant des outils de développement et la machine réelle. Je suggère également qu'il est plus fiable de déboguer sur une vraie machine.

1. WXML (HTML)

1.1 Le WXML du mini programme n'est pas aussi tolérant que le HTML, et la balise unique doit se terminer par /> ;. Sinon, une erreur sera signalée.

1.2 La balise de base officiellement recommandée est une balise de bloc, et est utilisée comme balise de texte, mais d'autres balises telles que p peuvent également être utilisées, et ce sont toutes des balises en ligne. . Et l'analyseur wxml supprimera tous les attributs de la balise qui ne figurent pas sur la liste blanche, la classe, l'identifiant et les données devraient tous être dans la liste blanche, mais il n'y aura pas de href ou quelque chose comme ça, donc si vous utilisez des balises html traditionnelles. Il est théoriquement possible de créer une page, mais ce sont des balises en ligne et vous devez définir l'affichage vous-même.

1.3 Le défilement vers le haut et vers la gauche de la vue défilante peut modifier la position de défilement de la vue défilante. Cependant, après le défilement de l'utilisateur, l'applet ne modifiera pas l'affectation du défilement vers le haut et vers la gauche (il ne s'agit pas d'une synchronisation bidirectionnelle). Si vous utilisez setData pour le modifier à ce moment-là, l'affectation de scroll-top et scroll-left sera la même que la dernière valeur. L'applet n'appliquera pas cette modification, donc la performance est que le paramètre ne prend pas effet. Pour le moment, vous ne pouvez d'abord définir qu'une autre valeur, puis la redéfinir (cela peut également indiquer que la méthode setData est synchrone). scroll-view obtient la position de défilement, qui ne peut être obtenue que via la fonction de rappel bindscroll, donc si vous avez besoin d'obtenir la position de défilement, veuillez la sauvegarder vous-même. scroll-view a toujours le problème puant du défilement de la vue Web. Si la première action consiste à faire défiler vers le bas en position haute, la main ne pourra pas faire défiler, quelle que soit la façon dont vous la faites glisser. mais à 1. d'accord.

La saisie 1.4 ne prend actuellement en charge que le texte à gauche, les autres ne sont pas possibles (le simulateur le peut). Si vous créez un formulaire, il est recommandé de placer l'entrée et les autres éléments du formulaire dans le formulaire. Lors de la soumission des déclencheurs, il renverra le nom-valeur de tous les éléments internes du formulaire. Sinon, cela ne peut être obtenu qu'en liant les événements de changement de tous les éléments du formulaire, ce qui est très gênant.

1.5 Seul le groupe de cases à cocher a un événement de changement, et une seule case à cocher n'en a pas. Si vous n'avez qu'une seule case à cocher et que vous pensez qu'il est gênant et inesthétique d'avoir un groupe de cases à cocher à l'extérieur, vous pouvez utiliser switch. tapez="checkbox" à la place. (Groupe de communication du compte d'application du mini programme WeChat 563752274)

La construction de la carte 1.6 provoque actuellement un échec de chargement lors du chargement directement sur la première page de l'application. Doit être ajouté après onLoad. Vous pouvez d'abord utiliser wx:if="false" puis le changer en true après onLoad.

Carte 1.7, le canevas revient à couvrir un composant natif sur la vue Web. Ils ne peuvent pas être couverts par le débordement et les éléments. Vous pouvez penser que le z-index ne peut pas être placé dessus, quelle que soit la hauteur à laquelle il est écrit. Par conséquent, il n'est pas recommandé de créer des calques élastiques et des calques de masquage sur la page. Le canevas ne peut pas être placé en vue de défilement et le défilement sera positionné à la position initiale. Si vous définissez la couleur d'arrière-plan du canevas, vous constaterez que le bloc de couleur d'arrière-plan défile avec lui, mais l'image ne défile pas.

2. WXSS(CSS)

2.1 WXSS est très similaire à CSS, fondamentalement tous les CSS sont pris en charge et le mini-programme fournit également l'unité rpx. . Une largeur d'écran est de 750rpx. Il est recommandé de l'utiliser comme mise en page. Cependant, il existe quelques différences mineures que je vais énumérer ci-dessous

2.2 WXSS ne prend pas en charge les accolades imbriquées ({{}}). Les images clés et l'animation CSS ne sont donc pas disponibles, mais la transition est disponible.

2.3 Les polices introduites dans le test actuel sont également indisponibles. Le contenu mentionné précédemment en WXML ne peut pas être utilisé en SVG. Par conséquent, les icônes ne peuvent actuellement être créées que sous forme d’images.

2.4 Les ressources locales ne peuvent pas être introduites dans WXSS, seules les ressources en ligne peuvent être utilisées (le simulateur est disponible, mais n'y croyez pas), vous pouvez utiliser base64. (Groupe de communication du compte d'application de l'applet WeChat 563752274)

2.5 La règle WXSS ne prend pas en charge l'association d'ensembles. Vous ne pouvez donc pas écrire body .main {background:#000;} comme ceci. C’est donc assez laborieux à écrire. Chaque cours est très long, sinon on craint la duplication des noms. Cependant, écrire comme li.current {color: red;} est pris en charge, et après et avant les pseudo-classes sont prises en charge, mais le premier enfant est le dernier- l'enfant nième n'est pas pris en charge.

2.6 La relation de couverture entre app.wxss et le wxss de chaque page est la suivante : s'il existe une règle portant le même nom, la page écrasera l'application, pas la fusion.

3. JS

3.1 L'environnement d'exécution de JS et l'environnement d'exécution de view sont isolés. JS ne peut changer la vue que via le timing d'acquisition d'événements et la méthode setData pour modifier les données.

3.2 JS Actuellement, il y a un gros problème car il est impossible d'obtenir la largeur et la hauteur de la page au niveau px. Les unités de tous les rappels d'événements sont au niveau px au lieu de rpx, mais la relation de conversion entre le rpx actuel. et px n'est pas connu. Par exemple, vous utilisez une toile pour dessiner des images. On ne sait même pas où se trouve la frontière, ce qui est vraiment embêtant.

3.3 Comme mentionné ci-dessus, la méthode setData ne déclenchera pas de modification de la vue si la valeur précédente et la valeur suivante sont les mêmes (voir 1.3)

3.4 Peut être utilisé lors de l'utilisation de la navigation pour sauter Le La méthode queryString suit l'adresse relative et l'événement onLoad sera transmis dans le paramètre d'entrée (qui sera converti en objet), mais il n'y a pas de mécanisme officiel de communication de données lors du retour en arrière. Vous pouvez utiliser getApp() pour obtenir l'objet global, y ajouter quelque chose et l'implémenter vous-même. Je ne parlerai pas du nombre maximum de 5 navigations.

3.5 Une fois Canvas getActions appelé, les actions seront effacées. Autrement dit, getActions est appelé deux fois de suite et la deuxième fois est un tableau vide.

3.6 L'outil de développement est écrit par nw. J'ai regardé le code source de la jupe. Le WXML dans l'outil de développement a un processus d'analyse et de réassemblage. Mais cela ne signifie pas que le gadget est natif. De la prise en charge du CSS à la similitude de certains bugs dans la vue Web, je pense toujours qu'il ressemble à une vue Web, mais des composants tels que la carte et le canevas utilisent la vue native et la couvrent ensuite sur la vue Web. sentiment. Quoi qu’il en soit, le fait que la mise au point automatique puisse appeler automatiquement le clavier est déjà un beau compliment.

[Recommandations associées]

1. Téléchargement du code source de la plateforme de compte public WeChat

2. Code source de vote WeChat

3. WeChat Lala Takeaway 2.2.4 Version Open Source décryptée du code source de WeChat Rubik's Cube

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!