1 Star 0 Fork 86

chriskkk / Hippy

forked from 腾讯开源 / Hippy 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

Hippy 跨端开发框架

Hippy Group license PRs Welcome node Actions Status Codecov GitHub release (latest SemVer)

English | 简体中文 | 官网 | 文章专栏 | QQ群:784894901

💡 介绍

Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS、Android 和 Web)。Hippy 的设计是面向传统 Web 开发者的,特别是之前有过 React 和 Vue 开发经验的开发者用起来会更为顺手,Hippy 致力于让前端开发跨端 App 更加容易。

到目前为止,腾讯公司内已经有 27+ 款主流 App 在使用 Hippy 框架,包括手机QQ、QQ浏览器、腾讯视频、QQ音乐、腾讯新闻等,每日触达数亿用户。

https://user-images.githubusercontent.com/12878546/126472924-650c3ca1-62ca-4bc1-bb6e-739dbe21a277.mp4

💯 特征

  • 为传统 Web 前端开发者设计,官方支持 ReactVue 两种主流前端框架。
  • 不同的平台保持了相同的接口。
  • 通过 JS 引擎 binding 模式实现的前端-终端通讯,具备超强性能。
  • 提供了高性能的可复用列表。
  • 皆可平滑迁移到 Web 浏览器。
  • 完整支持 Flex 的布局引擎

🔨 开始

准备环境

确保你本地已经安装 gitnpm

运行 git clone https://github.com/Tencent/Hippy.git,然后在项目根目录运行 npm install

Hippy 仓库使用 git-lfs 来管理 so,gz,otf 文件, 请确保你已经安装 git-lfs

macOS 用户需要以下软件:

  • Xcode 和 iOS SDK: 用以编译 iOS 终端 app。
  • Android Studio 和 NDK: 用以编译 Android app。
  • Node.JS: 用以运行前端编译脚本。

我们推荐使用 homebrew 来安装依赖。

Windows 用户者需要以下软件:

Windows 用户受条件所限,暂时无法进行 iOS app 开发。

使用 JS 范例来构建 iOS App

我们推荐 iOS 开发者使用模拟器来进行开发和调试工作。当然如果你熟悉 iOS 开发,也可以通过修改配置将 Hippy app 安装到 iPhone 手机上。

  1. 在根目录运行 npm run init

    该命令由 npm install && lerna bootstrap && npm run build 组成。

    npm install:安装项目构建脚本的依赖。

    lerna bootstrap:安装前端每一个 package 依赖。(Hippy 采用 Lerna 管理多 JS SDK 包仓库,如果出现 lerna command is not found, 先执行 npm install lerna -g 全局安装 Lerna。)

    npm run build:编译每一个 JS SDK 包。

  2. 选择一个前端范例项目来进行编译,在项目根目录运行 npm run buildexample -- [hippy-react-demo|hippy-vue-demo]

  3. 启动 Xcode 并且开始编译终端 App:open examples/ios-demo/HippyDemo.xcodeproj

如果步骤2出现错误,可以先 cdexamples hippy-react-demo 或者 hippy-vue-demo 目录下,执行 npm install --legacy-peer-deps,提前将 demo 的 NPM 包依赖先安装好。

更多信息请参考 iOS SDK 集成

使用 JS 范例来构建 Android App

我们推荐 Android 开发者使用真机,因为 Hippy 使用的 X5 JS 引擎没有提供 x86 的库以至于无法支持 x86 模拟器,同时使用 ARM 模拟器也比较慢。

在开始前请确认好 SDK 和 NDK 都安装了范例的指定版本,并且请勿更新编译工具链。

  1. 在根目录运行 npm run init

    该命令由 npm install && lerna bootstrap && npm run build 组成。

    npm install:安装项目构建脚本的依赖。

    lerna bootstrap:安装前端每一个 package 依赖。(Hippy 采用 Lerna 管理多 JS SDK 包仓库,如果出现 lerna command is not found, 先执行 npm install lerna -g 全局安装 Lerna。)

    npm run build:编译每一个 JS SDK 包。

  2. 选择一个前端范例项目来进行编译,在项目根目录运行 npm run buildexample -- [hippy-react-demo|hippy-vue-demo]
  3. 用 Android Studio 来打开终端范例工程 examples/android-demo
  4. 用 USB 数据线插上你的 Android 手机,需要确认手机已经打开 USB 调试模式(可通过在电脑 Terminal 执行 adb devices 判断手机是否已经连上了电脑)。
  5. 运行工程,并安装 APK。

如果步骤2出现错误,可以先 cdexamples hippy-react-demo 或者 hippy-vue-demo 目录下,执行 npm install --legacy-peer-deps,提前将 demo 的 NPM 包依赖先安装好。

如果 Android Studio 报了这个错误 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android,这里有解决办法

更多信息请参考 Android SDK 集成

调试前端 Demo

  1. 先按照 [使用 JS 范例来构建 iOS App][使用 JS 范例来构建 Android App] 步骤执行。
  2. 根目录执行 npm run init:example -- [hippy-react-demo|hippy-vue-demo]
  3. 根目录执行 npm run debugexample -- [hippy-react-demo|hippy-vue-demo] dev
  4. 根目录执行 npm run debugexample -- [hippy-react-demo|hippy-vue-demo] debug

你也可以 cd 到 examples hippy-react-demo 或者 hippy-vue-demo 目录去分别执行 npm run hippy:devnpm run hippy:debugnpm run hippy:local-debugnpm run hippy:local-dev 会调用 packages 下的源码)开启 Debug 模式`。

在 example 调试模式下,@hippy/react、@hippy/vue 等 npm 模块会直接链接到 packages > [different package] > dist 目录下面的 js 文件(非 node_modules),所以如果你修改了 packages 下的 JS 源代码并且想让其在 example 中生效,请重新在根目录执行 npm run build

更多关于调试的说明请浏览 Hippy Debug Document

构建前端生产环境 Demo

  1. 先按照 [使用 JS 范例来构建 iOS App][使用 JS 范例来构建 Android App] 步骤执行。
  2. cd 到 examples hippy-react-demo 或者 hippy-vue-demo 目录。
  3. 执行 npm install 安装相应 js demo 的依赖包。
  4. 依次执行 npm run hippy:vendornpm run hippy:build 构建出生产模式的 vendor.[android|ios].jsindex.[android|ios].js

Hippy 的 Demo 使用 DllPlugin 来分离 common chunk 和 app chunk.

📁 文档

参考 hippy examples 下的代码和浏览官网 hippyjs.org

📅 更新日志

每个发布版本的详细更新日志会记录在 project release notes

🧱 项目结构

Hippy
├── examples                          # 前终端范例代码。
│   ├── hippy-react-demo              # hippy-react 前端范例代码。
│   ├── hippy-vue-demo                # hippy-vue 前端范例代码。
│   ├── ios-demo                      # iOS 终端范例代码。
│   └── android-demo                  # Android 终端范例代码。
├── packages                          # 前端 npm 包。
│   ├── hippy-debug-server            # Hippy 的前终端调试服务。
│   ├── hippy-react                   # Hippy 的 React 语法绑定。
│   ├── hippy-react-web               # hippy-react 转 Web 的库。
│   ├── hippy-vue                     # Hippy 的 Vue 语法绑定。
│   ├── hippy-vue-css-loader          # 用来将 CSS 文本转换为 JS 语法树以供解析的 Webpack loader。
│   ├── hippy-vue-loader              # Fork 自 vue-loader 并针对 hippy 做定制化。
│   ├── hippy-vue-native-components   # hippy-vue 中浏览器中所没有的,额外的,终端定制组件。
│   ├── hippy-vue-router              # 在 hippy-vue 中运行的 vue-router。
│   └── types                         # 全局 Typescript 类型
├── ios
│   └── sdk                           # iOS SDK。
├── android
│   ├── support_ui                    # Android 终端实现的组件。
│   └── sdk                           # Android SDK。
├── core                              # C++ 实现的 JS 模块,通过 Binding 方式运行在 JS 引擎中。
├── docker                            # 发布 Native 的 Docker 镜像和构建脚本
├── layout                            # Hippy 布局引擎。
├── static                            # 全局静态资源存储目录。
└── scripts                           # 项目编译脚本。

🤝 贡献

欢迎开发人员为腾讯的开源做出贡献,我们将持续激励他们并感谢他们。我们提供了腾讯对开源贡献的说明,每个项目的具体贡献规则由项目团队制定。开发人员可以选择适当的项目并根据相应的规则参与。腾讯项目管理委员会将定期汇报合格的贡献者,奖项将由官方联络人颁发。在发起 Pull Request 或者 issue 前, 请确保你已经阅读 Contributing Guide

所有曾经参与 Hippy 项目贡献的开发者都会记录在 ContributorsAuthors File

❤️ 追星数

Stargazers over time

📄 许可协议

Hippy 遵守 Apache-2.0 licensed 协议。

🔗 链接

Hippy 生态

Taitank 布局引擎

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. Hippy-Vue and Hippy-Vue-Router is using the part of codes write by Evan You(@yyx990803) with MIT license. MIT License Copyright (c) 2013-present Evan You Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Hippy-React-Web is using the part of codes write by Nicolas Gallagher(@necolas) and Facebook with MIT license. MIT License Copyright (c) 2015-present, Nicolas Gallagher. Copyright (c) 2015-present, Facebook, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

Hippy 是一个新生的跨端开发框架,目标是使开发者可以只写一套代码就直接运行于三个平台(iOS、Android 和 Web) 展开 收起
JavaScript
Apache-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/chriskkk/Hippy.git
git@gitee.com:chriskkk/Hippy.git
chriskkk
Hippy
Hippy
master

搜索帮助