Hippy is a cross-platform development framework, that aims to help developers write once, and run on multiple platforms(iOS, Android, Web, and so on). Hippy is quite friendly to Web developers, especially those who are familiar with React or Vue. With Hippy, developers can create the cross-platform app easily.
Hippy is now applied in Tencent major apps such as Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App, and Tencent News, reaching hundreds of millions of ordinary users.
- Designed for Web developers, officially support Web frameworks like
React
andVue
. - Same APIs for different platforms.
- Excellent performance with JS engine binding communication.
- Build-in recyclable component with better performance.
- Smoothly and gracefully migrate to Web browser.
- Fully supported Flex Layout engine.
Make sure you have git and npm installed locally.
Run git clone https://github.com/Tencent/Hippy.git
and npm install
at project root directory.
The Hippy repository applies git-lfs to manage so,gz,otf files, make sure you have installed git-lfs first.
For macOS developers:
- Xcode with iOS sdk: build the iOS app.
- Android Studio with NDK: build the android app.
- Node.JS: run the build scripts.
homebrew is recommended to install the dependencies.
For Windows developers:
- Android Studio with NDK: build the android app.
- Node.JS: run the build scripts.
Windows can't run the iOS development environment so far.
For iOS, we recommend to use iOS simulator when first try. However, you can change the Xcode configuration to install the app to iPhone if you are an iOS expert.
-
cd
todriver/js/
. -
Run
npm run init
.This command is combined with
npm install && npx lerna bootstrap && npm run build
.npm install
: Install the project build scripts dependencies.npx lerna bootstrap
: Install dependencies of each npm package.๏ผHippy uses Lerna to manage multi js packages, iflerna
command is not found, executenpm install lerna -g
first.๏ผnpm run build
: Build each front-end sdk package. -
Choose a demo to build with
npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]
. -
Install CocoaPods with
brew install cocoapods
, install cmake withbrew install cmake
, then executepod install
command atframework/examples/ios-demo
directory, which will createHippyDemo.xcworkspace
files and install Cocoapods dependencies. -
Start the Xcode and build the iOS app with opening
framework/examples/ios-demo/HippyDemo.xcworkspace
.
If
Step 2
throw error, you cancd
todriver/js/examples
hippy-react-demo or hippy-vue-demo, and runnpm install
to install demo dependencies first.More details for iOS SDK integration.
For Android, we recommend using the real cellphone for better develop experience, because Hippy is using X5 JS engine which can't support x86 simulator, as well as ARM simulator has a low performance.
Before build the android app, please make sure the SDK and NDK is installed, And DO NOT update the build toolchain.
-
cd
todriver/js/
. -
Run
npm run init
.This command is combined with
npm install && npx lerna bootstrap && npm run build
.npm install
: Install the project build scripts dependencies.npx lerna bootstrap
: Install dependencies of each npm package.๏ผHippy uses Lerna to manage multi js packages, iflerna
command is not found, executenpm install lerna -g
first.๏ผnpm run build
: Build each front-end sdk package. -
Choose a demo to build with
npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]
. -
Open the
Hippy Project
at root directory with Android Studio. -
Connect Android phone with USB cable and make sure USB debugging mode is enabled(Run
adb devices
on the computer terminal to check cellphone connection status). -
Open the project with Android Studio, run and install the apk.
If
Step 2
throw error, you cancd
todriver/js/examples
hippy-react-demo, hippy-vue-demo or hippy-vue-next-demo, and runnpm install
to install demo dependencies first.If you encounter the issue of
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
, here is the solution.More details for Android SDK integration.
- Follow Build the iOS simulator with js demo or Build the Android app with js demo first to build the App.
cd
todriver/js/
.- Run
npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]
. - Run
npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev
.
Or you can
cd
todriver/js/examples/hippy-react-demo
,driver/js/examples/hippy-vue-demo
ordriver/js/examples/hippy-vue-next-demo
directory to runnpm run hippy:debug
andnpm run hippy:dev
instead.On example debug mode, npm packages such as @hippy/react, @hippy/vue, @hippy/vue-next are linked to
driver/js/packages
>[different package]
>dist
(not node_modules), so if you have changed js package source code and want to make it take effect in target example, please callnpm run build
again.More details for debugging can be read in Hippy Debug Document.
- Follow Build the iOS simulator with js demo or Build the Android app with js demo first to build the App.
cd
todriver/js/examples/hippy-react-demo
,driver/js/examples/hippy-vue-demo
ordriver/js/examples/hippy-vue-next-demo
.- Run
npm install
to install demo js dependencies. - Run
npm run hippy:vendor
andnpm run hippy:build
in sequence to build the productionvendor.[android|ios].js
andindex.[android|ios].js
.
Hippy demo uses DllPlugin to split the common chunk and app chunk.
To check out hippy examples and visit hippyjs.org.
Detailed changes for each release version are documented in the project release notes.
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
Developers are welcome to contribute to Tencent's open source, and we will also give them incentives to acknowledge and thank them. Here we provide an official description of Tencent's open source contribution. Specific contribution rules for each project are formulated by the project team. Developers can choose the appropriate project and participate according to the corresponding rules. The Tencent Project Management Committee will report regularly to qualified contributors and awards will be issued by the official contact. Before making a pull request or issue to Hippy, please make sure to read Contributing Guide.
All the people who already contributed to Hippy can be seen in Contributors and Authors File.
Hippy is Apache-2.0 licensed.