Need help with Hippy?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Tencent
5.7K Stars 613 Forks Apache License 2.0 640 Commits 49 Opened issues

Description

A cross platform framework designed for Web developer. Introduction video - https://v.qq.com/x/page/i3038urj2mt.html

Services available

!
?

Need anything else?

Contributors list

Hippy Cross Platform Framework

Hippy Group license PRs Welcome node Actions Status Codecov

English | 简体中文 | Homepage

Introduction

Hippy is a cross-platform development framework, aiming to help developers write once, run on three platforms(iOS, Android and Web). Hippy is quite friendly to web developers, especially who are familiar with React or Vue. With Hippy, developers are able to create the cross platform app easily.

Hippy is now applied in 27 Tencent apps such as Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App,reaching hundreds of millions of ordinary users.

Advantages

  • Design for web developers, officially support web frameworks like
    React
    and
    Vue
    .
  • 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.

Project structure

Hippy
├── examples                          # Demo code for frontend or native developer.
│   ├── hippy-react-demo              # hippy-react js demo code.
│   ├── hippy-vue-demo                # hippy-vue js demo code.
│   ├── ios-demo                      # iOS native demo code.
│   └── android-demo                  # Android native demo code.
├── packages                          # npm packages.
│   ├── hippy-debug-server            # Debug the Hippy with native.
│   ├── hippy-react                   # React binding for Hippy.
│   ├── hippy-react-web               # Web adapter for hippy-react.
│   ├── hippy-vue                     # Vue binding for Hippy.
│   ├── hippy-vue-css-loader          # Webpack loader for convert CSS text to JS AST.
│   ├── hippy-vue-native-components   # Native components extensions for hippy-vue.
│   ├── hippy-vue-router              # Vue router for hippy-vue.
│   └── types                         # Global type definition.
├── ios
│   └── sdk                           # iOS SDK
├── android
│   ├── support_ui                    # Android native components.
│   └── sdk                           # Android SDK.
├── core                              # JS modules implemented by C++, binding to JS engine.
├── layout                            # Hippy layout engine.
├── scripts                           # Project build script.

Getting started

Preparing environment

For macOS developers:

  1. Xcode with iOS sdk: build the iOS app.
  2. Android Studio with NDK: build the android app.
  3. Node.JS: run the build scripts.

homebrew is recommended to install the dependencies.

For Windows developers:

  1. Android Studio with NDK: build the android app.
  2. Node.JS: run the build scripts.

Windows can't run the iOS development environment so far.

Build your first Hippy app

Start the iOS simulator with hippy-react or hippy-vue demo

For iOS we recommend to use iOS simulator when first try, however, you may change the Xcode configuration to install the app to iPhone if you are an iOS expert.

  1. Install the dependencies at root directory with
    npm install
    .
  2. Install dependencies of each npm package at root directory with
    lerna bootstrap
    . (Hippy uses Lerna to manage multi js packages, if
    lerna
    command is not found, execute
    npm install lerna -g
    first.)
  3. Build the front-end sdk packages at root directory with
    npm run build
    .
  4. Choose a demo to build with
    npm run buildexample -- [hippy-react-demo|hippy-vue-demo]
    at root directory.
  5. Start the Xcode and build the iOS app with
    open examples/ios-demo/HippyDemo.xcodeproj
    .
  6. cd
    to
    examples
    hippy-react-demo or hippy-vue-demo, run
    npm install
    to install demo js dependencies, then run
    npm run hippy:dev
    and
    npm run hippy:debug
    respectively to start the live debug mode

On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to

packages
>
[different package]
>
dist
, so if you have changed package source code and want to make it take effect in examples, please call
npm run build
at root directory again.

Start the android app with hippy-react or hippy-vue demo

For Android we recommend to use the real cellphone for better 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.

  1. Install the dependencies at root directory with
    npm install
    .
  2. Install dependencies of each npm package at root directory with
    lerna bootstrap
    . (Hippy uses Lerna to manage multi js packages, if
    lerna
    command is not found, execute
    npm install lerna -g
    first.)
  3. Build the front-end sdk packages at root directory with
    npm run build
    .
  4. Choose a demo to build with
    npm run buildexample -- [hippy-react-demo|hippy-vue-demo]
    at root directory.
  5. Open the
    examples/android-demo
    with Android Studio.
  6. Connect Android phone with USB cable and make sure USB debugging mode and USB installation are enabled.
  7. Open the project with Android Studio, run and install the apk.
  8. cd
    to
    examples
    hippy-react-demo or hippy-vue-demo, run
    npm install
    to install demo js dependencies, then run
    npm run hippy:dev
    and
    npm run hippy:debug
    respectively to start the live debug mode.

On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to

packages
>
[different package]
>
dist
, so if you have changed package source code and want to make it take effect in examples, please call
npm run build
at root directory again.

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.

Contribution

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.

Stargazers over time

Stargazers over time

License

Hippy is Apache-2.0 licensed.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.