Série de développement de programmes WeChat Mini (1) Explication détaillée des préparatifs de développement

Cet article apporte une explication détaillée de la série de développement de programmes WeChat Mini (1) Préparation au développement

1 : Préparation au développement

1 Enregistrez un compte de développeur WeChat

Connexion ：https://mp.weixin.qq.com/ S'inscrire.

Actuellement, seuls les non-particuliers tels que les entreprises et les organisations sont pris en charge pour enregistrer des comptes de mini-programme WeChat. Pour les détails d'inscription, veuillez. reportez-vous au lien suivant :

http://kf.qq.com/faq/140806zARbmm161103r6vmiA.html

Remarque : Si vous souhaitez simplement apprendre à développer l'applet WeChat, vous pouvez vous référer à cette adresse pour enregistrer un compte test :

2 Téléchargement de l'outil de développement WeChat

En raison de la révision de la plateforme publique WeChat, vous pouvez télécharger WeChat gratuitement sur https://mp.weixin.qq.com/wiki Les petits outils de développement de programmes n'existent pas.

Vous devez disposer d'un compte de développement d'applet WeChat et scanner le code QR pour télécharger l'outil de développement à partir du site Web suivant.

https://mp.weixin.qq.com/debug/wxadoc/introduction/#Login

De plus, si vous souhaitez simplement apprendre le développement, vous pouvez rechercher le développement d'applets WeChat Les outils partagés par les internautes peuvent également être utilisés sur Baidu et téléchargés à volonté.

2 : Introduction à l'utilisation des outils de développement

1 : Ouvrez l'outil de développement d'applet WeChat (outil de développement Web WeChat) sur le bureau du PC, comme indiqué dans la figure 1 :

Figure 1

2 : Utilisez WeChat pour scanner le code QR de la figure 1, comme indiqué dans la figure 2, et sélectionnez le premier élément « Mini programme local Projet", comme le montre la figure 3. (Désormais, si la version de l'outil de développement est trop basse, une erreur sera signalée lors de l'analyse. Veuillez d'abord mettre à niveau l'outil de développement. L'outil de développement vérifiera automatiquement la version et se mettra automatiquement à niveau.)

Figure 2

Figure 3

3 : Dans la figure 3, si vous créez un projet pour la première fois , veuillez sélectionner "Ajouter un projet", sinon sélectionnez un projet déjà ajouté. Sélectionnez « Ajouter un projet » comme indiqué dans la figure 4.

Figure 4

4 : Dans la figure 4, s'il s'agit uniquement du développement de l'apprentissage, veuillez sélectionner « Aucun AppID », puis remplissez le nom du projet et sélectionnez le répertoire du projet, puis cliquez sur le bouton "Ajouter un projet". Comme le montre la figure 5, entrez dans l'interface principale de l'outil de développement d'applets WeChat.

Figure 5

5 : Dans la figure 5, cliquez sur "Modifier" dans le coin supérieur gauche de l'outil, et l'outil entre dans l'interface du mode édition , comme le montre la figure 6

Figure 6

6 : Dans la figure 5, cliquez sur « Déboguer » dans le coin supérieur gauche de l'outil, et le L'outil entre dans l'interface du mode débogage, comme le montre la figure 7

Figure 7

7 : Dans la figure 7, cliquez sur « Backstage » dans le coin inférieur gauche de l'outil À ce moment, le programme simule que lorsqu'un appel arrive, l'applet WeChat entre. L'état de l'arrière-plan est illustré dans la figure 8

Figure. 8
3 : Structure du répertoire du projet

1 : Ouvrez l'outil de développement d'applet WeChat, entrez dans le mode d'édition, comme indiqué dans la figure 1 ci-dessous

Figure 9

1 : Ce projet se compose principalement de pages/firstPage, pages/index, pages/logs, composés de plusieurs dossiers, qui décrivent principalement les informations d'interface de l'ensemble du mini programme.

Chaque fichier peut essentiellement être divisé en : .js, .wxml, .wxss, .json et autres fichiers.

Par exemple :

index.js : décrit les informations logiques de la page d'index (analogie : code js)

index.wxml : décrit les informations de mise en page de l'index page (analogie : mise en page HTML)

index.wxss : informations de style décrivant la mise en page de la page d'index (analogie : informations CSS)

2 : Informations générales sur la configuration du projet :

Il se compose de trois fichiers : app.js, app.json et app.wxss

app.json : comme le montre la figure 1, il décrit les informations de page de l'ensemble du projet (décrites par "pages"), "fenêtre" décrit principalement l'arrière-plan global du projet, la barre de navigation et d'autres styles. est un certain S'il y a la même description dans le fichier .json, les informations décrites dans « fenêtre » seront écrasées.

app.wxss : décrit principalement le style général du projet, comme le montre la figure 2

Figure 10

app .js : décrit principalement la logique d'entrée du projet, décrivant principalement certaines informations après la connexion de l'utilisateur, comme le montre la figure 3

Figure 11

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!