# Tutoriel applet WeChat (avec code du fichier de configuration)

1. Introduction

Qu'est-ce qu'un mini programme WeChat

• WeChat Mini Program est un tout nouveau formulaire de candidature. Il s'agit d'une application développée sur la base de la plateforme sociale WeChat. Les utilisateurs peuvent l'utiliser sans le télécharger ni l'installer. C'est une application légère.
• Les applets WeChat ont non seulement les fonctions des applications traditionnelles, telles que l'affichage de biens et la fourniture de services, mais ont également des attributs sociaux plus forts, tels que le partage et le transfert, et peuvent être rapidement diffusées dans des scénarios sociaux tels que les moments WeChat et les groupes WeChat.
• Les applets WeChat présentent les avantages d'un faible coût de développement, d'un cycle de développement court et d'une bonne expérience utilisateur, et constituent une tendance importante dans le développement d'applications Internet mobiles.

Avantages et scénarios d'application des programmes WeChat Mini - Avantages des programmes WeChat Mini :

• Pas besoin de télécharger et d'installer, cliquez et jouez, améliorez l'expérience utilisateur
• Étroitement intégré à l'écosystème WeChat et dispose d'une énorme base d'utilisateurs
• Faible coût de développement, seuil d'entrée bas, adapté au développement individuel et en petites équipes
• Prise en charge de plusieurs langages et frameworks de développement, grande flexibilité
• Scénarios d'application des applets WeChat :
  • Domaines O2O tels que la livraison de nourriture, les achats en ligne et les services de vie
  • Social, divertissement, éducation et autres domaines verticaux
  • Scénarios d'application au niveau de l'entreprise tels que la gestion interne et la formation des employés
  • Scénarios d'application légers dans d'autres domaines

2. Préparatifs

1. Enregistrez un compte du programme WeChat Mini
2. Installer les outils de développement
3. Comprendre le cadre de développement du programme WeChat Mini

3. Commencer le développement

3.1. Créer un projet

Introduction à la structure du projet

• Présentation de la structure du projet :

La structure du projet d'applet est la suivante :

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
└── utils
    └── util.js

Parmi eux, app.js, app.json, app.wxssse trouvent les fichiers de configuration globale, pagesla configuration et le code de chaque page se trouvent sous le dossier et utilsle code de la classe d'outils se trouve sous le dossier.

Introduction aux fichiers de configuration - Introduction aux fichiers de configuration

Dans le projet applet, nous devons utiliser deux fichiers de configuration : app.jsonet project.config.json.

• app.json

  app.jsonIl s'agit du fichier de configuration globale de l'applet, qui permet de configurer le chemin de la page, la couleur d'arrière-plan de la fenêtre, le style de la barre de navigation, la barre d'onglets inférieure, etc. de l'applet. Voici un app.jsonexemple de configuration simple :

  {
        
        
    "pages": [
      "pages/index/index",
      "pages/logs/logs"
    ],
    "window": {
        
        
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信小程序",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    },
    "tabBar": {
        
        
      "color": "#999999",
      "selectedColor": "#ff0000",
      "backgroundColor": "#ffffff",
      "borderStyle": "black",
      "list": [
        {
        
        
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "images/tabbar/home.png",
          "selectedIconPath": "images/tabbar/home_active.png"
        },
        {
        
        
          "pagePath": "pages/logs/logs",
          "text": "日志",
          "iconPath": "images/tabbar/logs.png",
          "selectedIconPath": "images/tabbar/logs_active.png"
        }
      ]
    }
  }
  

• project.config.json

  project.config.jsonIl s'agit du fichier de configuration du projet Mini Program, qui est utilisé pour configurer les informations relatives à l'outil de développement du Mini Programme, telles que l'appid, le nom du projet, les informations sur le développeur, les paramètres de compilation, etc. Voici un project.config.jsonexemple de configuration simple :

  {
        
        
    "miniprogramRoot": "./",
    "appid": "wx1234567890abcdef",
    "projectname": "微信小程序",
    "description": "这是一个微信小程序示例",
    "setting": {
        
        
      "urlCheck": true,
      "es6": true,
      "postcss": true,
      "minified": true,
      "newFeature": true
    },
    "compileType": "miniprogram"
  }
  

3.2. Développement des pages

Structure et style des pages

• Structure et style des pages

  • wxmlÉcrivez la structure de la page dans le fichier, vous pouvez utiliser des composants de base tels que <view>, <text>ou des composants personnalisés.

    <view class="container">
      <view class="header">
        <text class="title">这是标题</text>
      </view>
      <view class="content">
        <text class="text">这是内容</text>
      </view>
    </view>
    

  • Écrivez le style de page dans wxssle fichier, vous pouvez définir différents styles pour différents composants.

    .container {
            
            
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    .header {
            
            
      width: 100%;
      height: 50px;
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .title {
            
            
      font-size: 24px;
      color: #fff;
    }
    
    .content {
            
            
      width: 80%;
      margin-top: 20px;
      padding: 20px;
      background-color: #eee;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .text {
            
            
      font-size: 18px;
      color: #333;
    }
    

Liaison de données et rendu de liste

• liaison de données

  <!-- WXML模板 -->
  <view> {
       
       { message }} </view>
  
  // JS脚本
  Page({
    data: {
      message: 'Hello World!'
    }
  })
  

• rendu de liste

  <!-- WXML模板 -->
  <view wx:for="{
       
       { array }}" wx:key="{
       
       { index }}">
    {
       
       { index }}: {
       
       { item.message }}
  </view>
  
  // JS脚本
  Page({
    data: {
      array: [
        { message: 'foo' },
        { message: 'bar' }
      ]
    }
  })
  

Gestion des événements et appels API - Gestion des événements :

• Événement de clic : déclenché lorsque l'utilisateur clique sur un composant, le gestionnaire d'événements peut être lié via bindtap ou catchtap.
• Événement d'entrée : déclenché lorsque l'utilisateur saisit du contenu dans la zone de saisie, le gestionnaire d'événements peut être lié via bindinput ou catchinput.
• Événement Swipe : déclenché lorsque l'utilisateur glisse sur un composant, le gestionnaire d'événements peut être lié via bindtouchmove ou catchtouchmove.
• Appels API :
  • API de demande réseau : vous pouvez lancer une demande réseau via wx.request, obtenir des données et les traiter.
  • API de mise en cache des données : les données peuvent être mises en cache localement via wx.setStorageSync et wx.getStorageSync pour faciliter la prochaine utilisation.
  • API de localisation géographique : vous pouvez obtenir les informations de localisation géographique de l'utilisateur via wx.getLocation et effectuer des opérations telles que le positionnement et la navigation.
• feuille:

  type d'événement	Nom de l'API	illustrer
  événement de clic	liaison/prise en main	Lancé lorsque l'utilisateur clique sur un composant
  événement d'entrée	liaisonentrée/catchput	Lancé lorsque l'utilisateur entre quelque chose dans la zone de saisie
  événement de diapositive	liertouchmove/catchtouchmove	Lancé lorsque l'utilisateur glisse sur un composant
  API de requête réseau	wx.demande	Initier une requête réseau, obtenir des données et les traiter
  API de cache de données	wx.setStorageSync/wx.getStorageSync	Mettre en cache les données localement pour la prochaine utilisation
  API de géolocalisation	wx.getLocation	Obtenir les informations de localisation géographique de l'utilisateur, effectuer des opérations telles que le positionnement et la navigation

3.3. Développement de composants

Introduction aux composants communs

• Introduction aux composants communs :
  • composant de bouton
    • Boutons pour l'interaction de l'utilisateur, vous pouvez définir différents styles et événements.
    • Exemple de code :

      <button bindtap="handleClick">点击我</button>
      

  • composant d'image
    • Utilisé pour afficher des images, différentes tailles et sources peuvent être définies.
    • Exemple de code :

      <image src="{
                 
                 {imageUrl}}" mode="aspectFit"></image>
      

  • composant de zone de saisie
    • Il est utilisé par les utilisateurs pour saisir du texte, et différents types et informations d'invite peuvent être définis.
    • Exemple de code :

      <input type="text" placeholder="请输入内容"></input>
      

  • composant de formulaire
    • Pour afficher les données, différents nombres de colonnes et de lignes peuvent être définis.
    • Exemple de code :

      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>18</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>20</td>
          </tr>
        </tbody>
      </table>
      

Développement de composants personnalisés - Développement de composants personnalisés

• Exemple 1 : un composant personnalisé implémente un compteur simple

  <!-- counter.wxml -->
  <view class="counter">
    <button class="counter-btn" bindtap="handleDecrease">-</button>
    <view class="counter-num">{
       
       {num}}</view>
    <button class="counter-btn" bindtap="handleIncrease">+</button>
  </view>
  

  // counter.js
  Component({
        
        
    properties: {
        
        
      num: {
        
        
        type: Number,
        value: 0
      }
    },
    methods: {
        
        
      handleDecrease() {
        
        
        this.setData({
        
        
          num: this.data.num - 1
        })
      },
      handleIncrease() {
        
        
        this.setData({
        
        
          num: this.data.num + 1
        })
      }
    }
  })
  

  // counter.json
  {
        
        
    "component": true
  }
  

  /* counter.wxss */
  .counter {
        
        
    display: flex;
    align-items: center;
  }
  .counter-btn {
        
        
    width: 50rpx;
    height: 50rpx;
    border: 1rpx solid #ccc;
    border-radius: 50%;
    font-size: 30rpx;
    color: #333;
    background-color: #fff;
  }
  .counter-num {
        
        
    flex: 1;
    text-align: center;
    font-size: 32rpx;
  }
  

  <!-- 使用自定义组件 -->
  <counter num="{
         
         {count}}" />
  

• Exemple 2 : les composants personnalisés implémentent un carrousel simple

  <!-- swiper.wxml -->
  <swiper indicator-dots="{
         
         {indicatorDots}}"
          autoplay="{
         
         {autoplay}}"
          interval="{
         
         {interval}}"
          duration="{
         
         {duration}}">
    <swiper-item wx:for="{
         
         {images}}"
                 wx:key="*this">
      <image src="{
         
         {item}}" class="swiper-img" />
    </swiper-item>
  </swiper>
  

  // swiper.js
  Component({
        
        
    properties: {
        
        
      images: {
        
        
        type: Array,
        value: []
      },
      indicatorDots: {
        
        
        type: Boolean,
        value: false
      },
      autoplay: {
        
        
        type: Boolean,
        value: false
      },
      interval: {
        
        
        type: Number,
        value: 5000
      },
      duration: {
        
        
        type: Number,
        value: 500
      }
    }
  })
  

  // swiper.json
  {
        
        
    "component": true
  }
  

  /* swiper.wxss */
  .swiper-img {
        
        
    width: 100%;
    height: 100%;
  }
  

4. Publiez l'applet

Processus d’examen du mini-programme

• Processus d’examen des petits programmes :
  1. Soumettre une demande de révision
  2. à l'étude
  3. examen réussi
  4. Publier l'applet
  5. Mini programme en ligne

Processus de publication de mini-programmes - Processus de publication de mini-programmes :

1. Connectez-vous à la plateforme publique WeChat et obtenez l'AppID du mini programme dans « Développement » – « Paramètres de développement ».
2. Complétez les informations de base du mini programme dans "Paramètres" - "Paramètres de base", y compris le nom, l'avatar, le profil, la catégorie, etc.
3. Créez une version du mini programme dans « Développement » – « Gestion des versions » et téléchargez le package de code du mini programme.
4. Après avoir réussi la révision, soumettez la révision de la version dans « Gestion des versions » et attendez le résultat de la révision.
5. Après avoir réussi l'examen, publiez la version du mini programme dans « Gestion des versions », et vous pourrez rechercher et utiliser le mini programme dans WeChat.

5. Résumé

Développement futur des mini-programmes WeChat

• Développement futur des mini-programmes WeChat
  • Le programme WeChat Mini deviendra l'un des portails importants de l'Internet mobile, offrant aux utilisateurs des services plus pratiques.
  • Les mini-programmes WeChat amélioreront encore ses capacités, telles que la prise en charge d'un plus grand nombre de périphériques matériels et la fourniture d'API plus riches.
  • Les mini-programmes WeChat deviendront un moyen important de transformation numérique pour les entreprises, offrant aux entreprises des méthodes de marketing plus efficaces et plus pratiques.
  • Le programme WeChat Mini deviendra l'une des plates-formes importantes pour les développeurs, offrant aux développeurs un écosystème plus complet et un support de chaîne d'outils plus riche.

Le rôle et la valeur des ingénieurs front-end dans le développement des applets WeChat- Le rôle et la valeur des ingénieurs front-end dans le développement des applets WeChat

• Responsable du développement front-end de petits programmes, y compris la mise en page, la logique d'interaction, le rendu des données, etc.
• Collaborer avec les concepteurs et les ingénieurs back-end pour terminer le développement et le lancement de petits programmes
• Garantir les performances et l'expérience utilisateur du Mini Programme, et améliorer le taux de rétention des utilisateurs et l'activité du Mini Programme
• Participer à l'itération et à l'optimisation des petits programmes, et améliorer continuellement la qualité et la compétitivité des petits programmes
• Assurer un leadership technique au sein de l’équipe et guider la croissance et la promotion des autres ingénieurs front-end