29.Flutter與原生解耦式混合開發

CoorChice發表於2019-03-27

目錄傳送門:《Flutter快速上手指南》先導篇

還記得在 混合開發(一) 章節中,講解了如何將一個 Flutter 工程引入現有原生工程的官方方案。

但這種方案需要修改原生工程配置,在大型合作開發的專案中使用起來不是很方便,大家都需要編譯自己的工程和 Flutter 工程,雖然你可能並不需要負責 Flutter 的開發。

那能不能以依賴庫的形式將 Flutter 專案與原生工程完全解耦呢?

要用的時候依賴上,需要下線的時候直接去掉依賴庫就好。

當你看到這個章節的時候,答案很明顯啊,就是可以啊 ?。

你可以把你的 Flutter 工程打包成一個 aar 包,然後讓原生工程在需要的時候依賴這個 aar,不需要的時候去掉就好。

接下來看看如何實現吧。

1. 改造你的 Flutter 工程

?提示:把 Flutter 版本升級到最新版。本文使用的版本為 1.2.1 版本。

1.1 你需要一個 Flutter Application

如果你是從 0 開始,那麼你要做的第一步就是建立一個 Flutter Application

這很簡單,跟著提示一步步來,你也可以參考 混合開發(一)

如果你有一個 Flutter Module 工程,那麼你需要在你的 Flutter Module 工程目錄下的命令列中先輸入:

flutter create temp
複製程式碼

這會在你的 Flutter Module 工程下建立一個名為 tempFlutter Application 工程包。

你需要做的就是把 temp 中的 android 包移動到你的 Flutter Module 工程根目錄,接著刪除 temp 工程包。

然後把工程根目錄下的 pubspec.yaml 進行小修改:

flutter:
    ...
    module:
      androidPackage: com.coorchice.flutter_module
      iosBundleIdentifier: com.coorchice.flutterModule

*********修改後*************
flutter:
    ...
複製程式碼

就是把 module: 部分的配置刪除,然後點選 Packages get 重新整理一下就好。

當完成這些操作只後,你應該會在 Flutter 專案目錄中看到有一個 android 工程包:

之所以這樣做,是因為 Flutter 自動生成的 android 工程會有一些專有的配置,自己重新建立一個的話會比較麻煩。

如果你本身就有一個 Flutter Application,就啥都不用幹了。

1.2 改造 android 工程包

現在,我們需要對這個 android 工程包來點兒改造 ?。

1.2.1 修改 android 工程根目錄下的 build.gradle

修改剛剛生成的 android 工程包的根目錄下的 build.gradle

subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}

*********修改後*************
subprojects {
    project.buildDir = "${rootProject.buildDir}/app"
}
複製程式碼

目的是為了讓你在 Flutter 中引入的第三方外掛能夠被打包到最後生成的 aar 中。

否則後面執行的時候會出現找不到第三方外掛類的 crash。

1.2.2 修改 app 目錄下的 build.gradle

你需要在剛剛生成的 android 工程包中,找到 app 目錄,然後修改該目錄下的模組 build.gradle

1.修改 android 工程為 module 工程:

apply plugin: 'com.android.application'

*********修改後*************

apply plugin: 'com.android.library'

複製程式碼

2.在 android{} 節點中增加:

compileOptions {
   sourceCompatibility 1.8
   targetCompatibility 1.8
}
複製程式碼

3.刪除 android{ defaultConfig {} } 中的 applicationId

4.在 dependencies{} 節點增加:

implementation 'com.android.support:support-v13:27.1.1'
implementation 'com.android.support:support-annotations:27.1.1'
複製程式碼

因為 Flutter 的 sdk 中會用到這些庫。

1.2.3 增加 facade 包

facade 包實際上在 Flutter Module 工程中的 .android 中會被生成。

它包含了兩個封裝好的 Java 程式碼檔案,比如常用的:

FlutterView flutterView = Flutter.createView(
   activity,
   getLifecycle(),
   "route0"
);
複製程式碼

就是在這個包中。

你可下載 facade檔案.zip 解壓放到 android 工程包的 app/src/main/java/io/flutter/ 下:

1.2.4 修改 AndroidManifest.xml

為了避免後續 aar 包引入原生工程,導致打包時的衝突,需要把 android 工程包的 AndroidManifest.xml 進行修改。

把整個 <application> 節點刪除就可以了 ?。

2.把 aar 引入原生工程

2.1 打包 aar

完成上面的步驟後,就可以開始打包 aar 了。

在你的 Flutter 專案根目錄的命令列中輸入:

flutter build apk
複製程式碼

等待編譯完成..

生成的 aar 包在 <你的Flutter專案目錄>/build/app/outputs/aar/app-release.aar

2.2 在原生專案中新增 aar

你可以把生成的 aar 包放到遠端倉庫,通過 implementation 來依賴。

也可以把 aar 包複製到 app/libs 下,然後在 app 的 build.gradle 中加入:

implementation fileTree(include: ['*.aar'], dir: 'libs')
複製程式碼

接著重新整理一下工程就可以了。

? 看個執行起來的效果:

恭喜你!你現在已經把 Flutter 工程解耦成一個 aar 包了,你可以在你的原生專案中隨時新增和移除了 ?。

目錄傳送門:《Flutter快速上手指南》先導篇

如何找到我?

傳送門:CoorChice 的主頁

傳送門:CoorChice 的 Github


相關文章