Introduction au développement WeChat (2) Spécifications d'utilisation et de conception de l'outil de développement de programme WeChat Mini

Dans cet article, vous pouvez apprendre :

1. Comment utiliser des outils de développement de mini-programmes pour écrire un Hello World

2. WeChat Spécifications de conception du mini programme

3. Structure du projet du mini programme WeChat

》》》Utilisation des outils de développement du mini programme WeChat

• Télécharger et installer l'applet
  Télécharger : outil de développement Web WeChat

  Télécharger : code source DEMO officiel

  Cette série de tutoriels utilise les outils de développement de la version Mac.

• Une fois l'installation terminée, ouvrez l'outil de développement Web WeChat

1. Scannez le code QR pour vous connecter et vous lier. votre WeChat personnel

2. Après avoir scanné le code QR pour vous connecter, créez un nouveau projet ou importez un projet existant (utilisez le démarrage rapide du code source DEMO officiel ici)

3. Créez un nouveau projet et importez le projet de démarrage rapide que vous venez de télécharger


Puisque seules les entreprises ou les particuliers ayant reçu des invitations à des tests internes avez des AppID, assurez-vous de sélectionner "No AppID"

4 La nouvelle création est réussie Jetons un coup d'œil au vrai visage des outils de développement


Est. est-ce très similaire au mode développeur Chrome ? . .

5. Introduction aux outils de développement [Débogage]


Le module "Débogage" comprend principalement la sélection du modèle de débogage, la sélection du type de réseau, de la sortie de la console, des ressources réseau, et afficher le positionnement, les points d'arrêt, etc.

6. Introduction aux outils de développement [Modifier]


La case rouge à gauche est le répertoire de la structure du projet, et celle de droite est la zone d'édition du code. Une fois chaque modification enregistrée, cliquez sur "Compiler" pour afficher l'effet de page modifié.

7. Créez un nouveau dossier ou fichier


Placez la souris sur le dossier, une icône "+" apparaîtra à droite, cliquez pour ajouter un dossier ou fichier

》》》Spécifications de conception du mini programme(Extrait du guide de conception du mini programme WeChat)

1. Amical et poli
   Afin d'éviter que les utilisateurs ne soient distraits par l'environnement complexe lors de l'utilisation des services de mini-programmes sur WeChat. Lors de la conception de mini-programmes, vous devez veiller à réduire l'interférence des éléments de conception non pertinents sur les objectifs de l'utilisateur, en le montrant poliment. aux utilisateurs les services fournis par le programme et guider les utilisateurs à fonctionner de manière conviviale.

2. Points forts
   Chaque page doit avoir un objectif clair afin que les utilisateurs puissent rapidement comprendre le contenu de la page à chaque fois qu'ils entrent dans une nouvelle page. En principe, vous devriez essayer de. évitez d'autres éléments distrayants sur la page qui affectent la prise de décision et les opérations de l'utilisateur.

3. Clair et clair
   Une fois qu'un utilisateur accède à notre mini page de programme, nous avons la responsabilité et l'obligation d'informer clairement et clairement l'utilisateur où il se trouve et où il peut aller, en garantissant Les utilisateurs peuvent se déplacer librement sur la page sans se perdre, afin de leur offrir une expérience sûre et agréable.

》》》Structure du projet du mini-programme WeChat

1. Structure du fichier
   
   

2. Le programme-cadre contient une application qui décrit le programme global et plusieurs pages qui décrivent leurs pages respectives. La partie principale d'un programme-cadre se compose de trois fichiers, qui doivent être placés dans le répertoire racine du projet.

文件	作用
app.js	小程序(全局)逻辑
app.json	小程序(全局)公共设置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
app.wxss	小程序公共(全局)样式表

1. Une page de cadre se compose de quatre fichiers :

文件类型	作用
js	页面逻辑
wxml	页面结构，框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
wxss	是一套样式语言，用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。
json	页面配置

Selon la "convention sur la configuration" En principe , une page de cadre contient au moins trois types de fichiers : js, wxml et wxss. Les noms de fichiers doivent être identiques, par exemple index.js de la page d'accueil, index.wxml et index.wxss, et ils doivent être placés dans le même. dossier. Lors de l'enregistrement d'une page, il n'est pas nécessaire d'écrire un suffixe de fichier dans le nom du fichier, car le framework recherchera automatiquement les quatre fichiers dans le chemin .json, .js, .wxml et .wxss pour l'intégration.

》》》Résumé

Ce qui précède présente les préparatifs pour le développement de mini-programmes WeChat sous trois aspects : les outils de développement, les spécifications de conception et les répertoires de projets. être mis à jour plus tard en même temps, via Importer la DÉMO officielle et afficher la page de l'applet Hello World. D'une manière générale, les outils de développement de mini-programmes sont rationalisés, la structure du projet est claire, la documentation est complète et la barrière d'entrée n'est pas élevée ; l'équipe WeChat a packagé différents systèmes d'exploitation et différents modèles, et les développeurs n'ont qu'à appeler le correspondant. APIC'est tout. Bien sûr, si vous souhaitez comprendre l'ensemble du framework, vous devez étudier en profondeur les principes de fonctionnement de Redux, le mode état, la liaison de données unidirectionnelle et bidirectionnelle, l'appel JS des composants d'interface utilisateur natifs Android/IOS, etc.

Si vous avez des questions, vous pouvez également suivre mon compte public WeChat "ITNotes" pour communiquer et apprendre ensemble.

[Recommandations associées]

1 Téléchargement du code source de la plateforme de compte public WeChat

2. Code source de vote WeChat<.>

3.

WeChat Lala Takeaway 2.2.4 Version Open Source décryptée du code source de WeChat Rubik's Cube

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!