29.Flutter與原生解耦式混合開(kāi)發(fā)

目錄傳送門:《Flutter快速上手指南》先導(dǎo)篇

還記得在 混合開(kāi)發(fā)(一) 章節(jié)中,講解了如何將一個(gè) Flutter 工程引入現(xiàn)有原生工程的官方方案。

但這種方案需要修改原生工程配置,在大型合作開(kāi)發(fā)的項(xiàng)目中使用起來(lái)不是很方便,大家都需要編譯自己的工程和 Flutter 工程,雖然你可能并不需要負(fù)責(zé) Flutter 的開(kāi)發(fā)。

那能不能以依賴庫(kù)的形式將 Flutter 項(xiàng)目與原生工程完全解耦呢?

要用的時(shí)候依賴上,需要下線的時(shí)候直接去掉依賴庫(kù)就好。

當(dāng)你看到這個(gè)章節(jié)的時(shí)候,答案很明顯啊,就是可以啊 ??。

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

接下來(lái)看看如何實(shí)現(xiàn)吧。

1. 改造你的 Flutter 工程

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

1.1 你需要一個(gè) Flutter Application

如果你是從 0 開(kāi)始,那么你要做的第一步就是創(chuàng)建一個(gè) Flutter Application。

image

這很簡(jiǎn)單,跟著提示一步步來(lái),你也可以參考 混合開(kāi)發(fā)(一)

如果你有一個(gè) Flutter Module 工程,那么你需要在你的 Flutter Module 工程目錄下的命令行中先輸入:

flutter create temp

這會(huì)在你的 Flutter Module 工程下創(chuàng)建一個(gè)名為 tempFlutter Application 工程包。

image

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

然后把工程根目錄下的 pubspec.yaml 進(jìn)行小修改:

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

*********修改后*************
flutter:
    ...

就是把 module: 部分的配置刪除,然后點(diǎn)擊 Packages get 刷新一下就好。

當(dāng)完成這些操作只后,你應(yīng)該會(huì)在 Flutter 項(xiàng)目目錄中看到有一個(gè) android 工程包:

image

之所以這樣做,是因?yàn)?Flutter 自動(dòng)生成的 android 工程會(huì)有一些專有的配置,自己重新創(chuàng)建一個(gè)的話會(huì)比較麻煩。

如果你本身就有一個(gè) Flutter Application,就啥都不用干了。

1.2 改造 android 工程包

現(xiàn)在,我們需要對(duì)這個(gè) android 工程包來(lái)點(diǎn)兒改造 ??。

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

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

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

*********修改后*************
subprojects {
    project.buildDir = "${rootProject.buildDir}/app"
}

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

否則后面運(yùn)行的時(shí)候會(huì)出現(xiàn)找不到第三方插件類的 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{} 節(jié)點(diǎn)中增加:

compileOptions {
   sourceCompatibility 1.8
   targetCompatibility 1.8
}

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

4.在 dependencies{} 節(jié)點(diǎn)增加:

implementation 'com.android.support:support-v13:27.1.1'
implementation 'com.android.support:support-annotations:27.1.1'

因?yàn)?Flutter 的 sdk 中會(huì)用到這些庫(kù)。

1.2.3 增加 facade 包

facade 包實(shí)際上在 Flutter Module 工程中的 .android 中會(huì)被生成。

它包含了兩個(gè)封裝好的 Java 代碼文件,比如常用的:

FlutterView flutterView = Flutter.createView(
   activity,
   getLifecycle(),
   "route0"
);

就是在這個(gè)包中。

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

image

1.2.4 修改 AndroidManifest.xml

為了避免后續(xù) aar 包引入原生工程,導(dǎo)致打包時(shí)的沖突,需要把 android 工程包的 AndroidManifest.xml 進(jìn)行修改。

把整個(gè) <application> 節(jié)點(diǎn)刪除就可以了 ??。

2.把 aar 引入原生工程

2.1 打包 aar

完成上面的步驟后,就可以開(kāi)始打包 aar 了。

在你的 Flutter 項(xiàng)目根目錄的命令行中輸入:

flutter build apk

等待編譯完成..

生成的 aar 包在 <你的Flutter項(xiàng)目目錄>/build/app/outputs/aar/app-release.aar

image

2.2 在原生項(xiàng)目中添加 aar

你可以把生成的 aar 包放到遠(yuǎn)程倉(cāng)庫(kù),通過(guò) implementation 來(lái)依賴。

也可以把 aar 包復(fù)制到 app/libs 下,然后在 app 的 build.gradle 中加入:

implementation fileTree(include: ['*.aar'], dir: 'libs')

接著刷新一下工程就可以了。

?? 看個(gè)運(yùn)行起來(lái)的效果:

image

恭喜你!你現(xiàn)在已經(jīng)把 Flutter 工程解耦成一個(gè) aar 包了,你可以在你的原生項(xiàng)目中隨時(shí)添加和移除了 ??。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容