Vous apprendre à créer un petit projet de programme à partir de zéro

Préparation de l'IDE

Adresse de téléchargement : mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

Préparation des connaissances

Vous devez encore jeter un œil aux tutoriels recommandés JavaScript : Tutoriel JavaScript pour débutants

Partir de zéro

Il existe quatre types de fichiers dans les mini-programmes WeChat

js -- --- -----Fichier JavaScrip

json -------- Fichier de configuration du projet, responsable de la couleur de la fenêtre, etc.

wxml ------- Semblable au fichier HTML

wxss ------- Similaire aux fichiers CSS

Les quatre types de fichiers nommés avec app dans le répertoire racine sont les fichiers d'entrée du programme.

app.json

Ce fichier doit être présent. S'il n'existe pas de fichier de ce type, l'EDI signalera une erreur car le framework WeChat l'utilise comme entrée de fichier de configuration

<.>Il vous suffit de créer Dans ce fichier, écrivez simplement des accolades

Nous configurerons ici la configuration globale de l'ensemble de l'applet à l'avenir. La composition de la page est enregistrée, la couleur d'arrière-plan de la fenêtre du mini programme est configurée, le style de la barre de navigation est configuré et le titre par défaut est configuré.

app.js

Ce fichier doit être présent, sinon une erreur sera signalée ! Mais créez simplement ce fichier. Vous n'avez rien à écrire

À l'avenir, nous pourrons surveiller et traiter les fonctions de cycle de vie du mini-programme et déclarer des variables globales dans ce fichier.

app.wxss

Ce fichier n'est pas requis. Parce qu'il s'agit simplement d'un fichier de style CSS global

app.wxml

Ce n'est pas nécessaire, et cela ne fait pas référence à l'interface principale ~ car la page principale du mini programme est basée sur le fichier JSON Cela dépend de la configuration

Avec ces deux fichiers, lorsque vous exécuterez le programme, l'EDI ne signalera pas d'erreur, ce qui signifie aussi qu'il s'agit de l'applet WeChat la plus simple

Créer une instance de programme Hello World

Le fichier app.js gère le cycle de vie de l'ensemble du programme, ajoutez-y donc le code suivant : (Vous serez invité lors de la saisie de l'IDE de l'application)

App ({ onLaunch : function () { console.log( 'App Launch') }, onShow : function () { console.log('App Show') }, onHide : function () { console.log('App Hide' ) }})

API spécifique L'explication est la suivante

Beautify ActionBar

Le fichier json est responsable de la configuration de la couleur ActionBar Il suffit d'ajouter le code suivant. dedans. Les paramètres sont expliqués dans la figure ci-dessous !

Paste_Image.png

Paste_Image.png

{ "window":{ "navigationBarBackgroundColor": "#BBDEF8", "navigationBarTitleText": "Demo", "navigationBarTextStyle " :"white" }}

Paste_Image.png

Maintenant, voyez si l'ActionBar ressemble à ça ! Bon, continuons à écrire notre première interface

Embellissez la page

Pour embellir la page, nous utilisons les fichiers wxml et wxss

Afin de garder la structure du code du programme simple

Nous devons créer un nouveau dossier dans le répertoire avec un nom aléatoire. Nous l'appelons pages

puis créons un nouveau dossier dans le dossier pages avec un nom aléatoire. Ici, nous l'appelons index.

puis nous créons le fichier index.wxml et y écrivons le code suivant

Hellotext>view>

Ensuite, créons le fichier index.wxss et écrivons le code suivant dedans

.window{ color=#4995fa;>

Ensuite, nous créons le fichier index.js

Entrez le code suivant dans le fichier (il y aura une invite en entrant dans Page IDE)

La fonction est expliquée comme suit :

Paste_Image.png

Configuration de la page d'accueil

Le fichier Json se charge de la configuration le chemin de la page

Nous y ajoutons donc le code suivant

où index est La signification fait en fait référence au fichier index.js

Il faut expliquer ici que le path in pages pointe en fait vers le fichier js

S'il n'y a pas de fichier js portant ce nom dans un répertoire, une erreur sera signalée !

"pages":[ "pages/index/index"],

Terminé ! Lançons le programme !

Super Hello World

Afin d'apprendre la liaison d'événements et comment mettre à jour les données sur la page

Faisons un super Hello World, c'est-à-dire lorsque je clique sur le texte, ça va

Ça change de couleur !

Événements de liaison

Nous ouvrons index.wxml et modifions le code à l'intérieur pour qu'il ressemble à ceci

Hellotext>view>

En fait, nous ajoutons catchtap =" clic"

Que signifient ces deux attributs ? Ne vous inquiétez pas, je vais les expliquer un par un

L'image ci-dessus montre quelques noms d'attributs de l'événement. Ici, vous devez le faire. faites attention au contenu marqué dans la case rouge. Faites la distinction entre les événements bouillonnants et les événements non bouillonnants. En fait, les événements bouillonnants doivent transmettre l'événement au conteneur de couche supérieure.

Après avoir regardé cette image, regardons la signification de catchtap="click"

catch représente un événement sans bulle

tap représente un événement de clic

Donc, même Ensemble, ce sont des événements de clic sans bulle

Quel est le clic à l'arrière

le clic n'est en fait qu'un nom de variable

Nous devons l'utiliser nom à lier et à recevoir dans index.js Fonction événementielle

Nous ouvrons index.js

et ajoutons la fonction suivante

click:function(){ console.log(" J'ai cliqué sur le texte"); },

Après l'ajout, le code ressemblera à ceci. La case rouge est le code ajouté

Donc en fait, la fonction de rappel de l'événement click est catchtap ="clic"

suivi d'un clic :function() composé de

Essayons maintenant d'exécuter le programme et cliquons sur le texte

pour voir si la fonction click:function est appelée et le journal est imprimé

D'accord, alors écrivons la logique du changement couleur lorsqu'on clique dessus

Comment faire changer la couleur d'un texte ? Bien sûr que c'est du CSS

Il faut donc ajouter un style

.window-red{ color:#D23933 ;}

Ensuite, nous entrons dans le fichier index.js

Vous constaterez qu'il y a des données :{} dans le code. Ce n'est pas une fonction de cycle de vie de page

En fait, il s'agit d'un tableau de variables. C'est toutes les variables appliquées qui peuvent être utilisées dans wxml

Nous demandons une couleur ici

La valeur de la couleur est le nom du style. dans index.wxss

puis entrez index.wxml , changer la valeur dans la classe en {{color}}

signifie en fait utiliser la valeur de la variable color dans le fichier js ici

, c'est-à-dire que la valeur est égale à window

Ensuite, nous revenons au fichier index.js

demander un contrôle variable cliquez en haut

puis ajoutez le code suivant dans la fonction click:function()

click:function (){ console.log("Clicked text"); if(flag){ color = "window-red"; ; flag = false; }else{ color = "window"; flag = true; } this.setData({ color });

Le code modifié est tel qu'indiqué dans la figure

En fait, il s'agit de changer la valeur de la variable de couleur après avoir cliqué sur Oui, et la valeur remplacée est en fait le nom du style

Mettre à jour les données de l'interface

Il y a un problème ici. Nous avons modifié la valeur mais cela ne prendra pas effet immédiatement dans wxml

Nous devons donc appeler la méthode

this.setData() pour La valeur est synchronisée avec wxml pour qu'elle prenne effet immédiatement

D'accord, lançons le programme et cliquons sur Bonjour pour voir si la couleur change en un seul clic !

Enfin, je voudrais ajouter que les fichiers json peuvent également être configurés dans le répertoire d'index

C'est-à-dire que chaque page peut configurer sa propre couleur de barre d'action, etc.

La configuration ici sera Écraser la configuration du fichier app.json

Adresse github du code source https://github.com/pwh0996/WXDemo.git

Partagez enfin une vague de mini code source du programme, 488 téléchargements du code source de la démonstration du mini programme Zone spéciale :

p/36fc7213b5d0

Il est recommandé aux amis qui ont de l'énergie de le lire.

---

J'ai organisé un live sur Zhihu Je vous rencontrerai sur Zhihu à 20h30 le soir du 22 avril (samedi) : [0 Conseils d'étude de base du week-end Développement de programmes. ] (https://www.zhihu.com/lives/832919740296101888), bienvenue à nous rejoindre.

Appuyez longuement sur le code du mini-programme pour ouvrir la "Cultivation Commune" et rejoignez immédiatement le "WeChat Mini Program" Mi Circle

Cet article a été publié pour la première fois sur mon compte public personnel WeChat Philosophie Li Lun , qui fait principalement la promotion de contenus liés à l'art et à la technologie, concerne uniquement les amis.

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!