Présentation de la rencontre communautaire pratique d'uni-app : construction de projets et d'environnements

Recommandé (gratuit) : Tutoriel de développement d'uni-app

Article Table des matières

• Avant-propos
• 1. Introduction du projet
• 2. Configuration de l'environnement et création du projet
• 1. Construction de l'environnement de développement
  • 2. Créer un projet uni-app
3. >1. Configuration de débogage du téléphone mobile Android
• 2. Configuration du débogage de l'applet iOS réel
• 3. Configuration du débogage de l'applet WeChat
  • 4. >
  • Résumé
  • Avant-propos
• Cet article présente principalement la vue d'ensemble et l'environnement de construction du projet :
Ce projet est un communauté développée sur la base de l'application uni-app Dating ; la construction de l'environnement est principalement basée sur HbuilderX, et vous pouvez tester et exécuter le projet après l'avoir créé en même temps, afin d'être compatible avec plusieurs plates-formes, il est nécessaire de le faire. créez un environnement de débogage multi-terminal, comprenant Android, iOS, l'applet WeChat, l'applet Alipay, etc.

1. Introduction au projet

Ce projet est basé sur
uni-app

et est un développement pratique d'applications de rencontres communautaires, réalisant

développement unique, publication multi-end , publication simultanée sur l'application Android, l'application iOS, l'applet WeChat, l'applet Alipay et d'autres plates-formes, parmi lesquelles l'interface back-end est implémentée à l'aide de Python Django. Le projet comprend un module de publication, un module de sujet, un module de recherche, un module d'adhésion, un module de chat, un module de publicité et d'autres modules, etc., et réalise enfin des fonctions riches et une belle interface est la suivante :

L'effet de démonstration dynamique est le suivant :

uni-app Démonstration de développement d'applications de rencontres communautaires

2. Configuration de l'environnement et création de projets

1. Configuration de l'environnement de développement

Le noyau. éditeur de ce projet L'outil est HBuilderX, qui peut être téléchargé sur le site officiel https://www.dcloud.io/hbuilderx.html Sélectionnez simplement le système et la version requis à télécharger. Après le téléchargement, décompressez-le dans le répertoire d'installation et cliquez sur HBuilderX.exe dans le répertoire décompressé pour l'utiliser.

Après ouverture, l'interface est la suivante :

Afin d'accélérer le développement, vous pouvez installer certains plug-ins Cliquez sur
pour sélectionner celui requis. installation du plug-in. HBuilderX a été installé par défaut. Certains

plug-ins principaux

, tels que l'exécution d'une machine réelle, le débogage d'application uni-app, etc., ces plug-ins ne prennent pas en charge l'installation à partir du marché des plug-ins.
Vous pouvez également choisir d'installer la compilation scss/sass, etc. Vous pouvez la sélectionner sur le marché des plug-ins DCloud https://ext.dcloud.net.cn/?cat1=1&cat2=11&orderBy=TotalDownload et l'installer en utilisant HBuilderX pour importer le plug-in.

2. Créez le projet uni-app 导航栏 → 工具插件 → 安装Utilisez HBuilderX pour créer un projet initial, sélectionnez uni-app, nommé Community_Dating, comme suit :

Après la création, il peut être débogué et exécuté, et peut être exécuté sur plusieurs terminaux tels que des applications et des mini-programmes. Prenons l'exemple du débogage de l'application Android. Si vous choisissez

Test de l'appareil réel

, vous devez connecter le téléphone à l'avance et activer le débogage USB. Le processus est le suivant :
.

De toute évidence, cela a réussi. Exécutez l'application du côté Android.
3. Construction de l'environnement de débogage multi-terminal

1. Configuration de débogage du téléphone Android

Le débogage réel de la machine sera affiché. dans la mesure maximale L'état de l'APP en fonctionnement réel. En prenant Huawei Nova2 comme exemple, après avoir connecté le câble de données USB au téléphone mobile, vous devez modifier la méthode de connexion pour transférer des fichiers, comme suit :

Ensuite, allumez le mode développeur. Si c'est le cas, pour l'ouvrir une fois, vous devez cliquer plusieurs fois sur le numéro de version, puis ouvrir le débogage USB. Le processus est le suivant :

À ce stade. , le véritable appareil qui vient d'être ajouté sera ajouté aux options d'exécution, comme suit :

Vous pouvez cliquer pour déboguer à ce stade. Le processus est le même que pour exécuter l'application dans "2. Configuration de l'environnement et création de projet".
Il prend également en charge les mises à jour en temps réel de l'APP et le débogage dynamique lors de la modification du code du projet, comme suit :

Comme vous pouvez le voir, la compilation et la mise à jour dynamiques sont implémentées.

2. Configuration de débogage de l'appareil iOS réel

Utilisez le câble de données pour connecter l'iPhone et installez iTunes pour l'affichage à l'écran.
Lors du débogage, l'invite suivante peut apparaître :

C'est-à-dire 未受信任的企业级开发者, vous devez le configurer, entrez 设置 → 通用 → 设备管理 → Digital Heaven (Beijing) lnternet... → 信任“Digital Heaven(Beijing) Internet & Te..., puis entrez dans l'application pour le débogage, et vous réussirez à exécuter l'application.

3. Configuration du débogage de l'applet WeChat

Lorsque vous utilisez l'applet WeChat pour le débogage, vous devez d'abord installer les outils de développement WeChat, vous pouvez directement cliquer sur https://mp . weixin.qq.com/debug/wxadoc/dev/devtools/download.html Choisissez le système et la version appropriés pour l'installation.
Avant le débogage, deux étapes de configuration sont requises, comme suit :
(1) Configurez le chemin d'installation des outils de développement WeChat
(2) Ouvrez le port de service des outils de développement WeChat ;

Pour plus de détails, veuillez vous référer à la deuxième partie de https://blog.csdn.net/CUFEECR/article/details/111088889.

Le processus en cours est le suivant :

Vous pouvez également prévisualiser et déboguer sur la vraie machine.

4. Configuration du débogage de l'applet Alipay

Avant d'utiliser le débogage de l'applet Alipay, vous devez installer les outils de développement de l'applet, cliquez sur https://opendocs.alipay .com/ mini/ide/download Sélectionnez la version et le système appropriés et installez-les.
Après l'installation, vous devez définir le chemin de l'outil de développement du programme Alipay Mini, comme suit :

À ce stade, exécutez l'outil de développement du programme Alipay Mini, comme suit :

Comme vous pouvez le constater, l'applet Alipay est exécutée et la compilation dynamique est implémentée.

En plus de la prévisualisation dans les outils de développement, vous pouvez également prévisualiser sur un appareil réel, comme suit :

obtient le même effet de prévisualisation.

Résumé

En tant que framework frontal pour développer des applications multiplateformes à l'aide de Vue.js, uni-app peut écrire un ensemble de code Vue.js et compiler vers iOS, Android, l'applet WeChat et d'autres plates-formes, réalisant un partage multi-terminal, réduisant considérablement les coûts de développement et d'apprentissage et accélérant le développement. L'utilisation d'uni-app pour développer des applications de rencontres communautaires peut également obtenir rapidement l'effet de publier un ensemble de codes sur plusieurs plates-formes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!