Hippyダウンロード - Hippyソースコードのダウンロード

Hippy

その他のソースコード

2024-11-08, Version 3.3.2 (LTS)

ダウンロード

ヒッピークロスプラットフォームフレームワーク

アクションのステータス

ホームページ

導入

Hippy は、開発者が一度作成すれば、複数のプラットフォーム (iOS、Android、Web など) で実行できるようにすることを目的としたクロスプラットフォーム開発フレームワークです。 Hippy は Web 開発者、特に React や Vue に精通している開発者に対して非常にフレンドリーです。 Hippy を使用すると、開発者はクロスプラットフォームアプリを簡単に作成できます。

Hippy は現在、Mobile QQ、Mobile QQ Browser、Tencent Video App、QQ Music App、Tencent News などの Tencent の主要なアプリに適用されており、数億人の一般ユーザーにリーチしています。

?利点

Web 開発者向けに設計されており、 ReactやVueなどの Web フレームワークを正式にサポートしています。
異なるプラットフォームでも同じ API を使用できます。
JS エンジンバインディング通信による優れたパフォーマンス。
リサイクル可能なコンポーネントを内蔵し、パフォーマンスが向上します。
スムーズかつスムーズに Web ブラウザに移行します。
Flex Layout エンジンを完全にサポート。

?はじめる

環境の準備

git と npm がローカルにインストールされていることを確認してください。

git clone https://github.com/Tencent/Hippy.gitを実行し、プロジェクトのルートディレクトリでnpm install実行します。

Hippy リポジトリは、so、gz、otf ファイルを管理するために git-lfs を適用します。最初に git-lfs がインストールされていることを確認してください。

macOS 開発者向け:

Xcode と iOS SDK: iOS アプリをビルドします。
NDK を使用した Android Studio: Android アプリをビルドします。
Node.JS: ビルドスクリプトを実行します。

依存関係をインストールするには homebrew を推奨します。

Windows 開発者向け:

NDK を使用した Android Studio: 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 を使用して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 を使用して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実行します。

または、 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 ではない) にリンクされているため、変更した場合js パッケージのソースコードをターゲットのサンプルで有効にしたい場合は、 npm run build再度呼び出してください。
デバッグの詳細については、Hippy Debug Document を参照してください。

js 本番環境のデモをビルドする

まず「js デモを使用して iOS シミュレーターをビルドする」または「js デモを使用して Android アプリをビルドする」に従ってアプリをビルドします。
cdでdriver/js/examples/hippy-react-demo 、 driver/js/examples/hippy-vue-demo 、またはdriver/js/examples/hippy-vue-next-demoに移動します。
npm install実行して、デモの js 依存関係をインストールします。
npm run hippy:vendorとnpm run hippy:build順番に実行して、実稼働vendor.[android|ios].jsとindex.[android|ios].jsビルドします。

Hippy デモでは、DllPlugin を使用して共通チャンクとアプリチャンクを分割します。

?ドキュメント

ヒッピーの例を確認するには、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 にプルリクエストや発行を行う前に、必ず Contributing Guide を読んでください。

Hippy に既に貢献したすべての人々は、貢献者と作成者のファイルで確認できます。