Flutter混编开发之原生采用闲鱼Flutter_boost桥接踩坑记

前言

天下大势，分久必合合久必分。作为一名在安卓开发领域深耕过5年的程序员，深觉目前的跨平台开发必定是日后的趋势，因为跨平台解决了平台不统一导致的开发成本和维护成本翻倍的问题，而且如果程序有可能因为对各个平台进行适配导致功能或者UI不一致的问题也经常出现。
前端最早踏入跨平台领域可以从Java虚拟机说起，Java虚拟机是一个跟平台无关的java程序运行环境，由java sdk提供。我们一般的步骤就是先在自己的电脑上安装好Java虚拟机，然后、再通过java虚拟机进行java字节码进行运行程序。所谓的跨平台目的就已经实现了。
然而我们目前说的跨平台并不是说PC端，而说的是终端的跨平台，也就是安卓手机和IOS手机。
国内最早出现终端的跨平台解决方案就是HribH5,也就是原生和H5直接的混合开发，因为浏览器算是早期比较成熟的PC产品，同时随着Java的普遍流行，作为程序补充的脚步语言的JavaScrip也在浏览器领域找到了自己的霸主地位，不断延伸出的各种框架更是如虎添翼的让JavaScript在浏览器大放异彩，Node.js更是打通了JavaScript的任通二脉，让它在后台开发也畅通无阻。
无论大厂们在前端的跨平台路上怎么探索，从Facebook 推出的React native 到阿里巴巴推出的weex，其本质上还是基于浏览器进行编程，性能和体验上还是没有原生流畅。
果然，Google相继推出了FlutterUI框架，整合安卓5.0的material design和IOS的卡布基诺让我们看到了新的跨平台体验。但是又由于我们国内的公司在原生的路上走了太长太久，一下子投入到Flutter的怀抱有点困难，所以我们今天我们就采用了在原生的基础上集成Flutter Module的方式实现Flutter开发。

右图是我们想要介绍的集成方式：比较不错的博客。
比较早的博客可以参考。
上面的博客其实只是我们的一个参考，我们最主要的是看Flutter官网介绍的集成方式。
以上的调研结果说明采用原生里面集成Flutter module的方式确实可行。
那么我们就开始手动集成一下吧。
注意：我们创建Flutter module的方式有两种，一种是通过命令行的方式，进入的目录是原生工程的同级目录，建议用第二种，通过android studio控制命板的方式进行创建，可以避免错误的发生。
创建好的安卓项目和Flutter_module是同一层级目录。

原生和Flutter混编，首先的前提是Flutter module作为一个完整的Flutter项目是可以完整的运行起来的，然后我们才能把它当成一个module进行在原生里面依赖。

进入Flutter module之后，运行 flutter build apk命令，进行安卓编译，flutter build ios,编译ios。

或者你也可以直接打开整个Flutter工程，然后运行项目，原理是一样的编译项目，然后运行起来。

确定module项目没有问题之后，我们就需要在原生项目里面进行集成了。

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'yxh_flutter_module/.android/include_flutter.groovy'
))
include ':yxh_flutter_module'
project(':yxh_flutter_module').projectDir = new File('../yxh_flutter_module')

把上面的代码粘贴到你原生项目的setting.gradle文件里面，然后需要把module名称改成和你目前原生同级的flutter_module项目的名称。
然后再打开原生项目的app目录下的build.gradle文件，在dependencies配置中加入下面的代码：

 implementation project(':flutter')
        implementation project(':flutter_boost')

现在你就已经把项目引入到原生项目了。
注意：我们这里容易犯一个错误就是直接打开android项目进行运行
配置完上面的flutter_moduel依赖之后，我们就会尝试用android studio打开安卓或者ios原生项目，希望可以运行起来整个项目，但是往往这个时候发现会报错，不难理解就是我们虽然引入了module配置，但是module还是没有通过编译引入到项目中，所以我们需要先编译一下。
注意：需要先点击同步一下。sync一下
同步的作用就是把编译好的flutter_module引入到目前的原生项目里面。

同步成功之后的效果就是上图，说明原生项目已经集成了Flutter_module。