Explication de la structure de répertoire de base du mini programme pour le développement pratique des mini programmes WeChat

Résumé : Dans l'article précédent Développement pratique des mini-programmes WeChat (1) : Introduction aux mini-programmes WeChat, nous avons découvert les fonctions des mini-programmes, les outils de développement et comment créer des projets de mini-programmes. . Aujourd'hui, nous prendrons firstdemo comme exemple pour présenter la structure de répertoire de base du mini programme. Lorsque nous ouvrons un programme WeChat Mini...

Dans l'article précédent Développement pratique du programme WeChat Mini (1) : Introduction au programme WeChat Mini, nous avons déjà appris le mini programme Fonctions, outils de développement et comment créer des mini projets de programme. Aujourd'hui, nous prendrons firstdemo comme exemple pour présenter la structure de répertoire de base du mini programme.
Lorsque nous ouvrons un projet d'applet WeChat et cliquons pour entrer dans le menu "Modifier", nous pouvons voir les 5 fichiers/dossiers suivants : dossier pages, dossier utils, fichier global app.js, fichier global File app.json fichier, outil de fichier d'édition d'image fichier app.wxss.

La structure globale de la structure du répertoire de l'applet est la suivante :



Présentons chaque fichier et dossier du répertoire de l'applet dans Fonctions détaillées et précautions.
Introduction au répertoire 1.pages

pages :stocke principalement les fichiers de pages du mini programme, dont chaque dossier est une page, et chaque page contient quatre fichiers :

index .js

.js est le fichier logique du mini programme, également connu sous le nom de fichier d'interaction d'événement et de fichier de script. Il est utilisé pour gérer des fonctions telles que le clic. événements sur l'interface, tels que la définition des données initiales, la définition d'événements, l'interaction des données, les opérations logiques, la déclaration de variables, de tableaux, d'objets, de fonctions, de méthodes d'annotation, etc., leur syntaxe est la même que celle de JavaScript. Nous pouvons ouvrir et examiner de plus près le code dans index.js.

Tout d'abord, nous pouvons changer le mot bonjour dans la devise en l'applet bonjour WeChat dans les données. Comme indiqué ci-dessous :

Deuxièmement, jetons un coup d'œil à la fonction de bindViewTap : function(), qui consiste à cliquer pour accéder à la page de journal. Nous pouvons cliquer sur l'avatar pour voir l'effet de démonstration, comme indiqué ci-dessous :
Enfin, jetons un œil à la fonction onLoad, qui définit l'action lorsque la page démarre. Nous pouvons modifier la page à afficher au démarrage de la page, ou ajouter de nouvelles fonctions, comme le montre la figure ci-dessous :



Les fonctions .js couramment utilisées sont les suivantes :

Page({

1. 
   

données :{

2. 
   

// texte :"Ceci est une page"

3. 
   

},

4. 
   

onLoad:function(options){

5. 
   

// Les options d'initialisation de page sont les paramètres apportés par le saut de page

6. 
   

console.log('App onLoad')

7. 
   

},

8. 
   

onReady:function() {

9. 
   

// Rendu de la page terminé

11. console.log('App onReady')
    

12. },
    

13. onShow:function(){
    

14. // Affichage de la page
    

15. console.log('App onShow')
    

16. },
    

17. onHide:function(){
    

18. // Masquer la page
    

19. console.log('App onHide')
    

20. },
    

21. onUnload:function(){
    

22. // La page se ferme
    

23. console.log('App onUnload')
    

24. }
    

25. })

Copier le codeindex.jsonLe fichier .json est un fichier de configuration, qui est principalement stocké au format de données json et est utilisé pour définir l'effet de configuration du programme. Nous pouvons créer un fichier de configuration .json dans le répertoire d'index, comme indiqué ci-dessous :

Le fichier de configuration index.json peut uniquement configurer les fichiers de configuration de page dans ce répertoire de niveau, et peut uniquement configurer et modifier les fichiers liés à la barre de navigation, par exemple en modifiant le style d'affichage de la barre de navigation, tel que le texte de navigation, la couleur d'arrière-plan et la couleur du texte. attendez. Sa syntaxe est la même que la syntaxe json. Par exemple, changeons la couleur d'arrière-plan de la barre de navigation en rouge, comme indiqué dans la figure ci-dessous :

Nous pouvons voir que la couleur d'arrière-plan passe au rouge . . (Cette couleur est vraiment épouvantable !)

index.wxml

Le fichier .wxml est l'interface file , est un fichier de structure de page, utilisé pour construire la page et ajouter des contrôles à la page. Le nom complet est l'abréviation de langage de balisage weixin, langage de balisage WeChat. Comme les autres langages de balisage généraux, les balises sont par paires et les noms de balises sont en minuscules. Vous pouvez contrôler l'apparence en référençant des classes, vous pouvez également effectuer un traitement logique en liant des événements et compléter la liste dont nous avons besoin en effectuant le rendu. C'est le lien entre les opérations utilisateur et la logique back-end. Tous les éléments que nous voyons sur la page peuvent être modifiés ici. Par exemple, nous mettons un bouton sur la page, comme indiqué ci-dessous :

Comment commenter le code de programme inutile en .wxml ? Comme suit :

1. 
   

2. 
   

3. 
   

4. 
   

5. {{userInfo.nickName}}000
   

6. 
   

7. {{devise}}

   
   

8. 
   

9. 
   

10. 
    

11. 
    

12. Copier le code

    
    

    Remarque :

1 . Ces balises spécifiques dans les mini-programmes WeChat sont appelées composants.

index.wxss

.wxss est un fichier de feuille de style , similaire au CSS dans le front-end, qui est pour les fichiers .wxml et les fichiers de page Les fichiers embellis rendent l'affichage de l'interface plus beau. Par exemple, définissez la taille et la couleur du texte, la largeur et la hauteur des images, ainsi que la position et l'espacement des composants dans .wxml.

Remarque :

1. Chaque page du mini programme doit contenir des fichiers .wxml et .js. Les deux autres types de fichiers ne sont pas requis

2. Le nom du fichier. doit correspondre à la page Les dossiers ont le même nom, comme le dossier d'index, les fichiers ne peuvent être que index.wxml, index.wxss, index.js et index.json.

1.2 utils

Ce fichier est principalement utilisé pour stocker certains fichiers .js globaux et certains fichiers courants codes de traitement d'événements utilisés. Les fichiers peuvent être placés dans ce dossier pour les appels globaux. Par exemple, les méthodes courantes : temps de traitement, etc.

1. module.exports = {
   

2. formatTime : formatTime
   

3. }

Copier le code
Pour les méthodes qui autorisent les appels externes, utilisez module.exports pour les déclarer, puis utilisez le code suivant pour les introduire dans d'autres fichiers js

1. var util = require('../../utils/util.js')

Copier code Ensuite, vous pouvez appeler la méthode .

Exemple : Nous définissons directement une fonction utils, comme indiqué ci-dessous :

1. function util(){
   

2. console.log("Le module a été appelé !!")
   

3. }
   

4. 
   

5. module.exports.util = util

Copiez le code

Appelez ensuite cette fonction util dans le fichier index.js comme suit :

1. var common = require('../../utils/util.js')

Copier le code

Après l'avoir enregistré, nous pouvons voir en arrière-plan que le contenu util que nous avons défini a été appelé, comme indiqué ci-dessous :

1.3 app.js, app.json, app.wxss

app.js : La méthode système gère les fichiers globaux, c'est-à-dire que les fonctions et les données spécifiées dans le fichier peuvent être obtenues en l'utilisant pour chaque page de cadre et chaque fichier de l'applet entière. Chaque mini programme aura un fichier app.js, et il n'y en a qu'un, situé dans le répertoire racine du projet ! La fonction de app.js est de dire au mini-programme d'enregistrer une instance du mini-programme sous forme d'application (objet) pour implémenter les fonctions d'événement que le mini-programme doit implémenter à différentes étapes, telles que onLoad, onshow, etc. Il n'y a que trois événements on globaux : , inférieurs à l'événement on de la page. Gérer principalement certaines méthodes du cycle de vie du programme ; par exemple : le traitement des événements lorsque le programme commence tout juste à s'exécuter, etc. app.js contient une méthode app(), qui fournit les définitions d'événements correspondantes, comme suit 🎜>

App({

onLaunch : fonction () {

2. console.log('Lancement de l'application')
   

3. },
   

4. onShow : function () {
   

5. console.log('App Show')
   

6. },
   

7. onHide : function () {
   

8. console.log('App Hide')
   

9. }
   

10. })

Copier le codeApplication ( ) La fonction est utilisée pour enregistrer un petit programme. Accepte un paramètre d'objet, qui spécifie la fonction de cycle de vie de l'applet, etc.

app.json  : Le fichier de configuration globale du système doit être inclus. Cela comprend la définition du chemin de la page, la définition du bas, du réseau, du mode de débogage, la définition de la couleur de l'en-tête de navigation, la taille de la police, la présence ou non de barres d'onglets en dessous et d'autres fonctions. La configuration de la page spécifique est modifiée séparément dans le fichier json de. la page. Toute page doit être dans l'application. Enregistrez-vous en json. Si elle n'est pas ajoutée en json, la page ne peut pas être ouverte.

1. "pages":[
   

2. "pages/index/index",
   

3. "pages/logs/logs"
   

4. ],

Copier le code

( dans le frame La priorité json est supérieure à la priorité json globale ) .wxss : Code d'embellissement global de l'interface, pas nécessaire. Sa priorité n'est pas non plus aussi élevée que celle de wxss dans le cadre.

Exemple : Il existe des paramètres de marge pour l'avatar dans index.wxss

.usermotto {

marge supérieure : 200 px ;

1. 
   

   }

2. 
   Copier le code

   Définissez également un paramètre de marge d'avatar global de 400px dans app.wxss. Voyons lequel est utilisé Exécuté.

.usermotto {

marge-haut : 400px ;

1. 
   

   }

2. 
   Copier le code

   Lors du processus de redémarrage, nous pouvons voir que les paramètres globaux sont indexés. Ceux en .wxss sont couverts.

Ajout et traitement d'images dans le mini-programme WeChat

Il est très difficile d'ajouter des images dans le mini-programme WeChat et ne peut être ouvert en ouvrant le dossier Projet, placez simplement les images dans le répertoire. Faites simplement référence au chemin relatif ou au chemin absolu de l’image dans le code. Actuellement, seuls les formats png et jpg sont pris en charge dans le développement de mini-programmes, et les images dans d'autres formats ne peuvent pas être ouvertes.

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!