Hippy 다운로드 - Hippy 소스 코드 다운로드

Hippy

기타 소스코드

2024-11-08, Version 3.3.2 (LTS)

다운로드

Hippy 크로스 플랫폼 프레임워크

작업 상태

홈페이지

소개

Hippy는 개발자가 한 번 작성하고 여러 플랫폼(iOS, Android, 웹 등)에서 실행할 수 있도록 돕는 것을 목표로 하는 크로스 플랫폼 개발 프레임워크입니다. Hippy는 웹 개발자, 특히 React나 Vue에 익숙한 사람들에게 매우 친숙합니다. Hippy를 사용하면 개발자는 크로스 플랫폼 앱을 쉽게 만들 수 있습니다.

Hippy는 현재 모바일 QQ, 모바일 QQ 브라우저, Tencent 비디오 앱, QQ 뮤직 앱, Tencent News 등 Tencent 주요 앱에 적용되어 수억 명의 일반 사용자에게 도달하고 있습니다.

? 장점

웹 개발자를 위해 설계되었으며 React 및 Vue 와 같은 웹 프레임워크를 공식적으로 지원합니다.
다양한 플랫폼에 대한 동일한 API.
JS 엔진 바인딩 통신으로 탁월한 성능을 발휘합니다.
더 나은 성능을 갖춘 재활용 가능한 구성 요소가 내장되어 있습니다.
원활하고 우아하게 웹 브라우저로 마이그레이션합니다.
Flex 레이아웃 엔진을 완벽하게 지원합니다.

? 시작하기

환경 준비

git과 npm이 로컬에 설치되어 있는지 확인하세요.

git clone https://github.com/Tencent/Hippy.git 실행하고 프로젝트 루트 디렉터리에 npm install 실행하세요.

Hippy 저장소는 git-lfs를 적용하여 gz,otf 파일을 관리하므로 먼저 git-lfs를 설치했는지 확인하십시오.

macOS 개발자의 경우:

iOS SDK를 사용한 Xcode: iOS 앱을 빌드합니다.
NDK가 포함된 Android 스튜디오: Android 앱을 빌드합니다.
Node.JS: 빌드 스크립트를 실행합니다.

종속성을 설치하려면 homebrew를 사용하는 것이 좋습니다.

Windows 개발자의 경우:

NDK가 포함된 Android 스튜디오: Android 앱을 빌드합니다.
Node.JS: 빌드 스크립트를 실행합니다.

Windows는 지금까지 iOS 개발 환경을 실행할 수 없습니다.

js 데모를 사용하여 iOS 시뮬레이터 빌드

iOS의 경우 처음 시도할 때 iOS 시뮬레이터를 사용하는 것이 좋습니다. 그러나 iOS 전문가라면 Xcode 구성을 변경하여 iPhone에 앱을 설치할 수 있습니다.

driver/js/ 에 cd 넣으세요.
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 패키지를 빌드합니다.
npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] 로 빌드할 데모를 선택하세요.
brew install cocoapods 로 CocoaPods를 설치하고, brew install cmake 로 cmake를 설치한 다음, framework/examples/ios-demo 디렉터리에서 pod install 명령을 실행하면 HippyDemo.xcworkspace 파일이 생성되고 Cocoapods 종속 항목이 설치됩니다.
Xcode를 시작하고 framework/examples/ios-demo/HippyDemo.xcworkspace 열어 iOS 앱을 빌드하세요.

Step 2 에서 오류가 발생하면 driver/js/examples hippy-react-demo 또는 hippy-vue-demo로 cd 하고 npm install 실행하여 데모 종속성을 먼저 설치할 수 있습니다.
iOS SDK 통합에 대한 자세한 내용입니다.

js 데모를 사용하여 Android 앱 빌드

Android의 경우 더 나은 개발 환경을 위해 실제 휴대폰을 사용하는 것이 좋습니다. 왜냐하면 Hippy는 x86 시뮬레이터를 지원할 수 없는 X5 JS 엔진을 사용하고 있을 뿐 아니라 ARM 시뮬레이터의 성능도 낮기 때문입니다.

Android 앱을 빌드하기 전에 SDK 및 NDK가 설치되어 있는지 확인하고 빌드 도구 체인을 업데이트 하지 마십시오 .

driver/js/ 에 cd 넣으세요.
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 패키지를 빌드합니다.
npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] 로 빌드할 데모를 선택하세요.
Android Studio를 사용하여 루트 디렉터리에서 Hippy Project 엽니다.
Android 휴대폰을 USB 케이블로 연결하고 USB 디버깅 모드가 활성화되어 있는지 확인하세요(휴대폰 연결 상태를 확인하려면 컴퓨터 터미널에서 adb devices 실행하세요).
Android Studio로 프로젝트를 열고 APK를 실행하고 설치합니다.

Step 2 에서 오류가 발생하면 driver/js/examples hippy-react-demo, hippy-vue-demo 또는 hippy-vue-next-demo로 cd 이동하고 npm install 실행하여 데모 종속성을 먼저 설치할 수 있습니다.
접두사 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android 라는 문제가 발생하는 경우 해결 방법은 다음과 같습니다.
Android SDK 통합에 대한 자세한 내용입니다.

JS 데모 디버그

js 데모로 iOS 시뮬레이터 빌드를 따르거나 먼저 js 데모로 Android 앱 빌드를 따라 앱을 빌드하세요.
driver/js/ 에 cd 넣으세요.
npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] 실행하세요.
npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev 실행하세요.

또는 npm run hippy:debug를 실행하기 위해 driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo 또는 driver/js/examples/hippy-vue-next-demo 디렉토리로 cd npm run hippy:debug 이동할 수 있습니다. 대신 npm run hippy:dev .
예제 디버그 모드에서 @hippy/react, @hippy/vue, @hippy/vue-next와 같은 npm 패키지는 driver/js/packages > [different package] > dist (node_modules 아님)에 링크되어 있으므로 변경한 경우 Node.js 패키지 소스 코드를 대상 예제에 적용하려면 npm run build 다시 호출하세요.
디버깅에 대한 자세한 내용은 Hippy 디버그 문서에서 읽을 수 있습니다.

JS 프로덕션 데모 빌드

js 데모로 iOS 시뮬레이터 빌드를 따르거나 먼저 js 데모로 Android 앱 빌드를 따라 앱을 빌드하세요.
driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo 또는 driver/js/examples/hippy-vue-next-demo 로 cd 이동하세요.
데모 js 종속성을 설치하려면 npm install 실행하세요.
npm run hippy:vendor 및 npm run hippy:build 순서대로 실행하여 프로덕션 vendor.[android|ios].js 및 index.[android|ios].js 빌드합니다.

Hippy 데모는 DllPlugin을 사용하여 공통 청크와 앱 청크를 분할합니다.

? 선적 서류 비치

hippy 예제를 확인하고 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에 기여한 모든 사람들은 기여자 및 작성자 파일에서 볼 수 있습니다.