Hippy

Cadre multiplateforme hippie

Page d'accueil

Introduction

Hippy est un framework de développement multiplateforme, qui vise à aider les développeurs à écrire une seule fois et à s'exécuter sur plusieurs plates-formes (iOS, Android, Web, etc.). Hippy est plutôt convivial avec les développeurs Web, en particulier ceux qui connaissent React ou Vue. Avec Hippy, les développeurs peuvent facilement créer l'application multiplateforme.

Hippy est désormais appliqué dans les principales applications de Tencent telles que Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App et Tencent News, atteignant des centaines de millions d'utilisateurs ordinaires.

? Avantages

• Conçu pour les développeurs Web, prend officiellement en charge les frameworks Web comme React et Vue .
• Mêmes API pour différentes plateformes.
• Excellentes performances avec la communication de liaison du moteur JS.
• Composant recyclable intégré avec de meilleures performances.
• Migrez en douceur et gracieusement vers le navigateur Web.
• Moteur Flex Layout entièrement pris en charge.

? Commencer

Préparation de l'environnement

Assurez-vous que git et npm sont installés localement.

Exécutez git clone https://github.com/Tencent/Hippy.git et npm install dans le répertoire racine du projet.

Le référentiel Hippy applique git-lfs pour gérer les fichiers so, gz, otf, assurez-vous d'avoir d'abord installé git-lfs.

Pour les développeurs macOS :

• Xcode avec le SDK iOS : créez l'application iOS.
• Android Studio avec NDK : créez l'application Android.
• Node.JS : exécutez les scripts de build.

homebrew est recommandé pour installer les dépendances.

Pour les développeurs Windows :

• Android Studio avec NDK : créez l'application Android.
• Node.JS : exécutez les scripts de build.

Windows ne peut pas encore exécuter l'environnement de développement iOS.

Construisez le simulateur iOS avec la démo js

Pour iOS, nous vous recommandons d'utiliser le simulateur iOS lors du premier essai. Cependant, vous pouvez modifier la configuration Xcode pour installer l'application sur iPhone si vous êtes un expert iOS.

1. cd vers driver/js/ .

2. Exécutez npm run init .

   Cette commande est combinée avec npm install && npx lerna bootstrap && npm run build .

   npm install : installez les dépendances des scripts de build du projet.

   npx lerna bootstrap : installez les dépendances de chaque package npm.（Hippy utilise Lerna pour gérer les packages multi js, si la commande lerna n'est pas trouvée, exécutez d'abord npm install lerna -g .）

   npm run build : créez chaque package SDK frontal.

3. Choisissez une démo à construire avec npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .

4. Installez CocoaPods avec brew install cocoapods , installez cmake avec brew install cmake , puis exécutez la commande pod install dans le répertoire framework/examples/ios-demo , qui créera des fichiers HippyDemo.xcworkspace et installera les dépendances Cocoapods.

5. Démarrez le Xcode et créez l'application iOS en ouvrant framework/examples/ios-demo/HippyDemo.xcworkspace .

Si Step 2 génère une erreur, vous pouvez cd à driver/js/examples hippy-react-demo ou hippy-vue-demo et exécuter npm install pour installer d'abord les dépendances de la démo.

Plus de détails sur l’intégration du SDK iOS.

Créez l'application Android avec la démo js

Pour Android, nous vous recommandons d'utiliser le vrai téléphone portable pour une meilleure expérience de développement, car Hippy utilise le moteur X5 JS qui ne peut pas prendre en charge le simulateur x86, et le simulateur ARM a de faibles performances.

Avant de créer l'application Android, assurez-vous que le SDK et le NDK sont installés et NE PAS mettre à jour la chaîne d'outils de construction.

1. cd vers driver/js/ .

2. Exécutez npm run init .

   Cette commande est combinée avec npm install && npx lerna bootstrap && npm run build .

   npm install : installez les dépendances des scripts de build du projet.

   npx lerna bootstrap : installez les dépendances de chaque package npm.（Hippy utilise Lerna pour gérer les packages multi js, si la commande lerna n'est pas trouvée, exécutez d'abord npm install lerna -g .）

   npm run build : créez chaque package SDK frontal.

3. Choisissez une démo à construire avec npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .

4. Ouvrez le Hippy Project dans le répertoire racine avec Android Studio.

5. Connectez le téléphone Android avec un câble USB et assurez-vous que le mode de débogage USB est activé (exécutez adb devices sur le terminal de l'ordinateur pour vérifier l'état de la connexion du téléphone portable).

6. Ouvrez le projet avec Android Studio, exécutez et installez l'apk.

Si Step 2 génère une erreur, vous pouvez cd à driver/js/examples hippy-react-demo, hippy-vue-demo ou hippy-vue-next-demo, et exécuter npm install pour installer d'abord les dépendances de démonstration.

Si vous rencontrez le problème No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android , voici la solution.

Plus de détails sur l’intégration du SDK Android.

Déboguer la démo js

1. Suivez d'abord Créer le simulateur iOS avec la démo js ou Créer l'application Android avec la démo js pour créer l'application.
2. cd vers driver/js/ .
3. Exécutez npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
4. Exécutez npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev .

Ou vous pouvez cd au répertoire driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo ou driver/js/examples/hippy-vue-next-demo pour exécuter npm run hippy:debug et npm run hippy:dev à la place.

Dans l'exemple de mode de débogage, les packages npm tels que @hippy/react, @hippy/vue, @hippy/vue-next sont liés à driver/js/packages > [different package] > dist (pas node_modules), donc si vous avez modifié js et que vous souhaitez le faire prendre effet dans l'exemple cible, veuillez appeler à nouveau npm run build .

Plus de détails sur le débogage peuvent être lus dans le document Hippy Debug.

Construire la démo de production js

1. Suivez d'abord Créer le simulateur iOS avec la démo js ou Créer l'application Android avec la démo js pour créer l'application.
2. cd vers driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo ou driver/js/examples/hippy-vue-next-demo .
3. Exécutez npm install pour installer les dépendances demo js.
4. Exécutez npm run hippy:vendor et npm run hippy:build en séquence pour créer le vendor.[android|ios].js et index.[android|ios].js .

La démo Hippy utilise DllPlugin pour diviser le bloc commun et le bloc d'application.

? Documentation

Pour consulter des exemples hippies et visitez hippyjs.org.

? Journal des modifications

Les modifications détaillées pour chaque version sont documentées dans les notes de version du projet.

? Structure du projet

 Hippy
├── devtools                                                      # Devtools for Hippy.
├── dom                                                           # DOM Layer for Hippy.
├── driver                                                        # Different UI Driver Layers for Hippy.
│   └── js                                                     # JS Driver Layer for Hippy.
│       ├── examples                                                # Related examples for JS Driver.
│       ├── include
│       ├── packages                                                # Related JS Packages for JS Driver.
│       │   ├── hippy-react
│       │   ├── hippy-react-web
│       │   ├── hippy-vue
│       │   ├── hippy-vue-css-loader
│       │   ├── hippy-vue-loader
│       │   ├── hippy-vue-native-components
│       │   └── hippy-vue-router
│       └── src
├── framework
│   ├── android
│   ├── examples
│   │   ├── android-demo
│   │   └── ios-demo
│   └── ios
├── layout                                                      # Layout engine for Hippy.
├── modules
│   ├── android
│   └── footstone
├── renderer                                                    # Different Renderers for Hippy.
│   ├── flutter
│   └── native
│       ├── android
│       └── ios
└── static

? Contribution

Les développeurs sont invités à contribuer à l'open source de Tencent, et nous leur offrirons également des incitations pour les reconnaître et les remercier. Nous fournissons ici une description officielle de la contribution open source de Tencent. Des règles de contribution spécifiques à chaque projet sont formulées par l'équipe projet. Les développeurs peuvent choisir le projet approprié et participer selon les règles correspondantes. Le comité de gestion du projet Tencent fera régulièrement rapport aux contributeurs qualifiés et les récompenses seront décernées par le contact officiel. Avant de faire une pull request ou un problème à Hippy, assurez-vous de lire le guide de contribution.

Toutes les personnes qui ont déjà contribué à Hippy peuvent être vues dans le fichier des contributeurs et des auteurs.

❤️ Les observateurs d'étoiles au fil du temps

? Licence

Hippy est sous licence Apache-2.0.

? Links

Écosystème hippie

Moteur de disposition Taitank