跨平台移动开发前端【免费下载链接】HippyHippy is designed to easily build cross-platform dynamic apps. 项目地址https://gitcode.com/gh_mirrors/hi/Hippy点击查看免费下载本文基于 Hippy 官方文档《Hippy iOS 3.x SDK集成指引》及配套源码完整讲解如何把 Hippy 3.x SDK 集成到现有 iOS 工程中从 Xcode/CMake/CocoaPods 环境准备到 Podfile 配置、HippyBridge 与 HippyRootView 两套资源加载接口的落地写法再到 JS 引擎JSC/Hermes与布局引擎Taitank/Yoga的切换原理。读完后你可以独立完成一个可运行的 Hippy iOS 应用接入并理解 podspec 背后的 CMake 编译机制与引擎切换的底层实现。前提说明本文默认读者已具备 iOS 开发经验且以当前 Hippy 仓库podspec 版本3.4.0的实际内容为准。一、环境准备集成 Hippy iOS SDK 需要以下三样工具XcodeiOS 工程的编译环境CMakeHippy 的 C 模块依赖 CMake 构建原因见下文 podspec 分析CocoaPods包管理工具用于把 Hippy 的 iOS Framework 引入现有工程。推荐使用 Homebrew 安装 CMake 与 CocoaPodsbrew install cmake brew install cocoapods若想快速体验可以直接基于 Hippy 仓库中的 iOS Demo 来开发。该 Demo 位于 framework/examples/ios-demo其 podfile 中已包含完整的引擎配置写法可直接对照参考。二、使用 CocoaPods 集成 iOS SDK具体操作步骤如下确定要集成的 Hippy iOS SDK 版本如 3.2.0记录下来接下来将在 Podfile 中用到。当前仓库根目录 hippy.podspec 中的版本号为3.4.0可前往 GitHub Releases 页面查询最新发行版本。准备现有 iOS 工程的 Podfile 文件。如果工程还没有 Podfile最简单的方式是在工程目录执行pod init生成的 Podfile 包含一些 demo 设置可根据集成目的调整。为了将 Hippy SDK 集成到工程需修改 Podfile 添加 hippy 并指定版本修改后应类似#use_frameworks! platform :ios, 12.0 # TargetName大概率是您的项目名称 target TargetName do # 在此指定步骤1中记录的hippy版本号可到 GitHub Releases 页面查询更多版本信息 pod hippy, 3.3.0 end注意动态库方式接入3.0.0-beta ~ 3.2.0-beta版本的 beta 版 Hippy iOS SDK 时需在 Podfile 添加ENV[use_frameworks]环境变量从3.3.0版本起已无需添加如已添加可直接移除。当前仓库 hippy.podspec 声明s.ios.deployment_target 12.0因此建议 Podfile 中platform :ios不低于12.0原文档早期示例写作11.0以当前 podspec 声明为准。默认配置下Hippy SDK 的布局引擎是 TaitankJS 引擎是系统内置的JavaScriptCore。如需切换请参照下文《四、引擎切换可选》。执行pod installpod install为什么必须安装 CMake从 hippy.podspec 可以看到podspec 定义了prepare_command在执行pod install时会调用仓库根目录的 xcodeinitscript.shs.prepare_command -CMD ./xcodeinitscript.sh #{layout_engine} #{js_engine} CMD该脚本首先检查cmake命令是否存在不存在则直接报错退出然后使用 buildconfig/cmake/ios.toolchain.cmake 工具链以OS64COMBINED平台、DEPLOYMENT_TARGET12.0为参数分别对devtools/devtools-integration/ios生成 DevtoolsBackend 工程与dom目录生成 dom_project并通过-DLAYOUT_ENGINE${layout_engine}传入布局引擎执行 CMake 配置见 xcodeinitscript.sh#L22-L43。也就是说DevTools 后端与布局相关的部分 C 模块需要在本地由 CMake 预生成 Xcode 工程因此开发环境必须正确配置 Xcode 命令行工具sudo xcode-select --install sudo xcode-select --reset命令成功执行后使用 CocoaPods 生成的.xcworkspace后缀工程文件来打开工程不要直接用.xcodeproj。podspec 内部结构速览一次pod install编译了什么从 hippy.podspec 的 subspec 划分可以完整看到 Hippy iOS SDK 的模块构成这决定了接入后工程中会出现哪些编译目标Subspec源码路径说明Basemodules/ios/base/*.{h,m,mm}基础工具层依赖FootstoneFrameworkframework/ios/**、renderer/native/ios/**、modules/vfs/ios/*、modules/ios/image/*核心框架 原生渲染器 VFS 图片依赖JSDriver、Dom、VFS、DomUtils、Footstone、FootstoneUtilsFootstonemodules/footstone/**/*.{h,cc}平台无关 C 基础库自动排除 Android/鸿蒙平台代码JSDriverdriver/js/**JS 驱动层链接JavaScriptCoreframework按js_engine变量裁剪 v8/hermes/jsh 相关源码Domdom/**DOM 与布局节点按layout_engine变量排除 taitank 或 yoga 的 layout node 源码Taitank/Yogadom/dom_project/_deps/*-src/**由 CMake 预生成的布局引擎源码目录分别定义LAYOUT_ENGINE_TAITANK1/LAYOUT_ENGINE_YOGA1宏DevTools及AsioForDevTools等devtools/**调试后端依赖 asio/json/websocketpp 头文件库几个关键实现细节C 标准统一为 C17几乎所有 C subspec 都设置了CLANG_CXX_LANGUAGE_STANDARD c17并开启异常与 RTTI引擎宏切换js_engine hermes时JSDriver的预处理宏为JS_HERMES1 JS_JSC1并依赖hippy_hermes_fulljs_engine jsc时仅为JS_JSC1见 hippy.podspec#L181-L188。这也解释了后文为何 Hermes 是可切换而非独占的布局引擎二选一Domsubspec 根据layout_engine排除另一套 layout node 源码Taitank 时排除yoga_layout_node.*Yoga 时排除taitank_layout_node.*见 hippy.podspec#L203-L235。三、编写 SDK 接入代码加载本地或远程的 Hippy 资源包Hippy SDK 的代码接入只需两步初始化一个 HippyBridge 实例。HippyBridge 是 Hippy 最重要的概念它是终端渲染侧与前端驱动侧通信的桥梁同时承载 Hippy 应用的主要上下文信息通过 HippyBridge 初始化一个 HippyRootView 实例。HippyRootView 是 Hippy 应用的显示载体创建业务本质就是创建一个 HippyRootView。当前 Hippy 提供分包加载接口与不分包加载接口两种用法。方式 1使用分包加载接口/** 此方法适用于以下场景 * 在业务还未启动时先准备好JS环境并加载包1当业务启动时加载包2减少包加载时间 * 我们建议包1作为基础包与业务无关只包含一些通用基础组件所有业务通用 * 包2作为业务代码加载 */ // 先加载包1创建出一个HippyBridge实例 // 假设commonBundlePath为包1的路径 // Tips详细参数说明请查阅头文件: HippyBridge.h NSURL *commonBundlePath getCommonBundlePath(); HippyBridge *bridge [[HippyBridge alloc] initWithDelegate:self bundleURL:commonBundlePath moduleProvider:nil launchOptions:your_launchOptions executorKey:nil]; // 再通过上述bridge以及包2地址创建HippyRootView实例 // 假设businessBundlePath为包2的路径 // Tips详细参数说明请查阅头文件: HippyRootView.h HippyRootView *rootView [[HippyRootView alloc] initWithBridge:bridge businessURL:businessBundlePath moduleName:Your_Hippy_App_Name initialProperties:{} shareOptions:nil delegate:nil]; // 最后给生成的rootView设置好frame并将其挂载到指定的VC上。 rootView.frame self.view.bounds; rootView.autoresizingMask UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview:rootView]; // 至此您已经完成一个Hippy应用的初始化SDK内部将自动加载资源并开始运行Hippy应用。方式 2使用不分包加载接口与分包接口类似先创建 HippyBridge区别在于创建 HippyRootView 时无需再传入业务包地址// 与上述使用分包加载接口类似首先需要创建一个HippyBridge实例 // 区别是在创建HippyRootView实例时无需再传入业务包即businessBundlePath直接使用如下接口创建即可 // Tips详细参数说明请查阅头文件: HippyRootView.h - (instancetype)initWithBridge:(HippyBridge *)bridge moduleName:(NSString *)moduleName initialProperties:(nullable NSDictionary *)initialProperties shareOptions:(nullable NSDictionary *)shareOptions delegate:(nullable idHippyRootViewDelegate)delegate;分包加载进阶使用分包加载可以结合一系列策略比如提前预加载 bridge、全局单 bridge 等来优化页面打开速度。Hippy 仓库提供了一个包含上述全部接入代码的简易示例项目 framework/examples/ios-demo建议参考它完成 SDK 到已有项目的集成。其中 HippyDemoViewController.m 同时演示了不分包initWithDelegate:moduleProvider:launchOptions:executorKey:initWithBridge:moduleName:...与分包bundleURL:businessURL:两条路径并实现了HippyBridgeDelegate/HippyRootViewDelegate的可选回调。源码级补充关键参数与默认值结合头文件源码可以对上述接入代码中的参数做更精确的说明HippyBridge 侧见 framework/ios/base/bridge/HippyBridge.hexecutorKey决定 JS 引擎实例是否共享。头文件注释明确相同executorKey的多个 HippyBridge 共享同一引擎实例引擎资源要等所有 bridge 都销毁后才释放需留意内存传空则默认不共享SDK 内部分配随机 key。这正是全局单 bridge / 预加载 bridge策略的底层机制launchOptions推荐传HippyLaunchOptions对象历史版本兼容NSDictionary但不推荐。HippyLaunchOptions包含三个属性HippyBridge.h#L163-L177属性默认值作用debugModeNO打开 DevMenu 并允许 JS inspectableenableTurboYES启用 jsi 模式TurboModuleuseHermesEngineNO使用 Hermes 作为 JS 引擎需JS_HERMES编译宏已启用才生效moduleName是 bridge 实例的唯一标识 key必须设置且不能为 nilcontextName默认与 moduleName 相同仅对 JSC 引擎在 Safari 开发者菜单中可见除 delegate 外SDK 还通过一组通知广播 bundle 生命周期事件HippyJavaScriptWillStartLoadingNotification、HippyJavaScripDidLoadSourceCodeNotification、HippyJavaScriptDidLoadNotification、HippyJavaScriptDidFailToLoadNotification等userInfo中通过kHippyNotiBridgeKey/kHippyNotiBundleUrlKey/kHippyNotiBundleTypeKey/kHippyNotiErrorKey取值且可用HippyBridgeBundleTypeVendor/HippyBridgeBundleTypeBusiness区分基础包与业务包的加载事件——做加载埋点或降级处理时可以直接订阅这些通知生命周期 APIsetRootView:、loadInstanceForRootView:withProperties:、unloadInstanceForRootView:、requestReload:线程安全内部发送HippyReloadNotification通常由 HippyRootView 自动触发无需业务方手动调用。HippyRootView 侧见 renderer/native/ios/renderer/HippyRootView.h头文件共定义 4 个初始化接口不带businessURL的两个不分包与带businessURL的两个分包其中带shareOptions的版本是为了兼容 Hippy 2.x注释特别说明shareOptions 不会发送到前端使用带businessURL的初始化接口时创建实例 → 加载业务包 → Run 应用一步完成runHippyApplication是 Hippy 程序的真正入口默认在资源加载完成后自动调用若设置disableAutoRunApplication YES则可以提前加载但不执行在业务真正需要时手动调用适合预热场景appProperties用于更新应用属性并触发前端重渲染注意只能在主线程设置hippyViewController用于关联背后的 VCbridge属性表明 bridge 可被多个 root view 共享——一个 HippyBridge 上可以挂多个 HippyRootView这也是分包 单 bridge 策略能成立的前提。到这里您已经完成了接入一个默认配置下 Hippy iOS SDK 的全部过程。四、引擎切换可选Hippy 3.x 的一个重要特性是支持多引擎的便捷切换可切换的引擎有两个布局引擎与JS 引擎。默认配置下布局引擎是 TaitankJS 引擎是 iOS 系统内置的 JavaScriptCore。4.1 切换 JS 引擎JSC → HermesHermes 是 Meta 开发的 JavaScript 引擎支持将 JS 编译为字节码以提升运行时效率。Hippy 从3.4.0版本开始支持 Hermes且 iOS 平台支持 Hermes 与 JSC 并行集成、运行时热切换。终端侧配置要点详见仓库内 《Hermes JS引擎切换指引Beta》在Podfile中设置环境变量并添加 Hermes 二进制库依赖ENV[js_engine] hermes # js engine configuration for hippy, options are: jsc/hermes. if ENV[js_engine] hermes pod hippy_hermes_full, :git https://github.com/hippy-contrib/hippy-hermes-bin.git, :tag 1.0.3 end该仓库 framework/examples/ios-demo/podfile 正是这一写法的真实落地。重新执行pod install。从 hippy.podspec 可以看到此时JSDriver会注入JS_HERMES1 JS_JSC1双宏并依赖hippy_hermes_full两个引擎同时进入产物初始化时显式启用HippyLaunchOptions.useHermesEngine默认值为NO必须显式设为YES才会走 Hermes否则继续使用 JSCHippyLaunchOptions *launchOptions [HippyLaunchOptions new]; launchOptions.debugMode _debugMode; launchOptions.useHermesEngine _useHermesEngine;HippyDemoViewController.m 中runHippyDemo方法即为该用法示例。运行时也可通过bridge.usingHermesEngine属性确认当前实际使用的引擎。Hermes 引擎还要求前端产物适配ES6 兼容、可用hippy/hermesc编译为 HBC 字节码、Hippy-Vue2 的 template 需改为 render 函数等这些前端侧步骤请参见 docs/development/use-hermes-engine.md此处不再展开。4.2 切换布局引擎Taitank → Yoga若希望使用 Yoga 布局引擎直接在 Podfile 中指定layout_engine环境变量ENV[layout_engine] Yoga之后重新执行pod install更新依赖即可。这个一行配置背后的完整链路是hippy.podspec 读取ENV[layout_engine]未设置时默认Taitank并传给prepare_command执行的 xcodeinitscript.sh脚本将-DLAYOUT_ENGINEYoga传入 CMake重新生成dom/dom_project工程从 CMake 拉取的依赖dom/dom_project/_deps/随之切换为 yoga 源码podspec 的Domsubspec 相应排除taitank_layout_node.*源码、保留yoga_layout_node.*并依赖hippy/Yogasubspec编译dom_project/_deps/yoga-src/yoga/**源码定义LAYOUT_ENGINE_YOGA1Taitank 路径则编译taitank-src源码并定义LAYOUT_ENGINE_TAITANK1见 hippy.podspec#L252-L280。由于布局引擎切换会触发 CMake 重新生成dom_project建议切换后先清理旧的生成目录再执行pod install避免残留的taitank-src产物混入编译。五、仓库资源索引与验证建议完成集成后可按以下顺序在仓库中核对与验证接入模板framework/examples/ios-demo——含 podfileHermes 引擎配置、HippyDemoViewController.m双模式接入与 delegate 实现、HomePage/PageManager等页面级使用方式API 参考framework/ios/base/bridge/HippyBridge.hbridge 全量 API、launch options、通知、renderer/native/ios/renderer/HippyRootView.hroot view 四个初始化接口与runHippyApplication构建机制hippy.podspecsubspec 划分、引擎变量解析、xcodeinitscript.shCMake 预生成逻辑、buildconfig/cmake/ios.toolchain.cmakeiOS CMake 工具链单元测试podspec 定义了UnitTeststest_spec源码为tests/ios/**/*.{h,m,mm}依赖 OCMock本地源码方式集成时可参照 demo podfile 用:testspecs [UnitTests]打开其中 tests/ios/HippyBridgeTest.mm、tests/ios/HippyRootViewTest.mm 覆盖了 bridge 与 root view 的核心行为延伸阅读docs/development/use-hermes-engine.mdHermes 前端适配与 HBC 编译、docs/development/ios-3.0-upgrade-guidelines.md从 Hippy 2.x 升级的注意事项。总结Hippy iOS 3.x 的接入路径可以概括为三步 两切换——环境准备Xcode/CMake/CocoaPods、CocoaPods 集成Podfile pod install、接入代码HippyBridge HippyRootView按需选择分包/不分包接口再视业务需要切换 JS 引擎ENV[js_engine]useHermesEngine与布局引擎ENV[layout_engine]。所有引擎切换最终都收敛到 podspec 的宏定义与源码裁剪上理解 hippy.podspec 与 xcodeinitscript.sh 的联动机制是排查集成构建问题的关键。赞分享跨平台移动开发前端【免费下载链接】HippyHippy is designed to easily build cross-platform dynamic apps. 项目地址https://gitcode.com/gh_mirrors/hi/Hippy点击查看免费下载相关推荐Hippy Android 3.x SDK 集成指引环境准备、Maven/本地集成与引擎接入全流程Hippy Android 3.x SDK 集成指引环境准备、Maven/本地集成与引擎接入全流程 本文以 Hippy 3.x 在 Android 平台上的跨平台移动开发前端Hippy Android 3.x SDK 升级实战指南引擎接入、组件与接口变更全解析Hippy Android 3.x SDK 升级实战指南引擎接入、组件与接口变更全解析 Hippy 3.x 对 Android SDK 的引擎接入流程、UI跨平台移动开发前端FlatBuffers Swift 库完整接入指南SPM / CocoaPods 集成、代码生成与 Buffer 实战FlatBuffers Swift 库完整接入指南SPM / CocoaPods 集成、代码生成与 Buffer 实战 FlatBuffers 是一个面向内存序列化跨平台编译器上一篇Mac Mouse Fix终极指南如何将普通鼠标变成macOS生产力神器下一篇零基础理解 autonomous-learning-libraryState、Agent、Environment、Approximation 四大核心抽象详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考