[Développement d'applet WeChat] Explication détaillée de l'utilisation du cadre et des outils de développement

introduction

Cet article prend l'applet WeChat comme exemple pour présenter l'utilisation du cadre et des outils de développement d'applet. Après avoir lu cet article, je pense que tout le monde peut simplement comprendre le processus de base et les outils courants du développement d'applet, afin de démarrer rapidement avec développement d'applet.

1. Introduction au cadre et aux outils de développement de mini-programmes

1.1 Cadre de développement de petits programmes

Le cadre de développement de mini-programmes est un cadre de développement permettant de créer rapidement des mini-programmes. Il fournit une multitude de composants et d'API, permettant aux développeurs de créer rapidement des mini-programmes et d'implémenter des fonctions riches. À l'heure actuelle, il existe principalement les types suivants de cadres de développement de petits programmes :

• Cadre de développement du mini programme WeChat : Le cadre officiel de développement du mini programme, développé à l'aide du langage JavaScript, peut s'exécuter sur le client WeChat ;
• Framework de développement d'applet Alipay : le framework de développement d'applet fourni par Alipay, qui est développé en langage JavaScript et peut s'exécuter sur le client Alipay ;
• Cadre de développement de petits programmes intelligents Baidu : le cadre de développement de petits programmes fourni par Baidu, développé à l'aide du langage JavaScript, peut s'exécuter sur le client Baidu ;
• Cadre de développement de mini-programmes ByteDance : Le cadre de développement de mini-programmes fourni par ByteDance est développé à l'aide du langage JavaScript et peut s'exécuter sur les clients de ByteDance.

Cet article prendra le framework de développement d'applet WeChat comme exemple à présenter.

1.2 Outils de développement de petits programmes

L'outil de développement de mini-programmes est un outil d'aide au développement de mini-programmes. Il fournit des fonctions telles que l'édition de code, le débogage et la prévisualisation, permettant aux développeurs de développer et de déboguer plus efficacement. À l'heure actuelle, les principaux outils de développement de petits programmes comprennent principalement les types suivants :

• Outil de développement de mini programme WeChat : l'outil de développement de mini programme officiel prend en charge la prévisualisation en temps réel, l'analyse de code, l'invite d'erreur et d'autres fonctions ;
• Outil de développement de mini-programmes Alipay : l'outil de développement de mini-programmes fourni par Alipay prend en charge l'édition de code, la prévisualisation en temps réel, le débogage et d'autres fonctions ;
• Outil de développement de mini programmes Baidu Smart : L'outil de développement de mini programmes fourni par Baidu prend en charge l'édition de code, la prévisualisation en temps réel, le débogage et d'autres fonctions ;
• Outil de développement de mini programmes ByteDance : L'outil de développement de mini programmes fourni par ByteDance prend en charge la prévisualisation en temps réel, le débogage et d'autres fonctions.

2. Lignes directrices pour l'utilisation du cadre de développement du programme WeChat Mini

2.1 Préparation de l'environnement de développement

Avant de commencer à utiliser le framework de développement d'applet WeChat, nous devons préparer l'environnement de développement. Tout d'abord, nous devons télécharger et installer l'outil de développement d'applet WeChat, qui peut être téléchargé à partir de la page des outils de développement de la plateforme publique WeChat. Une fois l'installation terminée, ouvrez l'outil de développement et connectez-vous avec votre compte WeChat pour commencer le développement.

2.2 Créer un petit projet de programme

Dans l'outil de développement, cliquez sur Nouveau projet et saisissez le nom du projet, le répertoire du projet et d'autres informations pertinentes. Dans cette étape, nous pouvons choisir d'utiliser la capacité de développement cloud, ou nous pouvons choisir de ne pas l'utiliser. Après avoir cliqué sur OK, l'outil de développement générera automatiquement la structure du répertoire et le code initial d'un petit projet de programme pour nous.

2.3 Développer la page du mini programme

La page de l'applet est composée de plusieurs composants. Nous pouvons utiliser les composants du fichier .wxml de la page pour la mise en page, définir le style via le fichier .wxss et écrire la logique via le fichier .js.
Ce qui suit est une introduction à une page simple à titre d'exemple, montrant un texte Hello World et un bouton, et une boîte de dialogue apparaîtra après avoir cliqué sur le bouton.

<!-- index.wxml -->
<view class="container">
  <text>小程序开发框架与工具介绍</text>
  <button bindtap="showToast">点击查看提示</button>
</view>

Dans le fichier .wxml, nous avons utilisé le composant ** comme conteneur et utilisé Composants et **Composants pour afficher du texte et des boutons.

/* index.wxss */
.container {
    
    
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
    
    
  margin-top: 20px;
}

Dans le fichier .wxss, nous définissons le style du .container pour centrer le texte et les boutons verticalement, et définissons la marge supérieure des boutons.

// index.js
Page({
    
    
  showToast: function() {
    
    
    wx.showToast({
    
    
      title: '小程序开发框架与工具使用指南',
      icon: 'none'
    })
  }
})

Dans le fichier .js, nous définissons une fonction showToast.Lorsque le bouton est cliqué, la méthode wx.showToast est appelée pour faire apparaître une boîte de dialogue.

2.4 Applet de prévisualisation

Sélectionnez le mode de prévisualisation dans l'outil de développement pour afficher l'effet de l'applet dans la fenêtre de prévisualisation de l'outil de développement. Vous pouvez scanner le code QR dans l'outil de développement ou choisir de le prévisualiser sur la machine réelle.

2.5 Emballage et libération

Une fois le mini programme développé, nous devons le conditionner et le publier sur la plate-forme du mini programme. Dans l'outil de développement, cliquez sur le bouton de téléchargement pour télécharger l'applet sur la plate-forme d'applet. Avant de télécharger, nous devons enregistrer un petit compte de développeur de programme et effectuer l'authentification d'identité pertinente.

3. Guide de l'utilisateur de l'outil de développement de mini-programmes

3.1 Introduction à l'interface de l'outil de développement

Les outils de développement d'applet WeChat offrent une multitude de fonctions, notamment l'édition de code, la prévisualisation en temps réel, le débogage, etc. Voici une brève introduction à l'interface principale de l'outil de développement :

• Répertoire de fichiers : Affichez la structure du répertoire de fichiers du projet applet, où vous pouvez créer et modifier des fichiers ;
• Éditeur de code : utilisé pour modifier le code du projet d'applet, prenant en charge des fonctions telles que l'édition en temps réel et les invites de code ;
• Prévisualisation en temps réel : affichez l'effet de l'applet en temps réel, y compris la mise en page, le style des composants, etc. ;
• Outils de débogage : aidez les développeurs à déboguer les applets, y compris les invites d'erreur, l'affichage des journaux, etc.

3.2 Édition de code et débogage

Pendant le processus de développement, nous pouvons écrire et modifier le code dans l'éditeur de code, et l'outil de développement effectuera une analyse du code et des messages d'erreur en temps réel. Lorsqu'une erreur se produit dans le code, l'outil de développement affiche une invite d'erreur sur le côté gauche de l'éditeur de code et positionne le curseur à la mauvaise position.

Lorsque nous devons déboguer des applets, nous pouvons utiliser les outils de débogage fournis par les outils de développement. Grâce à l'outil de débogage, nous pouvons afficher le journal d'exécution de l'applet et afficher la structure et le style des composants de la page en cours. L'outil de débogage prend également en charge la visualisation des requêtes réseau, nous aidant à analyser et à résoudre les problèmes liés au réseau.

4. Résumé

Les cadres et outils de développement de petits programmes fournissent des fonctions puissantes et des composants riches, offrant aux développeurs des méthodes de développement pratiques et efficaces. On espère que les développeurs pourront utiliser ces outils de manière flexible dans le développement réel, continuer à explorer et à apprendre en profondeur et fournir aux utilisateurs de meilleures applications Mini Program.

---

Livres recommandés

Collection de tests écrits d'entrevue de programmeur Web Java

Introduction : Ce livre est spécialement écrit pour les entretiens avec les programmeurs Web Java, principalement pour répondre à certaines questions techniques courantes lors des entretiens. Le contenu couvre la fondation Web Java, le serveur Web, le framework MVC commun, le système de framework Spring et Spring Boot et Spring Cloud, la base de données relationnelle traditionnelle, le framework NoSQL et cache, la file d'attente de messages commune, les connaissances nécessaires du commerce électronique et d'Internet, la sécurité Internet et Distributed connaissance du système, écosystème open source Alibaba, modèles de conception, commandes Linux couramment utilisées par les développeurs de logiciels et autres connaissances techniques liées à la programmation Web Java, ainsi que d'autres composants de cadre ou outils de conteneur couramment utilisés, tels que Docker, Elasticsearch, Nginx, Maven , ZooKeeper, etc.

Les amis qui ont besoin d'acheter des livres dans un proche avenir peuvent directement cliquer ici pour acheter !

---

participer

1️⃣Méthodes de participation : suivre, aimer, mettre en signet et n'importe quel commentaire (chaque personne peut en commenter jusqu'à trois) 2️⃣Méthode gagnante
 : 5 personnes seront sélectionnées au hasard par le programme et chaque partenaire recevra un livre (facultatif)
3️⃣Heure de l'événement : jusqu'en 2023- 08-4 22:00:00

Remarque : Une fois l'événement terminé, les gagnants seront annoncés sur ma page d'accueil comme prévu et seront livrés à domicile avec la livraison gratuite.

---