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

J'étais en difficulté il y a quelques jours. Énumérez ensuite quelques résultats expérimentaux pour votre référence.

0. 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 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 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 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 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, 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 les rpx et px actuels. ne sont pas connus. 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 communication de données officielle lors de la navigation. mécanisme. 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 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 pourra vous aider, merci pour votre soutien à ce site !

Pour plus d'introductions aux applets WeChat et des explications détaillées sur WXML, WXSS et JS, veuillez prêter attention au site Web PHP chinois !