Installation de l'environnement UniApp

UniApp est un framework qui utilise Vue.js pour développer toutes les applications front-end. Les développeurs écrivent un seul ensemble de code qui peut être publié sur iOS, Android, Web (responsive), et divers mini-programmes (WeChat/Alipay/Baidu/Toutiao/Feishu/QQ/Kuaishou/DingTalk/Taobao), Quick App, et de nombreuses autres plateformes.

uni-app prend en charge la création rapide de projets de deux manières : via l'interface visuelle et la ligne de commande vue-cli.

Installation et configuration de l'outil de développement HBuilderX

HBuilderXH est la première lettre de HTML, Builder est constructeur, et X est la version de nouvelle génération de HBuilder. Nous l'abrégeons aussi commeHX。
HXOuiLéger comme un éditeur, puissant comme un IDEla version combinée.

HBuilderX dispose d'environnements intégrés, fonctionne immédiatement et ne nécessite pas de configurer nodejs.

Télécharger et installer :

  1. Visitez le site officiel :https://www.dcloud.io/hbuilderx.html
  2. Choisissez la version adaptée à votre système d'exploitation (Windows/macOS/Linux)

Après avoir téléchargé et installé, nous pouvons définir notre thème préféré :

Créer UniApp

Cliquez sur File dans la barre d'outils -> New -> Project (raccourciCtrl+N）：

Sélectionnez le type uni-app, saisissez le nom du projet, choisissez un modèle, puis cliquez sur Créer. Le projet est alors créé avec succès.

Les modèles intégrés d'uni-app incluent le modèle de projet vide par défaut, les composants officiels et exemples d'API Hello uni-app, et un modèle important est le modèle de projet uni ui, qui est recommandé pour le développement quotidien et intègre de nombreux composants couramment utilisés.

Exécuter uni-app

Exécuter dans le navigateur : entrez dans le projet, cliquez sur Exécuter dans la barre d'outils -> Exécuter vers le navigateur -> sélectionnez un navigateur. Choisissez Chrome ou un autre navigateur pour découvrir la version web d'uni-app.

Exécuter l'application sur un téléphone ou un émulateur : utilisez un port USB avec une tension suffisante pour connecter le téléphone, activez le débogage USB dans les paramètres, autorisez l'ordinateur à déboguer le téléphone sur le téléphone, entrez dans le projet, cliquez sur Exécuter dans la barre d'outils -> Exécuter l'application sur téléphone ou émulateur, et vous pouvez découvrir uni-app sur cet appareil.

Exécuter dans les outils de développement WeChat : entrez dans le projet, cliquez sur Exécuter dans la barre d'outils -> Exécuter vers le simulateur de mini-programme -> Outils de développement WeChat, et vous pouvez découvrir uni-app dans les outils de développement WeChat.

Remarque :Si vous l'utilisez pour la première fois, vous devez configurer le chemin correspondant de l'IDE de mini-programme avant qu'il puisse s'exécuter correctement. Comme indiqué ci-dessous, saisissez le chemin d'installation des outils de développement WeChat dans le champ de saisie.

Remarque :Les outils de développement WeChat doivent avoir le port de service activé dans Paramètres -> Sécurité des outils WeChat.

Exécuter dans les outils de développement de mini-programmes Alipay : entrez dans le projet, cliquez sur Exécuter dans la barre d'outils -> Exécuter vers le simulateur de mini-programme -> Outils de développement de mini-programmes Alipay, et vous pouvez découvrir uni-app dans les outils de développement de mini-programmes Alipay.

Exécuter dans les outils de développement de mini-programmes pour Baidu, Douyin, QQ, Quick App (divisée en Alliance et Huawei), Kuaishou, Feishu, 360, JD.com, etc. : Le contenu est le même que ci-dessus et ne sera pas répété.

Remarque :

  • Si vous l'utilisez pour la première fois, vous devez configurer le chemin pertinent de l'outil de développement. Cliquez sur Exécuter dans la barre d'outils -> Exécuter vers le simulateur de mini-programme -> Paramètres d'exécution, puis configurez le chemin de l'outil de développement de mini-programme correspondant.

  • L'outil de mini-programme WeChat doit avoir des autorisations configurées ; sinon, HBuilder ne peut pas appeler la ligne de commande de l'outil de développement de mini-programme WeChat.

  • Les outils de mini-programme Alipay/Baidu/Douyin/360 ne prennent pas en charge la spécification directe d'un projet à démarrer et exécuter. Par conséquent, après le démarrage de l'outil de développement, ouvrez le chemin du projet indiqué dans la console HBuilderX dans l'outil de développement de mini-programme correspondant.

  • Si le démarrage automatique de l'outil de développement de mini-programme échoue, démarrez manuellement l'outil de développement de mini-programme et ouvrez le projet en utilisant le chemin de projet indiqué dans la console HBuilderX.

Le raccourci clavier pour l'exécution estCtrl+R。

HBuilderX fournit également un menu d'exécution rapide, dans lequel vous pouvez sélectionner rapidement l'appareil à exécuter en appuyant sur un chiffre :

Créer via la commande Vue CLI

En plus de l'interface visuelle HBuilderX, vous pouvez également créer des projets uni-app via vue-cli.

Créer uni-app

Créer un projet Vue 3

Créer un projet développé avec JavaScript :

npx degit dcloudio/uni-preset-vue#vite my-vue3-project
npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project

Créer un projet développé avec TypeScript

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

Créer un projet Vue 2

Nécessite une installation globalevue-cli npm install -g @vue/cli

Utiliser la version officielle (correspondant à la dernière version officielle de HBuilderX)

vue create -p dcloudio/uni-preset-vue my-project

Utiliser la version alpha (correspondant à la dernière version alpha de HBuilderX)

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

À ce moment, il vous sera demandé de sélectionner un modèle de projet (la version Vue3/Vite ne le demandera pas ; actuellement, seul le modèle par défaut est pris en charge). Pour une première expérience, il est recommandé de choisir le modèle de projet hello uni-app, comme indiqué ci-dessous :

Pour plus de contenu, consultez :

Autres extensions