H5混合开发

Posted 2023-05-05

参考技术A

Hybrid App，俗称 混合应用 ，即混合了 Native技术 与 Web技术 进行开发的移动应用。现在比较流行的混合方案主要有三种，主要是在UI渲染机制上的不同:

Webview 是 Native App 中内置的一款基于 Webkit内核 的浏览器，主要由两部分组成:

在原生开发 SDK 中 Webview 被封装成了一个组件，用于作为 Web页面 的容器。因此，作为宿主的客户端中拥有更高的权限，可以对 Webview 中的 Web页面 进行配置和开发。

Hybrid技术中双端的交互原理，便是基于 Webview 的一些 API 和特性。
RN和原生通信

Hybrid技术 中最核心的点就是 Native端 与 H5端 之间的 双向通讯层 ，其实这里也可以理解为我们需要一套 跨语言通讯方案 ，便是我们常听到的 JSBridge。

整套方案需要 Web 与 Native 两部分共同来完成:

接入方式 :

详细内容由兴趣的童鞋可以看文章:

RN的原理，为什么可以同时在安卓和ios端运行
RN如何调用原生的一些功能
介绍RN的缺点

iOS与Flutter混合开发

参考技术A 在现有iOS项目中导入Flutter, 需要在Podfile文件中加入

flutter_application_path = '/Users/../flutter_app_module'

load File.join(flutter_application_path,'.ios','Flutter','podhelper.rb')

并对target添加：

install_flutter_engine_pod

install_all_flutter_pods(flutter_application_path)

从上我们可以看到导入Flutter需要依赖Flutter项目中的'.ios'文件夹下的'podhelper.rb'文件，所以在pod install之前，请确认.ios文件夹存在

也许你一开始存在这个文件，但是在执行flutter clean之后，这个文件不见了，不用惊慌， .ios文件夹基本可以通过以下几种方式生成，自行选择：

1. flutter run

2. flutter pub get

3. flutter create .

.ios文件夹生成之后，回到原生项目pod install即可。

友情提示：

在生成.ios的时候，项目中不要存在其他的内层项目（如下截图），那可能会导致你无法生成.ios或者生成的.ios不包含podhelper.rb这个文件，而最终导致你pod install失败。

愉快的开始coding......