Hippy

Кросс-платформенная платформа Hippy

Домашняя страница

Введение

Hippy — это кроссплатформенная среда разработки, цель которой — помочь разработчикам написать один раз и запустить на нескольких платформах (iOS, Android, Интернет и т. д.). Hippy весьма дружелюбен к веб-разработчикам, особенно к тем, кто знаком с React или Vue. С Hippy разработчики могут легко создавать кроссплатформенные приложения.

Hippy теперь применяется в основных приложениях Tencent, таких как Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App и Tencent News, охватывая сотни миллионов обычных пользователей.

? Преимущества

• Разработан для веб-разработчиков и официально поддерживает такие веб-фреймворки, как React и Vue .
• Одни и те же API для разных платформ.
• Отличная производительность при связывании движка JS.
• Встроенный перерабатываемый компонент с улучшенными характеристиками.
• Плавный и изящный переход на веб-браузер.
• Полностью поддерживаемый движок Flex Layout.

? Начиная

Подготовка среды

Убедитесь, что у вас установлены git и npm локально.

Запустите git clone https://github.com/Tencent/Hippy.git и npm install в корневой каталог проекта.

Репозиторий Hippy применяет git-lfs для управления файлами so,gz,otf, поэтому сначала убедитесь, что вы установили git-lfs.

Для разработчиков MacOS:

• Xcode с iOS SDK: создайте приложение iOS.
• Android Studio с NDK: создайте приложение для Android.
• Node.JS: запустите сценарии сборки.

homebrew рекомендуется установить зависимости.

Для разработчиков Windows:

• Android Studio с NDK: создайте приложение для Android.
• Node.JS: запустите сценарии сборки.

Windows пока не может запускать среду разработки iOS.

Создайте симулятор iOS с помощью демонстрации js.

Для iOS мы рекомендуем использовать симулятор iOS при первой попытке. Однако вы можете изменить конфигурацию Xcode, чтобы установить приложение на iPhone, если вы являетесь экспертом по iOS.

1. cd в driver/js/ .

2. Запустите npm run init .

   Эта команда сочетается с npm install && npx lerna bootstrap && npm run build .

   npm install : установите зависимости сценариев сборки проекта.

   npx lerna bootstrap : установите зависимости каждого пакета npm. (Hippy использует Lerna для управления несколькими пакетами js. Если команда lerna не найдена, сначала выполните npm install lerna -g .)

   npm run build : сборка каждого пакета SDK для внешнего интерфейса.

3. Выберите демо-версию для сборки с помощью npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .

4. Установите CocoaPods с помощью brew install cocoapods , установите cmake с помощью brew install cmake , затем выполните команду pod install в каталоге framework/examples/ios-demo , которая создаст файлы HippyDemo.xcworkspace и установит зависимости Cocoapods.

5. Запустите Xcode и создайте приложение iOS, открыв framework/examples/ios-demo/HippyDemo.xcworkspace .

Если на Step 2 выдается ошибка, вы можете cd к driver/js/examples hippy-react-demo или hippy-vue-demo и запустить npm install , чтобы сначала установить демонстрационные зависимости.

Более подробная информация об интеграции iOS SDK.

Создайте приложение для Android с помощью демонстрации js.

Для Android мы рекомендуем использовать настоящий мобильный телефон для более удобной разработки, поскольку Hippy использует движок X5 JS, который не поддерживает симулятор x86, а симулятор ARM имеет низкую производительность.

Прежде чем создавать приложение для Android, убедитесь, что установлены SDK и NDK, и НЕ обновляйте набор инструментов сборки.

1. cd в driver/js/ .

2. Запустите npm run init .

   Эта команда сочетается с npm install && npx lerna bootstrap && npm run build .

   npm install : установите зависимости сценариев сборки проекта.

   npx lerna bootstrap : установите зависимости каждого пакета npm. (Hippy использует Lerna для управления несколькими пакетами js. Если команда lerna не найдена, сначала выполните npm install lerna -g .)

   npm run build : сборка каждого пакета SDK для внешнего интерфейса.

3. Выберите демо-версию для сборки с помощью npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .

4. Откройте Hippy Project в корневом каталоге с помощью Android Studio.

5. Подключите телефон Android с помощью USB-кабеля и убедитесь, что режим отладки USB включен (запустите adb devices на компьютерном терминале, чтобы проверить состояние подключения мобильного телефона).

6. Откройте проект с помощью Android Studio, запустите и установите APK.

Если на Step 2 выдается ошибка, вы можете cd к driver/js/examples hippy-react-demo, hippy-vue-demo или hippy-vue-next-demo и запустить npm install , чтобы сначала установить демонстрационные зависимости.

Если вы столкнулись с проблемой « No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android , вот решение.

Более подробная информация об интеграции Android SDK.

Отладка демо-версии js

1. Следуйте инструкциям «Создать симулятор iOS с помощью демо-версии js» или «Сначала создайте приложение для Android с помощью демо-версии js», чтобы создать приложение.
2. cd в driver/js/ .
3. Запустите npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] .
4. Запустите npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev .

Или вы можете cd в каталог driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo или driver/js/examples/hippy-vue-next-demo чтобы запустить npm run hippy:debug и вместо этого npm run hippy:dev .

В примере режима отладки пакеты npm, такие как @hippy/react, @hippy/vue, @hippy/vue-next, связаны с driver/js/packages > [different package] > dist (не node_modules), поэтому, если вы изменили js и хотите, чтобы он вступил в силу в целевом примере, снова вызовите npm run build .

Более подробную информацию об отладке можно прочитать в документе Hippy Debug Document.

Создайте производственную демонстрацию js

1. Следуйте инструкциям «Создать симулятор iOS с помощью демо-версии js» или «Сначала создайте приложение для Android с помощью демо-версии js», чтобы создать приложение.
2. cd в driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo или driver/js/examples/hippy-vue-next-demo .
3. Запустите npm install чтобы установить демонстрационные зависимости js.
4. Запустите npm run hippy:vendor и npm run hippy:build последовательно, чтобы собрать рабочие vendor.[android|ios].js и index.[android|ios].js .

Демо-версия Hippy использует DllPlugin для разделения общего фрагмента и фрагмента приложения.

? Документация

Чтобы ознакомиться с примерами хиппи, посетите hippyjs.org.

? Журнал изменений

Подробные изменения для каждой версии выпуска описаны в примечаниях к выпуску проекта.

? Структура проекта

 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

? Вклад

Разработчики могут внести свой вклад в открытый исходный код Tencent, и мы также предоставим им стимулы для признания и благодарности. Здесь мы предоставляем официальное описание вклада Tencent в открытый исходный код. Конкретные правила вклада для каждого проекта формулируются командой проекта. Разработчики могут выбрать подходящий проект и участвовать по соответствующим правилам. Комитет управления проектом Tencent будет регулярно отчитываться перед квалифицированными участниками, а награды будут выдаваться официальным контактом. Прежде чем отправлять запрос на включение или выдачу сообщения Hippy, обязательно прочтите Руководство для участников.

Всех людей, которые уже внесли свой вклад в Hippy, можно увидеть в файле участников и авторов.

❤️ Звездочеты с течением времени

? Лицензия

Hippy имеет лицензию Apache-2.0.

? Ссылки

Эко-система хиппи

Механизм компоновки Taitank