Hippy - Hippyは、クロスプラットフォームの動的アプリを簡単に構築できるように設計されています。 👏

(Hippy is designed to easily build cross-platform dynamic apps. 👏)

Created at: 2019-11-15 09:55:31
Language: C++
URL: https://github.com/Tencent/Hippy
License: Apache-2.0

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

ヒッピーグループ ライセンス PR歓迎 ノード アクションのステータス コデコフ GitHub release (最新の SemVer)

ホームページ

💡紹介

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

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

💯利点

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

🔨はじめ

環境の準備

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

プロジェクトのルートディレクトリで実行します。

git clone https://github.com/Tencent/Hippy.git
npm install

ヒッピーリポジトリは、git-lfsを適用してso,gz,otfファイルを管理し、最初にgit-lfsをインストールしたことを確認してください。

macOS 開発者の場合:

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

自作は依存関係をインストールすることをお勧めします。

Windows 開発者向け:

これまでのところ、WindowsはiOS開発環境を実行できません。

js デモを使用して iOS シミュレーターを構築する

iOSの場合、最初の試行時にiOSシミュレーターを使用することをお勧めします。ただし、iOSの専門家であれば、Xcode構成を変更してアプリをiPhoneにインストールできます。

  1. ルートディレクトリで実行します。

    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 パッケージをビルドします。

  2. ルートディレクトリでビルドするデモを選択します。

    npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]

  3. Xcodeを起動し、ルートディレクトリで開いてiOSアプリをビルドします。

    Hippy.xcworkspace

エラーをスローする場合は、ヒッピー反応デモまたはヒッピービューデモまたはヒッピービュー次のデモを実行し、最初にデモの依存関係をインストールするために実行できます。

Step 2
cd
examples
npm install --legacy-peer-deps

iOS SDK 統合の詳細については、こちらをご覧ください。

js デモを使用して Android アプリをビルドする

Androidの場合、Hippyはx86シミュレータをサポートできないX5 JSエンジンを使用しているため、ARMシミュレータのパフォーマンスが低いため、実際の携帯電話を使用することをお勧めします。

Androidアプリをビルドする前に、SDKとNDKがインストールされていることを確認し、ビルドツールチェーンを更新しないでください。

  1. ルートディレクトリで実行します。

    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 パッケージをビルドします。

  2. ルートディレクトリでビルドするデモを選択します。

    npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]

  3. アンドロイドスタジオでルートディレクトリを開きます。

    Android Project

  4. AndroidフォンをUSBケーブルで接続し、USBデバッグモードが有効になっていることを確認します(コンピューター端末で実行して携帯電話の接続状態を確認します)。

    adb devices

  5. アンドロイドスタジオでプロジェクトを開き、APKを実行してインストールします。

エラーをスローする場合は、ヒッピー反応デモまたはヒッピービューデモまたはヒッピービュー次のデモを実行し、最初にデモの依存関係をインストールするために実行できます。

Step 2
cd
examples
npm install --legacy-peer-deps

の問題が発生した場合は、ここに解決策があります。

No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

Android SDK 統合の詳細については、こちらをご覧ください。

js デモをデバッグする

  1. 最初に「js デモを使用して iOS シミュレーターをビルドする」または「js デモを使用して Android アプリをビルドする」に従って、アプリをビルドします。
  2. ルートディレクトリで実行します。
    npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]
  3. ルートディレクトリで実行します。
    npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev

または、代わりに or またはディレクトリを実行することもできます。

cd
examples/hippy-react-demo
examples/hippy-vue-demo
examples/hippy-vue-next-demo
npm run hippy:dev

デバッグモードの例では、@hippy/react、@hippy/vue、@hippy/vue-nextなどのnpmパッケージは> >(node_modulesではない)にリンクされているため、jsパッケージのソースコードを変更してターゲットの例で有効にしたい場合は、ルートディレクトリで再度呼び出してください。

packages
[different package]
dist
npm run build

デバッグの詳細については、Hippy デバッグ ドキュメントを参照してください。

js 本番デモをビルドする

  1. 最初に「js デモを使用して iOS シミュレーターをビルドする」または「js デモを使用して Android アプリをビルドする」に従って、アプリをビルドします。
  2. cd
    例またはまたは .
    hippy-react-demo
    hippy-vue-demo
    hippy-vue-next-demo
  3. デモjsの依存関係をインストールするために実行します。
    npm install
  4. 実行し、順番に本番環境と.
    npm run hippy:vendor
    npm run hippy:build
    vendor.[android|ios].js
    index.[android|ios].js

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

統合する方法

📁ドキュメンテーション

ヒッピーの例をチェックして、hippyjs.org にアクセスしてください。

📅変更履歴

各リリースバージョンの詳細な変更は、プロジェクトのリリースノートに記載されています。

🧱プロジェクト構造

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.
│   ├── hippy-vue-next-demo           # hippy-vue-next js demo code.
│   ├── ios-demo                      # iOS native demo code.
│   └── android-demo                  # Android native demo code.
├── packages                          # npm packages.
│   ├── hippy-react                   # React binding for Hippy.
│   ├── hippy-react-web               # Web adapter for hippy-react.
│   ├── hippy-vue-next-style-parser   # style parser for Hippy vue-next.
│   ├── hippy-vue                     # Vue binding for Hippy.
│   ├── hippy-vue-next                # Vue-next binding for Hippy.
│   ├── hippy-vue-css-loader          # Webpack loader for convert CSS text to JS AST.
│   ├── hippy-vue-loader              # Forked from vue-loader to do some hippy customization.
│   ├── hippy-vue-native-components   # Native components extensions for hippy-vue.
│   └── hippy-vue-router              # Vue router for hippy-vue.
├── ios
│   └── sdk                           # iOS SDK
├── android
│   └── 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.
├── static                            # Global static resources stored directory.
└── scripts                           # Project build script.



🤝 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. Before making a pull request or issue to Hippy, please make sure to read Contributing Guide.


All the people who already contributed to Hippy can be seen in Contributors and Authors File.


❤️ Stargazers over time


Stargazers over time


📄 License


Hippy is Apache-2.0 licensed.


🔗 Links


Hippy Eco-System


Taitank Layout Engine

About

Author：Tencent

Watch
Star
Fork