hippy 3.3.0

hippy 3.3.0

×

由zealotchen0，wwwcg维护。

hippy 3.3.0

  • 由
  • OpenHippy团队

Hippy跨平台框架

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

主页

💡 简介

Hippy是一个跨平台开发框架，旨在帮助开发者一次编写，多处运行（iOS、Android、Web等平台）。Hippy对Web开发者非常友好，尤其是那些熟悉React或Vue的开发者。使用Hippy，开发者可以轻松创建跨平台应用。

Hippy现在已广泛应用于腾讯的Mobile QQ、Mobile QQ浏览器、腾讯视频应用、QQ音乐应用、腾讯新闻等主要应用中，覆盖数亿普通用户。

💯 优势

  • 专为Web开发者设计，官方支持如React和Vue的Web框架。
  • 不同平台上的API相同。
  • 通过JS引擎绑定的通信实现卓越的性能。
  • 内置可回收组件，提供更好的性能。
  • 平滑且优雅地迁移到Web浏览器。
  • 完全支持Flex布局引擎。

🔨入门教程

准备环境

请确保您已安装本地版本的 git 和 npm。

在项目根目录下运行 git clone https://github.com/Tencent/Hippy.git 和 npm install。

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

针对 macOS 开发者

  • Xcode 及 iOS SDK：构建 iOS 应用。
  • Android Studio 及 NDK：构建 Android 应用。
  • Node.JS：运行构建脚本来构建应用。

homebrew 建议用来安装依赖。

针对 Windows 开发者

目前 Windows 无法运行 iOS 开发环境。

使用 JS 演示构建 iOS 模拟器

对于 iOS，我们建议初次尝试时使用 iOS 模拟器。然而，如果您是 iOS 专家，可以将 Xcode 配置更改以将应用安装到 iPhone 上。

  1. 进入 driver/js/ 目录。

  2. 运行 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 包。

  3. 使用 npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] 选择要构建的演示。

  4. 使用 brew install xcodegen 安装 Xcodegen，使用 brew install cocoapods 安装 CocoaPods，使用 brew install cmake 安装 cmake，然后在 framework/examples/ios-demo 目录下执行 xcodegen 命令，这将创建 HippyDemo.xcodeproj 和 HippyDemo.xcworkspace 文件并安装 Cocoapods 依赖。

  5. 启动 Xcode，通过打开 framework/examples/ios-demo/HippyDemo.xcworkspace 来构建 iOS 应用。

如果 步骤 2 抛出错误，可以进入 driver/js/examples 目录中的 hippy-react-demo 或 hippy-vue-demo，然后运行 npm install 以首先安装演示依赖。

有关 iOS SDK 集成 的更多详细信息。

使用 js 创建 Android 应用示例

对于 Android，我们建议使用真手机以获得更好的开发体验，因为 Hippy 使用的 X5 JS 引擎不支持 x86 模拟器，ARM 模拟器的性能也较低。

在构建 Android 应用之前，请确保已安装 SDK 和 NDK，且不要更新构建工具链。

  1. 进入 driver/js/ 目录。

  2. 运行 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 包。

  3. 使用 npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] 选择要构建的演示。

  4. 使用 Android Studio 打开根目录中的 Hippy 项目。

  5. 用 USB 线缆连接 Android 手机，并确保 USB 调试模式已启用（在电脑终端运行 adb devices 检查手机连接状态）。

  6. 使用 Android Studio 打开项目，运行并安装 apk。

如果 步骤 2 抛出错误，您可以 cd 到 driver/js/examples hippy-react-demo，hippy-vue-demo 或 hippy-vue-next-demo，并运行 npm install 首先安装演示依赖项。

如果您遇到 在 NDK 工具链文件夹中未找到不包括前缀 mips64el-linux-android 的工具链：mips64el-linux-android 的错误，这里有一个 解决方案。

有关 Android SDK 集成 的更多详细信息。

调试 js 示例

  1. 请先按照 使用 js 创建 iOS 模拟器示例 或 使用 js 创建 Android 应用示例 首先构建 App。
  2. 进入 driver/js/ 目录。
  3. 运行 npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]。
  4. 运行 npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] dev。

或者，您可以 cd 到 driver/js/examples/hippy-react-demo，driver/js/examples/hippy-vue-demo 或 driver/js/examples/hippy-vue-next-demo 目录，然后运行 npm run hippy:debug 和 npm run hippy:dev。

在示例调试模式下，npm 包如 @hippy/react，@hippy/vue，@hippy/vue-next 链接到 driver/js/packages > [不同包] > dist(非 node_modules)，因此，如果您已更改 js 包源代码并希望使其在目标示例中生效，请再次调用 npm run build。

有关调试的更多详细信息，请参阅 Hippy 调试文档。

构建js生产演示

  1. 请先按照 使用 js 创建 iOS 模拟器示例 或 使用 js 创建 Android 应用示例 首先构建 App。
  2. 通过cd进入driver/js/examples/hippy-react-demo、driver/js/examples/hippy-vue-demo或driver/js/examples/hippy-vue-next-demo。
  3. 运行npm install安装演示的js依赖项。
  4. 依次运行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

🤝 贡献

欢迎开发者为腾讯开源项目做出贡献，我们也将给予他们认可和奖励。在这里，我们提供腾讯开源贡献的官方描述。每个项目的具体贡献规则由项目团队制定。开发者可以选择合适的项目，并按照相应的规则参与。腾讯项目管理委员会将定期向合格的贡献者汇报，并由官方联系人颁发奖项。在向Hippy提交拉取请求或问题之前，请务必阅读贡献指南。

已经在Hippy上做出贡献的所有人员都可以在贡献者和作者文件中查看。

❤️随着时间的推移，恒星数量

Stargazers over time

📄许可证

Hippy遵循Apache-2.0许可证。

🔗 链接

Hippy生态系统

Taitank布局引擎