Comment les novices développent-ils leur premier mini-programme WeChat ?

Après avoir installé les « Outils de développement Web WeChat », scannez le code WeChat du développeur pour entrer, comme indiqué sur l'image.

Cliquez sur "Ajouter un projet", renseignez l'AppID obtenu auparavant (aucun AppID ne peut être ignoré), saisissez le nom du projet "Bonjour WXapplet", select Le dossier local sert de répertoire du projet.

Après avoir coché "Créer un projet de démarrage rapide dans le répertoire actuel", cliquez sur le bouton "Ajouter un projet", et notre premier projet d'applet WeChat - Hello WXapplet a été créé avec succès.

Fonctionnement et utilisation des outils de développement

L'interface de l'outil de développement est essentiellement divisée en quatre domaines principaux : Zone 1 "Menu supérieur", Zone 2 "Menu de navigation", Zone 3 "Fichier répertoireComment les novices développent-ils leur premier mini-programme WeChat ?Exécution de simulation", Zone 4 "Développement EditionComment les novices développent-ils leur premier mini-programme WeChat ?Débogage", Zone 1 et Zone 2 sont fixes. Les zones 3 et 4 seront différentes selon les différentes fonctions ou modes sélectionnés dans la zone du menu de navigation.

La zone 1 "Menu supérieur", "Paramètres" sert à configurer la manière dont la machine de développement se connecte au réseau lors de l'exécution du programme. « Action » fait référence à des opérations telles que « actualiser », « arrière » et « avant », qui sont principalement utilisées lors du débogage de pages Web ou d'interfaces. "Aide" désigne des informations telles que la version et la déclaration de droits d'auteur des outils de développement Web. Faites-en l'expérience vous-mêmeProgramme WeChat Mini, Évaluez le mini-programme WeChat.

La zone 2 « Menu de navigation » est une zone fonctionnelle fréquemment utilisée par les développeurs. En particulier, les fonctions « édition » et « débogage » seront les fonctions les plus importantes utilisées par les développeurs.

Fonction Modifier

Cliquez sur le bouton Modifier et l'interface comme indiqué dans l'image apparaîtra.

Les 4 zones d'origine deviennent la zone de liste de fichiers du projet et la zone d'édition de code pour les fichiers correspondants, que nous appelons également l'éditeur de code.

L'éditeur de code prend désormais en charge l'édition de 4 types de fichiers : les fichiers wxml, wxss, js et json. L'éditeur de code propose également une fonction de complétion automatique relativement complète, ce qui facilite grandement les développeurs.

L'éditeur de code prend également en charge les opérations de touches de raccourci. Certaines touches de raccourci couramment utilisées sont les suivantes :

Ctrl+Fin : Déplacer. à la fin du fichier   Ctrl+Home : Aller au début du fichier Ctrl+i : Sélectionner la ligne actuelle Shift+End : Aller à la fin de la ligne Shift+Home : Aller au début de la ligne Ctrl+Shift+L : Tout sélectionner correspondances Ctrl+D : sélectionner les correspondances Ctrl+U : restauration du curseur Maj+Alt+F : formatage du code Alt+Up,Alt+ Down : Déplacer une ligne de haut en bas Shift+Alt+Up, Shfit+Alt+Down : Copier une ligne de haut en bas Ctrl+Shift+Entrée : Au dessus de la ligne courante Insérer une ligne

Fonction de débogage

Le débogage La fonction est l'outil de base permettant aux développeurs de détecter l'implémentation des résultats du code et de résoudre les problèmes, comme le montre la figure.

La zone 4 devient désormais l'outil de débogage et la zone de sortie. Le simulateur simulera fidèlement la logique et les performances opérationnelles du projet d'applet WeChat sur le client, et la plupart des fonctions et appels API peuvent être correctement restitués sur le simulateur.

Le haut des outils de débogage et de la zone de sortie est une ligne de menus, à savoir : Console, Sources, Réseau, Stockage, AppData, Wxml, Senser. L'élément de menu étendu à l'extrême droite est la personnalisation et le contrôle. bouton de l'outil de développement "┆" .

Page Console : page d'informations sur la console, qui a deux fonctions :

1) Les développeurs peuvent saisir le code directement ici et déboguer.

2) Afficher la sortie d'erreur de l'applet.

Page Sources : page d'informations de débogage du fichier source, utilisée pour afficher les fichiers de script du projet en cours.

Remarque : étant donné que le mini-cadre du programme compile des fichiers de script, les fichiers que nous voyons dans la page du fichier source sont en fait le fichier de script après traitement. Le code que nous écrivons est donc inclus dans la fonction de définition. Pour le code de la page, à la fin du fichier de script d'empaquetage, la fonction require terminera l'action d'appel active. Page Réseau : page d'informations de débogage du réseau, utilisée pour observer et afficher les détails liés au réseau tels que les informations de demande de chaque élément et l'état du socket.

Page de stockage : page d'informations sur le stockage des données, utilisée pour afficher l'interface API de stockage (wx.setStorage ou wx.setStorageSync) utilisée par le projet actuel de stockage de données. Par exemple, saisissez : wx.setStorage({key:name,data:King}) dans la console, et vous pourrez voir sur la page Stockage que nous avons stocké une donnée clé-valeur.

Page de stockage : page d'informations sur le stockage des données, utilisée pour afficher l'état de stockage des données du projet en cours à l'aide de l'interface API de stockage (wx.setStorage ou wx.setStorageSync). Par exemple, saisissez : wx.setStorage({key:name,data:King}) dans la console, et vous pourrez voir sur la page Stockage que nous avons stocké une donnée clé-valeur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Comment gérer le problème de la mise en cache des variables globales dans le développement d'applets WeChat

Comment gérer avec le développement de l'applet WeChat Implémenter le paiement WeChat

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!