English | [简体中文](./README.zh_CN.md) | [Homepage](//tencent.github.io/Hippy/)
@@ -8,7 +8,9 @@ English | [简体中文](./README.zh_CN.md) | [Homepage](//tencent.github.io/Hip
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](http://www.tencent.com/) apps such as Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App，reaching hundreds of millions of ordinary users.
Hippy is now applied in 27+ [Tencent](http://www.tencent.com/) apps such as Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App，Tencent News, reaching hundreds of millions of ordinary users.
@@ -19,6 +21,70 @@ Hippy is now applied in 27 [Tencent](http://www.tencent.com/) apps such as Mobil
* Smoothly and gracefully migrate to web browser.
* Fully supported Flex [Layout engine](./layout).
## Getting started
### Preparing environment
For macOS developers:
1. [Xcode](https://developer.apple.com/xcode/) with iOS sdk: build the iOS app.
2. [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
3. [Node.JS](https://nodejs.org/en/): run the build scripts.
[homebrew](https://brew.sh/) is recommended to install the dependencies.
For Windows developers:
1. [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
2. [Node.JS](https://nodejs.org/en/): run the build scripts.
> Windows can't run the iOS development environment so far.
### Build the iOS simulator with js demo
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.
1. Install the project build scripts dependencies at root directory with `npm install`.
2. Install dependencies of each npm package at root directory with `lerna bootstrap`.
（Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.）
3. Build each front-end sdk package 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`.
### Build the Android app with js demo
For Android, we recommend using the real cellphone for better develop experience, because Hippy is using [X5](https://x5.tencent.com/) 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 whole project dependencies at root directory with `npm install`.
2. Install dependencies of each npm package at root directory with `lerna bootstrap`.
（Hippy uses [Lerna](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.）
3. Build each front-end sdk package 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 is enabled(Run `adb devices` on the computer terminal to check cellphone connection status).
7. Open the project with Android Studio, run and install the apk.
> 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](https://github.com/google/filament/issues/15#issuecomment-415423557).
### Debug the js demo
1. Follow [Build the iOS simulator with js demo](https://github.com/Tencent/Hippy#build-the-ios-simulator-with-js-demo) or [Build the Android app with js demo](https://github.com/Tencent/Hippy#build-the-android-app-with-js-demo) first to build the App.
2.`cd` to `examples` hippy-react-demo or hippy-vue-demo.
3. Run `npm install` to install demo js dependencies.
4. 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`(not node_modules), so if you have changed js package source code and want to make it take effect in target example, please call `npm run build` at root directory again. More details for debug can be read in [Hippy Debug Document](https://hippyjs.org/#/guide/debug).
## Documentation
To check out [hippy examples](https://github.com/Tencent/Hippy/tree/master/examples) and visit [hippyjs.org](https://hippyjs.org).
## Changelog
Detailed changes for each release version are documented in the [project release notes](https://github.com/Tencent/Hippy/releases).
## Project structure
```text
@@ -43,68 +109,16 @@ Hippy
│ ├── support_ui # Android native components.
│ └── sdk # Android SDK.
├── core # JS modules implemented by C++, binding to JS engine.
├── docker # Native release docker image and build scripts.
├── layout # Hippy layout engine.
└── scripts # Project build script.
```
## Getting started
### Preparing environment
For macOS developers:
1. [Xcode](https://developer.apple.com/xcode/) with iOS sdk: build the iOS app.
2. [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
3. [Node.JS](https://nodejs.org/en/): run the build scripts.
[homebrew](https://brew.sh/) is recommended to install the dependencies.
For Windows developers:
1. [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
2. [Node.JS](https://nodejs.org/en/): 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](https://lerna.js.org/) 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](https://x5.tencent.com/) 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](https://lerna.js.org/) 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](https://github.com/google/filament/issues/15#issuecomment-415423557).
## 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.
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](https://github.com/Tencent/Hippy/blob/master/.github/CONTRIBUTING.md).
All the people who already contributed to Hippy can be seen at [Contributors](https://github.com/Tencent/Hippy/graphs/contributors) and [Authors File](https://github.com/Tencent/Hippy/blob/master/AUTHORS)
## Stargazers over time
@@ -113,3 +127,9 @@ Developers are welcome to contribute to Tencent's open source, and we will also
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
zoomchan-cxj