Une application WeChat Mini Program est structurée autour de plusieurs fichiers de configuration et de fichiers de page.

Configuration Globale : app.json

Le fichier app.json définit la configuration globale de l'application, y compris le chemin de toutes les pages, l'apparence de l'interface utilisateur, les délais d'attente réseau et la barre de tabulation inférieure.

{
 "pages": [
   "pages/accueil/accueil",
   "pages/journal/journal"
 ],
 "window": {
   "backgroundColor": "#F8F8F8",
   "navigationBarBackgroundColor": "#FFFFFF",
   "navigationBarTitleText": "Mon App",
   "navigationBarTextStyle": "black"
 }
}
 

• Le champ pages liste tous les chemins des pages de l'application, informant le client WeChat de l'emplacement des définitions de page.
• Le champ window configure les propriétés visuelles communes à toutes les pages, telles que la couleur de fond de la barre de navigation et le texte.

Configuration Spécifique à la Page : page.json

Chaque page peut avoir son propre fichier de configuration JSON (par exemple, pages/journal/journal.json) pour définir des propriétés spécifiques à cette page. Cela permet de personnaliser l'apparence et le comportement de chaque page indépendamment. Par exemple, vous pouvez définir une couleur de barre de navigation différente pour une page spécifique ou activer/désactiver le comportemetn de rafraîchissement par glissement.

Configuration de l'Outil de Développement : project.config.json

Le fichier project.config.json, situé à la racine du projet, stocke les paramètres de personnalisation de l'outil de développement WeChat. Ces paramètres incluent les préférences d'interface utilisateur, les configurations de compilation et d'autres options spécifiques à l'environnement de développement. La présence de ce fichier permet de restaurer automatiquement ces configurations lors du passage à un autre ordinateur ou après une réinstallation de l'outil.

Structure d'une Page

Une page est principalement composée de trois types de fichiers : un fichier WXML pour la structrue, un fichier WXSS pour le style, et un fichier JS pour la logique.

Structure : .wxml

Le langage WXML (Weixin Markup Language) est similaire au HTML, utilisant des balises et des attributs. Cependant, il introduit des fonctionnalités spécifiques pour les Mini Programs. Ces balises WXML sont finalement traduites en HTML.

<!-- index.wxml -->
<view class="conteneur">
 <view class="informations-utilisateur">
   <button wx:if="{{!utilisateurConnecte && supportLogin}}" open-type="getUserInfo" bindgetuserinfo="recupererInfosUtilisateur">
     Obtenir avatar et pseudo
   </button>
   <block wx:else>
     <image class="avatar-utilisateur" src="{{infosUtilisateur.avatarUrl}}" bindtap="allerVersProfil" mode="cover">
     <text class="pseudo-utilisateur">{{infosUtilisateur.nickName}}</text>
   </block>
 </view>
 <view class="message-utilisateur">
   <text class="motto">{{citation}}</text>
 </view>
</view>
 

Des directives comme wx:if permettent une gestion conditionnelle de l'affichage, inspirée des principes MVVM, où la logique JavaScript gère l'état plutôt que de manipuler directement le DOM.

Logique d'Interaction : .js

Le fichier JavaScript gère la logique de l'application et les interactions utilisateur. Il permet de réagir aux événements déclenchés dans le WXML.

Par exemple, pour mettre à jour une donnée après un clic sur un bouton :

// Dans le fichier JS de la page (ex: index.js)
Page({
 data: {
   message: "Bonjour !",
   utilisateurConnecte: false,
   supportLogin: true, // Supposons que cette fonctionnalité est supportée
   infosUtilisateur: null,
   citation: "Un jour à la fois."
 },
 recupererInfosUtilisateur: function(e) {
   if (e.detail.userInfo) {
     this.setData({
       infosUtilisateur: e.detail.userInfo,
       utilisateurConnecte: true
     });
   }
 },
 allerVersProfil: function() {
   // Logique de navigation vers le profil
   console.log("Navigation vers le profil...");
 },
 // ... autres fonctions de page
});
 

Dans l'exemple WXML précédent, le bouton déclanche la fonction recupererInfosUtilisateur.

Et pour modifier la valeur affichée dans le template suite à une action :

// Dans le fichier JS de la page
Page({
 data: {
   msg: "Texte initial"
 },
 modifierMessage: function() {
   this.setData({ msg: "Message mis à jour !" });
 }
});
 

Le template WXML correspondant pourrait ressembler à ceci :

<view>{{ msg }}</view>
<button bindtap="modifierMessage">Changer le message</button>
 

L'utilisation de this.setData() est la méthode standard pour mettre à jour l'état des données qui sera ensuite répercuté dans l'interface utilisateur.