浅谈Flutter以Framework的形式集成到iOS原生工程中

前言:
在当下移动端开发中，跨平台开发与混合开发越来越成为一个热门的技术栈。早在15年Facebook发布了React Native
开始，掀起了一部分移动端开发者和企业对跨平台框架的兴趣和研究，楼主是从18年接触的React Native(以下简称RN),刚开始时觉得挺新奇， 第一次接触到这种一套框架下来就能跑iOS 和Android平台，也是从那时起开始逐渐喜欢上了跨平台开发。后来18年的年底19年的年初，Google 发布1.0正式版的Flutter后开始，转而学习Flutter框架的使用，在使用过一段时间后发现Flutter写出来的页面确实比RN写出来的页面要细腻，体验更加接近原生。当然还有很多其他的跨平台框架，如用vue.js的uni-app框架，现在就受到原来越多中小企业的热捧，因为支持的平台众多，如微信小程序等。

来谈谈主流的两个跨平台框架RN和Flutter区别。首先跨平台框架在UI方面都可以极大的缩短开发周期，React Native是用JavaScript和React编写应用，Flutter是用dart来编写。从体验来说，Flutter在页面效果，性能方面要优于RN。原因在于React Native技术抛开了WebView，利用JavaScriptCore来做桥接，将JS调用转为native调用，只牺牲了小部分性能获取的跨平台开发，这是一大步进步。但是由于依然存在一个从JS代码到原生代码的转化过程，在界面UI被频繁操作的情况下，可能会导致性能问题。Flutter实现跨平台采用了更为彻底的方案。它既没有采用WebView也没有采用JavaScriptCore，而是自己实现了一套UI框架。不过从生态来看，js生态比Dart的生态要更加完善，Dart目前的插件还是偏少。但从更新方面来看,Flutter还很年轻，更新迭代非常快速，也足以看出Google在这一方面的决心。虽然RN一直在喊着重构，但更新速度太过缓慢。Flutter拥有更多的发展前景和期待，因此在跨平台方案选择上，最终选择了Flutter。

言归正传，如何将Flutter集成到iOS原生工程中其实在Flutter官方有相关的混编方案，但一大问题是此方案对团队开发不是很友好，需要求每名开发同学的电脑上都要配置Flutter环境。并且 iOS端开发与Flutter端开发在代码纠缠性上会变得复杂化。所以如果能将Flutter以Frameworks的形式集成到工程当中，可以避免他人配置相应的开发环境，在这里非常感谢在cocoaChina上看到的一篇文章，主要思路也是根据这篇文章来进行，原文地址：http://www.cocoachina.com/articles/464387 。

因此，有相同需求的可以参考这篇文章，写的非常详细，不过楼主在使用中遇到过一些小问题分享一下。原文章的一段脚本代码中:

Snip20210817_42.png

可能是由于文章发布的时间是19年，Flutter更新导致路径发生了变化:

5529DFD4F4D967071DB7DC622820EDA5.png

1798FF804C0D3C1FBF7C4F20556AF1F1.png

如果有参照这篇文章的童鞋可以避免在这里踩坑，如果是Flutter版本较老，将这里改回原文章的路经即可。如后续有页面的修改，只需重新执行一下 $ sh move_file.sh 命令，重新生成并单独替换修改后的Framework即可。

应用场景:
1.团队开发中部分模块使用Flutter开发。
2.SDK 开发对接时也可以借鉴此套法案。

最后:
有任何问题随时欢迎大家留言交流。
注:该文章为作者原创,如需转载请附上原文链接,谢谢。