腾讯开源APP跨端框架，抹平 iOS 和 Android 双端差异

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个腾讯开源支持 iOS、Android 和 Web 的跨端框架——Hippy。

Hippy 可以理解为一个精简版的浏览器，从底层做了大量工作，抹平了 iOS 和 Android 双端差异，提供了接近 Web 的开发体验，目前上层支持了 React 和 Vue 两套界面框架，前端开发人员可以通过它，将前端代码转换为终端的原生指令，进行原生终端 App 的开发。

同时，Hippy 从底层进行了大量优化，在启动速度、可复用列表组件、渲染效率、动画速度、网络通信等方面都提供了业内顶尖的性能表现。

特性

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

功能对比

Hippy 从底层增加了很多和浏览器相同的接口，方便了开发者使用，这里有几个 Hippy 的独有功能。

包体积

Hippy 的包体积在业内也是非常具有竞争力的。

上图是一个空的APK，在引入后终端包大小对比。

上图是在前端搭建了一个最简单的 ListView 后，前端打出的 JS 的包大小对比。

渲染性能

ListView 在滑动时的性能对比，Hippy 可以一直保持十分流畅的状态。

内存占用

而在内存占用上，初始化 List 时 Hippy 就略占优势，在滑动了几屏后内存开销的差距越来越大。

Android集成示例

前期准备

• 已经安装了 JDK version>=1.7 并配置了环境变量
• 已经安装 Android Studio 最新版本
• 运行 Demo 工程前需要完成 NDK，CMAKE，gradle 与相关插件的安装

快速接入

1、查询 Maven Central Hippy 版本，其中 hippy-common 为 release 版本（不携带 inspector），hippy-debug 为 debug 版本

Maven Central Hippy 版本：
https://search.maven.org/search?q=com.tencent.hippy

2、配置 build.gradle

// api 'com.tencent.hippy:hippy-debug:1.0.0'
 api 'com.tencent.hippy:hippy-common:1.0.0'
 // 后面的 glide 与 support-v4 主要是在demo里面拉取图片资源用的，当然你也可以使用自己的三方库来处理图片请求。
 api 'com.github.bumptech.glide:glide:3.6.1'
 api 'com.android.support:support-v4:28.0.0'

3、继承 HippyImageLoader 并实现自己的图片加载器，具体可以参考 Demo 工程中 MyImageLoader 实现。

4、在宿主 APP 工程中增加引擎初始化与 hippyRootView 挂载逻辑，具体可以参考 Demo 工程中 MyActivity 实现

Demo地址： 
https://github.com/Tencent/Hippy/tree/master/examples/android-demo

谁在使用

-END-

开源协议：Apache2.0

开源地址：https://github.com/Tencent/Hippy

原文始发于微信公众号（开源技术专栏）：腾讯开源APP跨端框架，抹平 iOS 和 Android 双端差异

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66106.html