Hippy

Hippie Cross Platform Framework

Homepage

Einführung

Hippy ist ein plattformübergreifendes Entwicklungsframework, das Entwicklern dabei helfen soll, einmal zu schreiben und auf mehreren Plattformen (iOS, Android, Web usw.) auszuführen. Hippy ist sehr freundlich zu Webentwicklern, insbesondere zu denen, die mit React oder Vue vertraut sind. Mit Hippy können Entwickler die plattformübergreifende App ganz einfach erstellen.

Hippy wird jetzt in den wichtigsten Tencent-Apps wie Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App und Tencent News eingesetzt und erreicht Hunderte Millionen normale Benutzer.

? Vorteile

• Entwickelt für Webentwickler, unterstützt offiziell Web-Frameworks wie React und Vue .
• Gleiche APIs für verschiedene Plattformen.
• Hervorragende Leistung mit JS-Engine-Bindungskommunikation.
• Eingebaute recycelbare Komponente mit besserer Leistung.
• Reibungslose und elegante Migration zum Webbrowser.
• Vollständig unterstützte Flex-Layout-Engine.

? Erste Schritte

Umgebung vorbereiten

Stellen Sie sicher, dass Git und NPM lokal installiert sind.

Führen Sie git clone https://github.com/Tencent/Hippy.git und npm install im Stammverzeichnis des Projekts aus.

Das Hippy-Repository wendet git-lfs an, um so-, gz- und otf-Dateien zu verwalten. Stellen Sie sicher, dass Sie zuerst git-lfs installiert haben.

Für macOS-Entwickler:

• Xcode mit iOS SDK: Erstellen Sie die iOS-App.
• Android Studio mit NDK: Erstellen Sie die Android-App.
• Node.JS: Führen Sie die Build-Skripte aus.

Zur Installation der Abhängigkeiten wird Homebrew empfohlen.

Für Windows-Entwickler:

• Android Studio mit NDK: Erstellen Sie die Android-App.
• Node.JS: Führen Sie die Build-Skripte aus.

Windows kann die iOS-Entwicklungsumgebung bisher nicht ausführen.

Erstellen Sie den iOS-Simulator mit der JS-Demo

Für iOS empfehlen wir beim ersten Versuch die Verwendung des iOS-Simulators. Sie können jedoch die Xcode-Konfiguration ändern, um die App auf dem iPhone zu installieren, wenn Sie ein iOS-Experte sind.

1. cd nach driver/js/ .

2. Führen Sie npm run init .

   Dieser Befehl wird mit npm install && npx lerna bootstrap && npm run build kombiniert.

   npm install : Installiert die Abhängigkeiten der Projekt-Build-Skripte.

   npx lerna bootstrap : Abhängigkeiten jedes npm-Pakets installieren. (Hippy verwendet Lerna, um Multi-JS-Pakete zu verwalten. Wenn der Befehl lerna nicht gefunden wird, führen Sie zuerst npm install lerna -g aus.)

   npm run build : Erstellen Sie jedes Front-End-SDK-Paket.

3. Wählen Sie eine Demo zum Erstellen mit npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] aus.

4. Installieren Sie CocoaPods mit brew install cocoapods , installieren Sie cmake mit brew install cmake und führen Sie dann den Befehl pod install im Verzeichnis framework/examples/ios-demo aus, wodurch HippyDemo.xcworkspace -Dateien erstellt und Cocoapods-Abhängigkeiten installiert werden.

5. Starten Sie den Xcode und erstellen Sie die iOS-App, indem Sie framework/examples/ios-demo/HippyDemo.xcworkspace öffnen.

Wenn Step 2 einen Fehler auslöst, können Sie zu driver/js/examples hippy-react-demo“ oder „hippy-vue-demo“ cd und npm install ausführen, um zuerst die Demo-Abhängigkeiten zu installieren.

Weitere Details zur iOS SDK-Integration.

Erstellen Sie die Android-App mit der JS-Demo

Für Android empfehlen wir für ein besseres Entwicklungserlebnis die Verwendung eines echten Mobiltelefons, da Hippy die X5 JS-Engine verwendet, die den x86-Simulator nicht unterstützen kann, und der ARM-Simulator eine geringe Leistung aufweist.

Stellen Sie vor dem Erstellen der Android-App sicher, dass das SDK und NDK installiert ist, und aktualisieren Sie NICHT die Build-Toolchain.

1. cd nach driver/js/ .

2. Führen Sie npm run init .

   Dieser Befehl wird mit npm install && npx lerna bootstrap && npm run build kombiniert.

   npm install : Installiert die Abhängigkeiten der Projekt-Build-Skripte.

   npx lerna bootstrap : Abhängigkeiten jedes npm-Pakets installieren. (Hippy verwendet Lerna, um Multi-JS-Pakete zu verwalten. Wenn der Befehl lerna nicht gefunden wird, führen Sie zuerst npm install lerna -g aus.)

   npm run build : Erstellen Sie jedes Front-End-SDK-Paket.

3. Wählen Sie eine Demo zum Erstellen mit npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .

4. Öffnen Sie das Hippy Project im Stammverzeichnis mit Android Studio.

5. Schließen Sie das Android-Telefon mit einem USB-Kabel an und stellen Sie sicher, dass der USB-Debugging-Modus aktiviert ist (führen Sie adb devices auf dem Computerterminal aus, um den Verbindungsstatus des Mobiltelefons zu überprüfen).

6. Öffnen Sie das Projekt mit Android Studio, führen Sie die APK aus und installieren Sie sie.

Wenn Step 2 einen Fehler auslöst, können Sie zu driver/js/examples hippy-react-demo“, „hippy-vue-demo“ oder „hippy-vue-next-demo“ cd und npm install ausführen, um zuerst die Demo-Abhängigkeiten zu installieren.

Wenn Sie auf das Problem stoßen, dass No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android , finden Sie hier die Lösung.

Weitere Details zur Android SDK-Integration.

Debuggen Sie die JS-Demo

1. Folgen Sie zunächst „Erstellen Sie den iOS-Simulator mit JS-Demo“ oder „Erstellen Sie die Android-App mit JS-Demo“, um die App zu erstellen.
2. cd nach driver/js/ .
3. Führen Sie npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
4. Führen Sie npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev .

Oder Sie können cd in das Verzeichnis driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo oder driver/js/examples/hippy-vue-next-demo wechseln, um npm run hippy:debug auszuführen und npm run hippy:dev .

Im Beispiel-Debugmodus sind npm-Pakete wie @hippy/react, @hippy/vue, @hippy/vue-next mit driver/js/packages > [different package] > dist (nicht „node_modules“) verknüpft, wenn Sie also Änderungen vorgenommen haben js-Paket-Quellcode und möchten, dass er im Zielbeispiel wirksam wird, rufen Sie bitte npm run build erneut auf.

Weitere Details zum Debuggen finden Sie im Hippy Debug Document.

Erstellen Sie die js-Produktionsdemo

1. Folgen Sie zunächst „Erstellen Sie den iOS-Simulator mit JS-Demo“ oder „Erstellen Sie die Android-App mit JS-Demo“, um die App zu erstellen.
2. cd zu driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo oder driver/js/examples/hippy-vue-next-demo .
3. Führen Sie npm install aus, um Demo-JS-Abhängigkeiten zu installieren.
4. Führen Sie npm run hippy:vendor und npm run hippy:build nacheinander aus, um die Produktionsumgebung vendor.[android|ios].js und index.[android|ios].js zu erstellen.

Die Hippy-Demo verwendet DllPlugin, um den gemeinsamen Block und den App-Block aufzuteilen.

? Dokumentation

Schauen Sie sich Hippie-Beispiele an und besuchen Sie hippyjs.org.

? Änderungsprotokoll

Detaillierte Änderungen für jede Release-Version sind in den Versionshinweisen des Projekts dokumentiert.

? Projektstruktur

 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

? Beitrag

Entwickler sind herzlich willkommen, einen Beitrag zu Tencents Open Source zu leisten, und wir werden ihnen auch Anreize geben, sie anzuerkennen und ihnen zu danken. Hier stellen wir eine offizielle Beschreibung des Open-Source-Beitrags von Tencent bereit. Für jedes Projekt werden vom Projektteam spezifische Beitragsregeln formuliert. Entwickler können das passende Projekt auswählen und nach den entsprechenden Regeln teilnehmen. Das Tencent-Projektmanagementkomitee wird den qualifizierten Mitwirkenden regelmäßig Bericht erstatten und Auszeichnungen werden vom offiziellen Ansprechpartner vergeben. Bevor Sie eine Pull-Anfrage oder ein Problem an Hippy senden, lesen Sie bitte unbedingt den Contributing Guide.

Alle Personen, die bereits zu Hippy beigetragen haben, können in der Datei „Mitwirkende und Autoren“ eingesehen werden.

❤️ Sterngucker im Laufe der Zeit

? Lizenz

Hippy ist Apache-2.0-lizenziert.

? Links

Hippie-Ökosystem

Taitank-Layout-Engine