Créer une application mini-programme avec UniApp
1. Installer HBuilder et les opérations de base
L'installation d'HBuilder n'est pas traitée ici.
(i). Installation des plugins :
Si vous prévoyez d'utiliser Scss à l'avenir, recherchez le plugin sur la marketplace, puis cliquez pour ouvrir HbuilderX et installer le plugin dans l'application.
(ii). Modification du mode de création rapide :
Cela inclut également la configuration du thème de l'éditeur de développement.
(iii). Modification des paramètres de base de l'éditeur :
Vous pouvez configurer via l'interface graphique ou modifier le fichier Setting.json disponible en ligne.
(iv). Création d'un nouveau projet UniApp
Parlez du menu "Nouveau-Projet" et choisissez le chemin d'enregistrement et la version de Vue appropriées.
(v). Structure du répertoire
Consultez cette adresse pour plus de détails : https://uniapp.dcloud.net.cn/tutorial/project.html
│─components Répertoire pour les composants Vue conformes aux normes
│ └─comp-a.vue Composant réutilisable A
├─pages Répertoire pour les pages de l'application
│ ├─index
│ │ └─index.vue Page d'accueil
│ └─list
│ └─list.vue Page de liste
├─static Répertoire pour les ressources statiques locales (images, vidéos)
├─main.js Fichier d'entrée pour l'initialisation de Vue
├─App.vue Configuration de l'application, permettant de définir des styles globaux et des écouteurs de cycle de vie
├─pages.json Configuration des routes, barres de navigation et autres informations sur les pages
├─manifest.json Configuration du nom de l'application, de l'ID d'application, de l'emblème, de la version, etc.
(vi). Exécution du projet sur WeChat Developer Tools
1. Remplissez votre ID d'application WeChat correspondant :
2. Configurez le chemin d'installation de WeChat Developer Tools dans HBuilderX :
Dans les paramètres de l'outil, cliquez pour obtenir le chemin du fichier de l'application.
3. Activez le port serveur de WeChat Developer Tools :
Allez dans les paramètres -> Sécurité et activez le service WeChat Developer Tools.
4. Ouvrez WeChat Developer Tools depuis HBuilderX :
Cliquez sur le menu : Exécuter -> Exécuter dans le simulateur de mini-programme -> WeChat Developer Tools. Le projet UniApp sera compilé automatiquement et exécuté dans WeChat Developer Tools pour afficher son effet et effectuer le débogage.
Notez : N'effectuez pas de modifications directes sur le mini-programme dans le code source UniApp.
Par exemple, si nous devons configurer le fichier project.config.json du mini-programme :
Ajoutez, par exemple, pour résoudre l'erreur "routeDone with a webviewId 3 that is not the current page", supprimez le contenu généré par défaut de la page.
(vii). Gestion du projet avec Git
1. Construire le fichier .gitignore :
# Ignorer les dépendances et les fichiers de compilation
/node_modules
/unpackage/dist
Remarque : Comme notre répertoire unpackage ne contient qu'un seul sous-répertoire dist qui est ignoré, le répertoire unpackage lui-même ne sera pas suivi par Git. Ajoutez donc un fichier .gitkeep comme placeholder.
2. Initialiser Git :
# Dans le répertoire racine du projet
git init
3. Ajouter tous les fichiers au dépôt temporaire :
git add .
4. Enregistrer les modifications dans le dépôt local :
git commit -m "Votre commentaire"
5. Associer le dépôt distant — Gitee :
# Créer un dépôt vide sur Gitee et copier les instructions
cd existing_git_repo # Votre répertoire racine
git remote add origin VOTRE_ADRESSE # Associez le dépôt distant
git push -u origin "master" # Pouvez-vous pousser vers la branche master
Après avoir terminé ces étapes, vous pouvez actualiser Gitee pour voir le dépôt. Si vous avez initialisé le dépôt sans ces instructions, remplacez l'adresse par votre URL de clonage/dépôt.
2. Construction du squelette de développement
(i). Barre de navigation (tabBar)
1. Créer la branche tabBar
Ceci est optionnel mais recommandé. Assurez-vous toujours de savoir sur quelle branche vous travaillez.
# Créer la branche tabBar
git branch tabBar
# Changer vers la branche tabBar
git checkout tabBar
# Commande simplifiée pour éviter de faire oublier le changement de branche
git checkout -b tabBar
2. Créer les pages de la barre de navigation
Choisissez les icônes nécessaires et cochez les options de création de dossier et d'enregistrement dans pages.json. Créez les pages home, my, cate et cart.
3. Placer les ressources statiques
Les ressources statiques principales sont les icônes. Vous pouvez les télécharger sur : https://www.iconfont.cn/
Utilisez des images de test y compris des tutoriels sur leur utilisation.
4. Configurer la barre de navigation
La configuration se fait dans pages.json à côté de "globalStyle".
// Exemple de configuration
"tabBar": {
"list": [
{
"pagePath": "pages/index/index", // Chemin vers la page
"text": "Accueil", // Nom de la page
"iconPath": "static/tab_icons/home.png", // Icone normal
"selectedIconPath": "static/tab_icons/home-active.png" // Icone sélectionné
},
// Continuez à ajouter d'autres configurations...
{}
],
}
Le résultat après configuration :
5. Configurer la barre de navigation
La configuration est faite dans pages.json.
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
}
},
6. Compléments
Si le titre de la barre de navigation ne s'affiche pas, il peut être parce que le compilateur a ajouté un style automatiquement :
{
"path" : "pages/home/home",
"style" :
{
// "navigationBarTitleText" : "", // Commentez ou supprimez cela
"enablePullDownRefresh" : false
}
},
7. Soumettre et fusionner les branches
# Soumettre au dépôt local
git add .
git commit -m "Terminé le développement de la barre de navigation"
# Pousser la branche locale au dépôt distant pour sauvegarder
git push -u origin tabBar
# Fusionner la branche locale tabBar avec la branche master locale
git checkout master
git merge tabBar
# Mettre à jour master
git push
# Supprimer la branche locale tabBar
git branch -d tabBar
Pour modifier ultérieurement le code de la barre de navigation, vous pouvez créer une nouvelle branche associée :
# Mettre à jour le dépôt local
git fetch origin
# Créer une branche locale à partir d'une branche distante
git checkout -b [nom_de_la_branche] origin/[nom_de_la_branche]