WeChat Mini Programme WXML, WXSS et JS introduction et explication détaillée

J'avais du mal il y a quelques jours. Énumérez ensuite quelques résultats expérimentaux pour votre référence.

0. Il existe encore 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 div 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 vous-même l'affichage.

1.3 Le défilement vers le haut et vers la gauche de la vue de défilement peut modifier la position de défilement de la vue de défilement. 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 et toute autre saisie n'est pas possible (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 pensez qu'il est gênant et inesthétique d'avoir un groupe de cases à cocher en dehors de celle-ci, vous pouvez utiliser switch type="checkbox" à la place. (Groupe de communication du compte d'application du mini programme WeChat 563752274)

1.6 Le composant cartographique ne parvient actuellement pas à se charger lorsqu'il est chargé 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 donne l'impression de recouvrir un composant natif au-dessus de la vue Web. Ils ne peuvent pas être débordés ou recouverts d'éléments. Vous pouvez penser que quelle que soit la hauteur du z-index, il ne peut pas être placé dessus. 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. 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. Il existe cependant 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 Actuellement, les polices introduites dans le test ne sont pas disponibles et 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), et base64 peut être utilisé. (Groupe de communication du compte d'application du mini programme 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, il prend en charge les méthodes d'écriture telles que li.current {color: red;} et prend en charge les pseudo-classes après et avant, mais ne prend pas en charge les pseudo-classes telles que first-child last-child nth-child.

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 modifier la vue que via le timing d'acquisition d'événements et la méthode setData pour modifier les données.

3.2 JS a actuellement un gros problème car il est incapable 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 et le px actuels ne l'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 Lorsque vous utilisez naviguer pour sauter, vous pouvez utiliser queryString pour suivre l'adresse relative. L'événement onLoad sera transmis dans le paramètre d'entrée (il sera converti en objet), mais il n'y a pas de mécanisme officiel de communication de données lors de la navigation 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 Les outils de développement sont écrits par nw. J'ai regardé le code source de la jupe. Le WXML dans les outils 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 de 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. Mais en tout cas, le fait que l'autofocus puisse appeler automatiquement le clavier est déjà un grand éloge.

Merci d'avoir lu, j'espère que cela aidera tout le monde, et merci pour votre soutien à ce site !

Pour plus d'articles liés à l'introduction et à l'explication détaillée de WXML, WXSS et JS dans les mini-programmes WeChat, veuillez faire attention au site Web PHP chinois !