Introduction détaillée aux outils de téléchargement et de débogage d'applets WeChat

Tard hier, l'équipe WeChat a publié les outils de développement du programme WeChat Mini, les documents de développement du programme WeChat Mini et le guide de conception du programme WeChat Mini. De tout nouveaux outils de développement intègrent des fonctions de développement et de débogage, d'édition de code et de publication de programme pour aider les développeurs à développer WeChat. mini-programmes de manière simple et efficace. Ce qui suit est le document officiel, qui contient l'adresse de téléchargement des outils de développement de mini-programmes et du guide de débogage.

Adresse de téléchargement : outils de développement version 0.9.092300
Windows version 64 ; Windows version 32 ; version Mac

Afin d'aider les développeurs à développer des applets WeChat de manière simple et efficace, nous l'avons lancé. un nouvel outil de développement qui intègre des fonctions telles que le développement et le débogage, l'édition de code et la publication de programmes.

devtools

Scannez le code pour vous connecter

Lors du démarrage de l'outil, les développeurs doivent utiliser l'identifiant WeChat qui a été lié avec succès en arrière-plan pour analyser le Code QR pour se connecter. Toutes les opérations ultérieures seront basées sur ce compte WeChat

Il existe trois domaines fonctionnels principaux pour le débogage du programme : le simulateur, les outils de débogage et la petite zone d'opération du programme

Simulateur

Simulateur Simule les performances logiques réelles de l'applet WeChat sur le client et peut présenter l'état correct sur le simulateur pour la plupart des API.

emulat

Outil de débogage

L'outil de débogage est divisé en 6 modules fonctionnels : Wxml, Console, Sources, Réseau, Appdata, Stockage et

3Wxml Panel

Wxml Panel est utilisé pour aider les développeurs à développer des interfaces converties en Wxml. Ici vous pouvez voir la structure réelle de la page et les attributs wxss correspondant à la structure. En même temps, vous pouvez modifier les attributs wxss correspondants et voir les modifications dans le simulateur en temps réel. Grâce au sélecteur situé dans le coin supérieur gauche du module de débogage, vous pouvez également retrouver rapidement le code wxml correspondant au composant dans la page.

wxml
Panneau des sources

Le panneau des sources est utilisé pour afficher les fichiers de script du projet en cours. Différent du développement du navigateur, le framework d'applet WeChat compilera les fichiers de script, donc dans The. les fichiers que les développeurs voient dans le panneau Sources sont des fichiers de script traités. Le code du développeur sera encapsulé dans la fonction de définition, et pour le code de la page, il y aura un appel actif à exiger à la fin.

sources
Panneau réseau

Netwrok Pannle est utilisé pour observer et afficher l'état des demandes et des sockets

réseau
Appdata Pannel

Appdata Le panneau est utilisé pour afficher les données spécifiques aux données d'application actuelles du projet en cours et fournir des commentaires en temps réel sur les données du projet. Les données peuvent être modifiées ici et renvoyées à l'interface en temps opportun.

appdata
Panneau de stockage

Le panneau de stockage est utilisé pour afficher l'état de stockage des données du projet en cours après avoir utilisé wx.setStorage ou wx.setStorageSync.

stockage
Panneau de console

Le panneau de console a deux fonctions principales :

Les développeurs peuvent saisir et déboguer du code ici

console

La sortie d'erreur du mini programme sera affichée ici

4 Zone d'opération du mini programme

La zone d'opération du mini programme aide les développeurs à simuler certaines opérations de l'environnement client. Par exemple, lorsque l'utilisateur revient à la fenêtre de discussion à partir du mini-programme, une API définie en arrière-plan du mini-programme sera déclenchée.

5 Lorsque le mini programme utilise plusieurs fenêtres, vous pouvez changer de page dans la zone d'opération supérieure. Il convient de noter que cette opération n'existe que pour la commodité des développeurs. ne sera pas disponible dans le vrai client WeChat.

La zone d'édition peut être utilisée pour écrire du code pour le projet en cours, et en même temps, l'ajout, la suppression et le renommage de base des fichiers peuvent être effectués.

L'outil propose actuellement quatre types d'édition de fichiers : wxml wxss js json
Auto-complétion

Comme la plupart des éditeurs, nous proposons une auto-complétion complète

Couramment utilisé touches de raccourci

Ajustement du format

Ctrl S : Enregistrer le fichier
Ctrl [, Ctrl] : Indentation de la ligne de code
Ctrl Shift [, Ctrl Shift ] : Replier le code ouvert bloquer
Ctrl C Ctrl V : Copier et coller, si aucun texte n'est sélectionné, copier et coller une ligne
Maj Alt F : Formatage du code
Alt Haut, Alt Bas : Déplacer une ligne vers le haut ou vers le bas
Shift Alt Up, Shift Alt Down : copier une ligne de haut en bas
Ctrl Shift Enter : insérer une ligne au-dessus de la ligne actuelle

Lié au curseur

Ctrl End : aller à la fin du fichier
Ctrl Home : Déplacer au début du fichier
Ctrl i : Sélectionner la ligne actuelle
Shift End : Sélectionner du curseur jusqu'à la fin de la ligne
Shift Home : Sélectionner depuis le début de la ligne jusqu'au curseur
Ctrl Shift L : Sélectionner toutes les correspondances
Ctrl D : Sélectionner la correspondance
Ctrl U : Restaurer le curseur

Le répertoire du projet affiche quelques détails du projet en cours, y compris les icônes, l'appid, les informations d'annuaire, etc.

Cliquez sur la fonction d'aperçu, l'outil compilera et construira automatiquement le code, et générera un package de code à télécharger sur le serveur WeChat. Après succès, un code QR sera affiché. de WeChat pour scanner le code QR sur leur téléphone portable. Voyez les performances réelles du projet correspondant sur

Il convient de noter que pendant la période de test interne, la fonction de téléchargement de code n'est utilisable que par l'identifiant WeChat de l'administrateur.

Ce qui précède est la compilation d'informations pour le débogage de l'outil de téléchargement d'applet WeChat. Nous ajouterons des informations pertinentes à l'avenir. Merci pour votre soutien à ce site !

Pour une introduction plus détaillée aux outils de téléchargement d'applets WeChat et aux articles liés au débogage, veuillez prêter attention au site Web PHP chinois !