# Hippy Cross Platform Framework
![Hippy Group](https://img.shields.io/badge/group-Hippy-blue.svg) [![license](https://img.shields.io/badge/license-Apache%202-blue)](https://github.com/Tencent/Hippy/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Tencent/Hippy/pulls) ![node](https://img.shields.io/badge/node-%3E%3D10.0.0-green.svg) [![Actions Status](https://github.com/Tencent/Hippy/workflows/build/badge.svg?branch=master)](https://github.com/Tencent/Hippy/actions) [![Codecov](https://img.shields.io/codecov/c/github/Tencent/Hippy)](https://codecov.io/gh/Tencent/Hippy) [![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/Tencent/Hippy)](https://github.com/Tencent/Hippy/releases)
[Homepage](https://openhippy.com)
## ð¡ Introduction
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](http://www.tencent.com/) 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.
## ð¯ Advantages
* Designed 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](./layout).
## ð¨ Getting started
### Preparing environment
Make sure you have [git](https://git-scm.com/) and [npm](https://docs.npmjs.com/downloading-and-installing-node-js-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](https://git-lfs.github.com/) to manage so,gz,otf files, make sure you have installed [git-lfs](https://git-lfs.github.com/) first.
For macOS developers:
* [Xcode](https://developer.apple.com/xcode/) with iOS sdk: build the iOS app.
* [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
* [Node.JS](https://nodejs.org/en/): run the build scripts.
[homebrew](https://brew.sh/) is recommended to install the dependencies.
For Windows developers:
* [Android Studio](https://developer.android.com/studio) with NDK: build the android app.
* [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. `cd` to `driver/js/`.
2. 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](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.ï¼
>
> `npm run build`: Build each front-end sdk package.
3. Choose a demo to build with `npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]`.
4. Install Xcodegen with `brew install xcodegen`, install CocoaPods with `brew install cocoapods`, install cmake with `brew install cmake`, then execute `xcodegen` command at `framework/examples/ios-demo` directory, which will create `HippyDemo.xcodeproj` and `HippyDemo.xcworkspace` files and install Cocoapods dependencies.
5. Start the Xcode and build the iOS app with opening `framework/examples/ios-demo/HippyDemo.xcworkspace`.
> If `Step 2` throw error, you can `cd` to `driver/js/examples` hippy-react-demo or hippy-vue-demo, and run `npm install` to install demo dependencies first.
>
> More details for [iOS SDK integration](https://hippyjs.org/#/ios/integration?id=ios-%e9%9b%86%e6%88%90).
### 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. `cd` to `driver/js/`.
2. 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](https://lerna.js.org/) to manage multi js packages, if `lerna` command is not found, execute `npm install lerna -g` first.ï¼
>
> `npm run build`: Build each front-end sdk package.
3. Choose a demo to build with `npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]`.
4. Open the `Hippy Project` at root directory with Android Studio.
5. 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).
6. Open the project with Android Studio, run and install the apk.
> If `Step 2` throw error, you can `cd` to `driver/js/examples` hippy-react-demo, hippy-vue-demo or hippy-vue-next-demo, and run `npm 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](https://github.com/google/filament/issues/15#issuecomment-415423557).
>
> More details for [Android SDK integration](https://hippyjs.org/#/android/integration?id=android-%e9%9b%86%e6%88%90).
### 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 `driver/js/`.
3. Run `npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]`.
4. Run `npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev`.
> Or you can `cd` to `driver/js/examples/hippy-react-demo`, `driver/js/examples/hippy-vue-demo` or `driver/js/examples/hippy-vue-next-demo` directory to run `npm run hippy:debug` and `npm 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 call `npm run build` again.
>
> More details for debugging can be read in [Hippy Debug Document](https://hippyjs.org/#/guide/debug).
### Build the js production 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 `driver/js/examples/hippy-react-demo`, `driver/js/examples/hippy-vue-demo` or `driver/js/examples/hippy-vue-next-demo`.
3. Run `npm install` to install demo js dependencies.
4. Run `npm run hippy:vendor` and `npm run hippy:build` in sequence to build the production `vendor.[android|ios].js` and `index.[android|ios].js`.
> Hippy demo uses DllPlugin to split the common chunk and app chunk.
## ð Documentation
To check out [hippy examples](https://github.com/Tencent/Hippy/tree/master/examples) and
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
Hippy 可以理解为一个精简版的浏览器,从底层做了大量工作,抹平了 iOS 和 Android 双端差异,提供了接近 Web 的开发体验,目前上层支持了 React 和 Vue 两套界面框架,前端开发人员可以通过它,将前端代码转换为终端的原生指令,进行原生终端 App 的开发。同时,Hippy 从底层进行了大量优化,在启动速度、可复用列表组件、渲染效率、动画速度、网络通信等方面都提供了业内顶尖的性能表现。
资源推荐
资源详情
资源评论
收起资源包目录
开发者设计的跨端框架:可以理解为一个精简版的浏览器,抹平了 iOS 和 Android 双端差异,提供了接近 Web 的开发体验 (2000个子文件)
AUTHORS 2KB
gradlew.bat 3KB
yoga_layout_node.cc 38KB
taitank_layout_node.cc 34KB
dom_node.cc 25KB
root_node.cc 20KB
animation.cc 16KB
animation_manager.cc 14KB
layer_optimized_render_manager.cc 13KB
hippy_value_unittests.cc 13KB
serializer_unittests.cc 11KB
dom_manager.cc 9KB
deserializer_unittests.cc 9KB
cubic_bezier_animation.cc 7KB
dom_manager_unittests.cc 7KB
diff_utils.cc 6KB
scene_builder.cc 4KB
dom_argument.cc 3KB
animation_math.cc 2KB
animation_set.cc 2KB
tools.cc 1KB
scene.cc 985B
dom_listener.cc 978B
layout_node.cc 927B
dom_event.cc 903B
main.cc 145B
.clang-format 572B
.clang-format 502B
CODEOWNERS 3KB
vue.css 13KB
slidebar.min.css 2KB
view_model.dart 27KB
text_input.dart 25KB
render_view_model_test.dart 25KB
controller.dart 19KB
matrix_util.dart 19KB
text_virtual_node.dart 19KB
prop.dart 18KB
voltron_js_engine.dart 17KB
voltron_api.dart 16KB
voltron_bridge.dart 15KB
root.dart 15KB
manager.dart 14KB
node.dart 14KB
list.dart 13KB
http.dart 13KB
scroller.dart 13KB
text_input.dart 12KB
render_node_test.dart 12KB
operator_runner.dart 12KB
flex_define.dart 12KB
list.dart 11KB
div.dart 11KB
voltron_buffer.dart 11KB
list.dart 11KB
image_virtual_node.dart 10KB
network_inspector.dart 10KB
modal.dart 10KB
monitor.dart 10KB
primitive_value_deserializer.dart 10KB
flex_node.dart 10KB
render_api.dart 10KB
deserializer.dart 9KB
style_node.dart 9KB
virtual_node_manager.dart 9KB
manager.dart 9KB
scroller.dart 9KB
primitive_value_serializer.dart 9KB
module.dart 8KB
platform_manager.dart 8KB
main.dart 8KB
scroll.dart 7KB
storage.dart 7KB
image.dart 7KB
base_voltron_page.dart 7KB
websocket.dart 7KB
vfs_wrapper.dart 7KB
render_context.mocks.dart 7KB
base_voltron_page.dart 7KB
js_engine_context.dart 7KB
base_voltron_page.dart 7KB
screen_util.dart 7KB
waterfall.dart 7KB
manager.dart 6KB
view_pager.dart 6KB
main.dart 6KB
bundle.dart 6KB
bridge_define.dart 6KB
image.dart 6KB
view_pager.dart 6KB
render_context.dart 6KB
js_api_provider.dart 6KB
view_pager.dart 6KB
flex_node_style.dart 6KB
transform_util.dart 6KB
internalized_string_table.dart 5KB
devtools_util.dart 5KB
processor.dart 5KB
resource_loader.dart 5KB
dispatcher.dart 5KB
共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
UnknownToKnown
- 粉丝: 1w+
- 资源: 608
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Screenshot_20240528_103010.jpg
- 基于Python的新能源承载力计算及界面设计源码 - HAINING-DG
- 基于Java的本科探索学习项目设计源码 - 本科探索
- 基于Javascript和Python的微商城项目设计源码 - MicroMall
- 基于Java的网上订餐系统设计源码 - online ordering system
- 基于Javascript的超级美眉网络资源管理应用模块设计源码
- 基于Typescript和PHP的编程知识储备库设计源码 - study-php
- Screenshot_2024-05-28-11-40-58-177_com.tencent.mm.jpg
- 基于Dart的Flutter小提琴调音器APP设计源码 - violinhelper
- 基于JavaScript和CSS的随寻订购网页设计源码 - web-order
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功