Download Hippy - Download do código-fonte Hippy

Hippy

Outro código-fonte

2024-11-08, Version 3.3.2 (LTS)

Baixar

Estrutura Hippy de plataforma cruzada

Status das ações

Página inicial

Introdução

Hippy é uma estrutura de desenvolvimento multiplataforma que visa ajudar os desenvolvedores a escrever uma vez e executar em várias plataformas (iOS, Android, Web e assim por diante). Hippy é bastante amigável para desenvolvedores Web, especialmente aqueles que estão familiarizados com React ou Vue. Com o Hippy, os desenvolvedores podem criar facilmente o aplicativo multiplataforma.

Hippy agora é aplicado nos principais aplicativos da Tencent, como Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App e Tencent News, alcançando centenas de milhões de usuários comuns.

? Vantagens

Projetado para desenvolvedores da Web, oferece suporte oficial a estruturas da Web como React e Vue .
Mesmas APIs para plataformas diferentes.
Excelente desempenho com comunicação de ligação do mecanismo JS.
Componente reciclável integrado com melhor desempenho.
Migre de maneira suave e elegante para o navegador da Web.
Mecanismo Flex Layout totalmente suportado.

? Começando

Preparando o ambiente

Certifique-se de ter o git e o npm instalados localmente.

Execute git clone https://github.com/Tencent/Hippy.git e npm install no diretório raiz do projeto.

O repositório Hippy aplica git-lfs para gerenciar arquivos so,gz,otf, certifique-se de ter instalado o git-lfs primeiro.

Para desenvolvedores macOS:

Xcode com iOS SDK: crie o aplicativo iOS.
Android Studio com NDK: crie o aplicativo Android.
Node.JS: execute os scripts de construção.

homebrew é recomendado para instalar as dependências.

Para desenvolvedores do Windows:

Android Studio com NDK: crie o aplicativo Android.
Node.JS: execute os scripts de construção.

O Windows não consegue executar o ambiente de desenvolvimento iOS até agora.

Construa o simulador iOS com demonstração js

Para iOS, recomendamos usar o simulador iOS na primeira tentativa. No entanto, você pode alterar a configuração do Xcode para instalar o aplicativo no iPhone se for um especialista em iOS.

cd para driver/js/ .
Execute npm run init .
Este comando é combinado com npm install && npx lerna bootstrap && npm run build .
npm install : instala as dependências dos scripts de construção do projeto.
npx lerna bootstrap : Instale dependências de cada pacote npm.（Hippy usa Lerna para gerenciar pacotes multi js, se o comando lerna não for encontrado, execute npm install lerna -g primeiro.）
npm run build : construa cada pacote SDK front-end.
Escolha uma demonstração para construir com npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
Instale CocoaPods com brew install cocoapods , instale cmake com brew install cmake e, em seguida, execute o comando pod install no diretório framework/examples/ios-demo , que criará arquivos HippyDemo.xcworkspace e instalará dependências de Cocoapods.
Inicie o Xcode e crie o aplicativo iOS abrindo framework/examples/ios-demo/HippyDemo.xcworkspace .

Se Step 2 gerar um erro, você pode cd para driver/js/examples hippy-react-demo ou hippy-vue-demo e executar npm install para instalar as dependências de demonstração primeiro.
Mais detalhes para integração do iOS SDK.

Crie o aplicativo Android com demonstração js

Para Android, recomendamos usar o celular real para melhor experiência de desenvolvimento, pois o Hippy está usando o motor X5 JS que não suporta simulador x86, assim como o simulador ARM tem baixo desempenho.

Antes de construir o aplicativo Android, certifique-se de que o SDK e o NDK estejam instalados e NÃO atualize o conjunto de ferramentas de construção.

cd para driver/js/ .
Execute npm run init .
Este comando é combinado com npm install && npx lerna bootstrap && npm run build .
npm install : instala as dependências dos scripts de construção do projeto.
npx lerna bootstrap : Instale dependências de cada pacote npm.（Hippy usa Lerna para gerenciar pacotes multi js, se o comando lerna não for encontrado, execute npm install lerna -g primeiro.）
npm run build : construa cada pacote SDK front-end.
Escolha uma demonstração para construir com npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
Abra o Hippy Project no diretório raiz com Android Studio.
Conecte o telefone Android com o cabo USB e certifique-se de que o modo de depuração USB esteja ativado (execute adb devices no terminal do computador para verificar o status da conexão do celular).
Abra o projeto com Android Studio, execute e instale o apk.

Se Step 2 gerar um erro, você pode fazer cd para driver/js/examples hippy-react-demo, hippy-vue-demo ou hippy-vue-next-demo e executar npm install para instalar as dependências de demonstração primeiro.
Se você encontrar o problema de No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android , aqui está a solução.
Mais detalhes para integração do Android SDK.

Depurar a demonstração js

Siga Construir o simulador iOS com demonstração js ou Construir o aplicativo Android com demonstração js primeiro para construir o aplicativo.
cd para driver/js/ .
Execute npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
Execute npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev .

Ou você pode fazer cd para o diretório driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo ou driver/js/examples/hippy-vue-next-demo para executar npm run hippy:debug e npm run hippy:dev .
No exemplo do modo de depuração, pacotes npm como @hippy/react, @hippy/vue, @hippy/vue-next estão vinculados a driver/js/packages > [different package] > dist (não node_modules), portanto, se você alterou js e deseja que ele entre em vigor no exemplo de destino, chame npm run build novamente.
Mais detalhes para depuração podem ser lidos no documento Hippy Debug.

Crie a demonstração de produção js

Siga Construir o simulador iOS com demonstração js ou Construir o aplicativo Android com demonstração js primeiro para construir o aplicativo.
cd para driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo ou driver/js/examples/hippy-vue-next-demo .
Execute npm install para instalar dependências demo js.
Execute npm run hippy:vendor e npm run hippy:build em sequência para construir a produção vendor.[android|ios].js e index.[android|ios].js .

A demonstração Hippy usa DllPlugin para dividir o pedaço comum e o pedaço do aplicativo.

? Documentação

Para verificar exemplos de hippies, visite hippyjs.org.

? Registro de alterações

Mudanças detalhadas para cada versão de lançamento estão documentadas nas notas de lançamento do projeto.

? Estrutura do projeto

 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

? Contribuição

Os desenvolvedores são bem-vindos para contribuir com o código aberto da Tencent e também lhes daremos incentivos para reconhecê-los e agradecê-los. Aqui fornecemos uma descrição oficial da contribuição de código aberto da Tencent. Regras de contribuição específicas para cada projeto são formuladas pela equipe do projeto. Os desenvolvedores podem escolher o projeto adequado e participar de acordo com as regras correspondentes. O Comitê de Gerenciamento de Projetos da Tencent reportará regularmente aos colaboradores qualificados e os prêmios serão emitidos pelo contato oficial. Antes de fazer uma solicitação pull ou problema para o Hippy, certifique-se de ler o Guia de Contribuição.

Todas as pessoas que já contribuíram para o Hippy podem ser vistas no Arquivo de Colaboradores e Autores.