Descarga Hippy - Descarga del código fuente Hippy

Hippy

Otro código fuente

2024-11-08, Version 3.3.2 (LTS)

Descargar

Marco multiplataforma hippy

Estado de las acciones

Página principal

Introducción

Hippy es un marco de desarrollo multiplataforma que tiene como objetivo ayudar a los desarrolladores a escribir una vez y ejecutarlo en múltiples plataformas (iOS, Android, Web, etc.). Hippy es bastante amigable con los desarrolladores web, especialmente aquellos que están familiarizados con React o Vue. Con Hippy, los desarrolladores pueden crear fácilmente la aplicación multiplataforma.

Hippy ahora se aplica en las principales aplicaciones de Tencent, como Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App y Tencent News, y llega a cientos de millones de usuarios comunes y corrientes.

? Ventajas

Diseñado para desarrolladores web, admite oficialmente marcos web como React y Vue .
Mismas API para diferentes plataformas.
Excelente rendimiento con comunicación vinculante del motor JS.
Componente reciclable incorporado con mejor rendimiento.
Migre sin problemas y con gracia al navegador web.
Motor Flex Layout totalmente compatible.

? Empezando

Preparando el ambiente

Asegúrese de tener git y npm instalados localmente.

Ejecute git clone https://github.com/Tencent/Hippy.git y npm install en el directorio raíz del proyecto.

El repositorio Hippy aplica git-lfs para administrar archivos so,gz,otf; asegúrese de haber instalado git-lfs primero.

Para desarrolladores de macOS:

Xcode con iOS SDK: cree la aplicación para iOS.
Android Studio con NDK: crea la aplicación para Android.
Node.JS: ejecuta los scripts de compilación.

Se recomienda homebrew para instalar las dependencias.

Para desarrolladores de Windows:

Android Studio con NDK: crea la aplicación para Android.
Node.JS: ejecuta los scripts de compilación.

Windows no puede ejecutar el entorno de desarrollo de iOS hasta el momento.

Construya el simulador de iOS con la demostración js

Para iOS, recomendamos utilizar el simulador de iOS cuando lo intente por primera vez. Sin embargo, puedes cambiar la configuración de Xcode para instalar la aplicación en iPhone si eres un experto en iOS.

cd al driver/js/ .
Ejecute npm run init .
Este comando se combina con npm install && npx lerna bootstrap && npm run build .
npm install : instala las dependencias de los scripts de compilación del proyecto.
npx lerna bootstrap : instala las dependencias de cada paquete npm. (Hippy usa Lerna para administrar paquetes multi js, si no se encuentra el comando lerna , ejecuta npm install lerna -g primero).
npm run build : compila cada paquete SDK de front-end.
Elija una demostración para compilar con npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
Instale CocoaPods con brew install cocoapods , instale cmake con brew install cmake , luego ejecute el comando pod install en el directorio framework/examples/ios-demo , que creará archivos HippyDemo.xcworkspace e instalará las dependencias de Cocoapods.
Inicie Xcode y cree la aplicación iOS abriendo framework/examples/ios-demo/HippyDemo.xcworkspace .

Si Step 2 arroja un error, puede cd a driver/js/examples hippy-react-demo o hippy-vue-demo y ejecutar npm install para instalar las dependencias de demostración primero.
Más detalles para la integración del SDK de iOS.

Cree la aplicación de Android con la demostración js

Para Android, recomendamos usar el teléfono celular real para una mejor experiencia de desarrollo, porque Hippy usa el motor X5 JS que no es compatible con el simulador x86, además el simulador ARM tiene un rendimiento bajo.

Antes de compilar la aplicación de Android, asegúrese de que el SDK y el NDK estén instalados y NO actualice la cadena de herramientas de compilación.

cd al driver/js/ .
Ejecute npm run init .
Este comando se combina con npm install && npx lerna bootstrap && npm run build .
npm install : instala las dependencias de los scripts de compilación del proyecto.
npx lerna bootstrap : instala las dependencias de cada paquete npm. (Hippy usa Lerna para administrar paquetes multi js, si no se encuentra el comando lerna , ejecuta npm install lerna -g primero).
npm run build : compila cada paquete SDK de front-end.
Elija una demostración para compilar con npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
Abra el Hippy Project en el directorio raíz con Android Studio.
Conecte el teléfono Android con un cable USB y asegúrese de que el modo de depuración USB esté habilitado (ejecute adb devices en el terminal de la computadora para verificar el estado de la conexión del teléfono celular).
Abra el proyecto con Android Studio, ejecute e instale el apk.

Si Step 2 arroja un error, puede cd a driver/js/examples hippy-react-demo, hippy-vue-demo o hippy-vue-next-demo y ejecutar npm install para instalar las dependencias de demostración primero.
Si encuentra el problema de No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android , aquí está la solución.
Más detalles para la integración del SDK de Android.

Depurar la demostración js

Siga primero Crear el simulador de iOS con la demostración js o Crear la aplicación de Android con la demostración js para crear la aplicación.
cd al driver/js/ .
Ejecute npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
Ejecute npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev .

O puede cd al directorio driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo o driver/js/examples/hippy-vue-next-demo para ejecutar npm run hippy:debug y npm run hippy:dev en su lugar.
En el modo de depuración de ejemplo, los paquetes npm como @hippy/react, @hippy/vue, @hippy/vue-next están vinculados a driver/js/packages > [different package] > dist (no node_modules), por lo que si ha cambiado js y desea que entre en vigor en el ejemplo de destino, llame npm run build nuevamente.
Se pueden leer más detalles sobre la depuración en el documento de depuración de Hippy.

Cree la demostración de producción js

Siga primero Crear el simulador de iOS con la demostración js o Crear la aplicación de Android con la demostración js para crear la aplicación.
cd a driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo o driver/js/examples/hippy-vue-next-demo .
Ejecute npm install para instalar las dependencias demo js.
Ejecute npm run hippy:vendor y npm run hippy:build en secuencia para compilar el vendor.[android|ios].js y index.[android|ios].js .

La demostración de Hippy usa DllPlugin para dividir el fragmento común y el fragmento de la aplicación.

? Documentación

Para ver ejemplos hippies y visitar hippyjs.org.

? Registro de cambios

Los cambios detallados para cada versión se documentan en las notas de la versión del proyecto.

? Estructura del proyecto

 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

? Contribución

Los desarrolladores pueden contribuir al código abierto de Tencent y también les daremos incentivos para reconocerlos y agradecerles. Aquí proporcionamos una descripción oficial de la contribución de código abierto de Tencent. El equipo del proyecto formula reglas de contribución específicas para cada proyecto. Los desarrolladores pueden elegir el proyecto apropiado y participar de acuerdo con las reglas correspondientes. El Comité de Gestión de Proyectos de Tencent informará periódicamente a los contribuyentes calificados y el contacto oficial emitirá los premios. Antes de realizar una solicitud de extracción o un problema para Hippy, asegúrese de leer la Guía de contribución.

Todas las personas que ya contribuyeron a Hippy se pueden ver en el Archivo de Colaboradores y Autores.