混合開發(fā)簡介

使用Flutter從零開始開發(fā)App是一件輕松愜意的事情，但對于一些成熟的產(chǎn)品來說，完全摒棄原有App的歷史沉淀，全面轉(zhuǎn)向Flutter是不現(xiàn)實的。因此使用Flutter去統(tǒng)一Android、iOS技術(shù)棧，把它作為已有原生App的擴展能力，通過有序推進來提升移動終端的開發(fā)效率。

目前，想要在已有的原生App里嵌入一些Flutter頁面主要有兩種方案。一種是將原生工程作為Flutter工程的子工程，由Flutter進行統(tǒng)一管理，這種模式稱為統(tǒng)一管理模式。另一種是將Flutter工程作為原生工程的子模塊，維持原有的原生工程管理方式不變，這種模式被稱為三端分離模式。

在Flutter框架出現(xiàn)早期，由于官方提供的混編方式以及資料有限，國內(nèi)較早使用Flutter進行混合開發(fā)的團隊大多使用的是統(tǒng)一管理模式。但是，隨著業(yè)務迭代的深入，統(tǒng)一管理模式的弊端也隨之顯露，不僅三端（Android、iOS和Flutter）代碼耦合嚴重，相關(guān)工具鏈耗時也隨之大幅增長，最終導致開發(fā)效率降低。所以，后續(xù)使用Flutter進行混合開發(fā)的團隊大多使用三端代碼分離的模式來進行依賴治理，最終實現(xiàn)Flutter工程的輕量級接入。

除了可以輕量級接入外，三端代碼分離模式還可以把Flutter模塊作為原生工程的子模塊，從而快速地接入Flutter模塊，降低原生工程的改造成本。在完成對Flutter模塊的接入后，F(xiàn)lutter工程可以使用Android Studio進行開發(fā)，無需再打開原生工程就可以對Dart代碼和原生代碼進行開發(fā)調(diào)試。

使用三端分離模式進行Flutter混合開發(fā)的關(guān)鍵是抽離Flutter工程，將不同平臺的構(gòu)建產(chǎn)物依照標準組件化的形式進行管理，即Android使用aar、iOS使用pod。也就是說，F(xiàn)lutter的混編方案其實就是將Flutter模塊打包成aar或者pod庫，然后在原生工程像引用其他第三方原生組件庫那樣引入Flutter模塊即可。

Flutter模塊

默認情況下，新創(chuàng)建的Flutter工程會包含F(xiàn)lutter目錄和原生工程的目錄。在這種情況下，原生工程會依賴Flutter工程的庫和資源，并且無法脫離Flutter工程獨立構(gòu)建和運行。
在混合開發(fā)中，原生工程對Flutter的依賴主要分為兩部分。一個是Flutter的庫和引擎，主要包含F(xiàn)lutter的Framework 庫和引擎庫；另一個是Flutter模塊工程，即Flutter混合開發(fā)中的Flutter功能模塊，主要包括Flutter工程lib目錄下的Dart代碼實現(xiàn)。
對于原生工程來說，集成Flutter只需要在同級目錄創(chuàng)建一個Flutter模塊，然后構(gòu)建iOS和Android各自的Flutter依賴庫即可。接下來，我們只需要在原生項目的同級目錄下，執(zhí)行Flutter提供的構(gòu)建模塊命令創(chuàng)建Flutter模塊即可，如下所示。

flutter create -t module flutter_library

其中，flutter_library為Flutter模塊名。執(zhí)行上面的命令后，會在原生工程的同級目錄下生成一個flutter_library模塊工程。Flutter模塊也是Flutter工程，使用Android Studio打開它，其目錄如下圖所示。

可以看到，和普通的Flutter工程相比，F(xiàn)lutter模塊工程也內(nèi)嵌了Android工程和iOS工程，只不過默認情況下，Android工程和iOS工程是隱藏的。因此，對于Flutter模塊工程來說，也可以像普通工程一樣使用 Android Studio進行開發(fā)和調(diào)試。
同時，相比普通的Flutter工程，F(xiàn)lutter模塊工程的Android工程目錄下多了一個Flutter目錄，此目錄下的build.gradle配置就是我們構(gòu)建aar時的打包配置。同樣，在Flutter模塊工程的iOS工程目錄下也會找到一個Flutter目錄，這也是Flutter模塊工程既能像Flutter普通工程一樣使用Android Studio進行開發(fā)調(diào)試，又能打包構(gòu)建aar或pod的原因。

Android集成Flutter

在原生Android工程中集成Flutter，原生工程對Flutter的依賴主要包括兩部分，分別是Flutter庫和引擎，以及Flutter工程構(gòu)建產(chǎn)物。

• Flutter庫和引擎：包含icudtl.dat、libFlutter.so以及一些class文件，最終這些文件都會被封裝到Flutter.jar中。
• Flutter工程產(chǎn)物：包括應用程序數(shù)據(jù)段 isolate_snapshot_data、應用程序指令段 isolate_snapshot_instr、虛擬機數(shù)據(jù)段vm_snapshot_data、虛擬機指令段vm_snapshot_instr以及資源文件flutter_assets。

和原生Android工程集成其他插件庫的方式一樣，在原生Android工程中引入Flutter模塊需要先在settings.gradle中添加如下代碼。

setBinding(new Binding([gradle: this]))
evaluate(new File(
 settingsDir.parentFile,
 'flutter_library/.android/include_flutter.groovy'))

其中，flutter_library為我們創(chuàng)建的Flutter模塊。然后，在原生Android工程的app目錄的build.gradle文件中添加如下依賴。

dependencies {
  implementation project(":flutter")
}

然后編譯并運行原生Android工程，如果沒有任何錯誤則說明集成Flutter模塊成功。需要說明的是，由于Flutter支持的最低版本為16，所以需要將Android項目的minSdkVersion修改為16。
如果出現(xiàn)“程序包android.support.annotation不存在”的錯誤，需要使用如下的命令來創(chuàng)建Flutter模塊，因為最新版本的Android默認使用androidx來管理包。

flutter create --androidx -t module flutter_library

對于Android原生工程，如果還沒有升級到androidx，可以在原生Android工程上右鍵，然后依次選擇【Refactor】→【Migrate to Androidx】將Android工程升級到androidx包管理。
在原生Android工程中成功添加Flutter模塊依賴后，打開原生Android工程，并在應用的入口MainActivity文件中添加如下代碼。

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    View flutterView = Flutter.createView(this, getLifecycle(), "route1");
    FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    addContentView(flutterView, layoutParams);
  }
}

通過Flutter提供的createView()方法，可以將Flutter頁面構(gòu)建成Android能夠識別的視圖，然后將這個視圖使用Android提供的addContentView()方法添加到父窗口即可。重新運行原生Android工程，最終效果如下圖所示。

如果原生Android的MainActivity加載的是一個FrameLayout，那么加載只需要將Flutter頁面構(gòu)建成一個Fragment即可，如下所示。

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    FragmentTransaction ft= getSupportFragmentManager().beginTransaction();
    ft.replace(R.id.fragment_container, Flutter.createFragment("Hello Flutter"));
    ft.commit();
  }
}

除了使用Flutter模塊方式集成外，還可以將Flutter模塊打包成aar，然后再添加依賴。在flutter_library根目錄下執(zhí)行aar打包構(gòu)建命令即可抽取Flutter依賴，如下所示。

flutter build apk --debug

此命令的作用是將Flutter庫和引擎以及工程產(chǎn)物編譯成一個aar包，上面命令編譯的aar包是debug版本，如果需要構(gòu)建release版本，只需要把命令中的debug換成release即可。
打包構(gòu)建的flutter-debug.aar位于.android/Flutter/build/outputs/aar/目錄下，可以把它拷貝到原生Android工程的app/libs目錄下，然后在原生Android工程的app目錄的打包配置build.gradle中添加對它的依賴，如下所示。

dependencies {
 implementation(name: 'flutter-debug', ext: 'aar')  
}

然后重新編譯一下項目，如果沒有任何錯誤提示則說明Flutter模塊被成功集成到Android原生工程中。

iOS集成Flutter

原生iOS工程對Flutter的依賴包含F(xiàn)lutter庫和引擎，以及Flutter工程編譯產(chǎn)物。其中，F(xiàn)lutter 庫和引擎指的是Flutter.framework等，F(xiàn)lutter工程編譯產(chǎn)物指的是 App.framework等。
在原生iOS工程中集成Flutter需要先配置好CocoaPods，CocoaPods是iOS的類庫管理工具，用來管理第三方開源庫。在原生iOS工程中執(zhí)行pod init命令創(chuàng)建一個Podfile文件，然后在Podfile文件中添加Flutter模塊依賴，如下所示。

flutter_application_path = '../flutter_ library/
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'iOSDemo' do
 # Comment the next line if you don't want to use dynamic frameworks
 use_frameworks!
 install_all_flutter_pods(flutter_application_path)

 # Pods for iOSDemo
 … //省略其他腳本
end '

然后，關(guān)閉原生iOS工程，并在原生iOS工程的根目錄執(zhí)行pod install命令安裝所需的依賴包。安裝完成后，使用Xcode打開iOSDemo.xcworkspace原生工程。

默認情況下，F(xiàn)lutter是不支持Bitcode的，Bitcode是一種iOS編譯程序的中間代碼，在原生iOS工程中集成Flutter需要禁用Bitcode。在Xcode中依次選擇【TAGETS】→【Build Setttings】→【Build Options】→【Enable Bitcode】來禁用Bitcode，如下圖所示。

如果使用的是Flutter早期的版本，還需要添加build phase來支持構(gòu)建Dart代碼。依次選擇【TAGGETS】→【Build Settings】→【Enable Phases】，然后點擊左上角的加號新建一個“New Run Script Phase”，添加如下腳本代碼。

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

不過，最新版本的Flutter已經(jīng)不需要再添加腳本了。重新運行原生iOS工程，如果沒有任何錯誤則說明iOS成功集成Flutter模塊。

除了使用Flutter模塊方式外，還可以將Flutter模塊打包成可以依賴的動態(tài)庫，然后再使用CocoaPods添加動態(tài)庫。首先，在flutter_library根目錄下執(zhí)行打包構(gòu)建命令生成framework動態(tài)庫，如下所示。

flutter build ios --debug

上面命令是將Flutter工程編譯成Flutter.framework和App.framework動態(tài)庫。如果要生成release版本，只需要把命令中的debug換成release即可。

然后，在原生iOS工程的根目錄下創(chuàng)建一個名為FlutterEngine的目錄，并把生成的兩個framework動態(tài)庫文件拷貝進去。不過，iOS生成模塊化產(chǎn)物要比Android多一個步驟，因為需要把Flutter工程編譯生成的庫手動封裝成一個pod。首先，在flutter_ library該目錄下創(chuàng)建FlutterEngine.podspec，然后添加如下腳本代碼。

Pod::Spec.new do |s|
 s.name       = 'FlutterEngine'
 s.version     = '0.1.0'
 s.summary     = 'FlutterEngine'
 s.description   = <<-DESC
TODO: Add long description of the pod here.
            DESC
 s.homepage     = 'https://github.com/xx/FlutterEngine'
 s.license     = { :type => 'MIT', :file => 'LICENSE' }
 s.author      = { 'xzh' => '1044817967@qq.com' }
 s.source    = { :git => "", :tag => "#{s.version}" }
 s.ios.deployment_target = '9.0'
 s.ios.vendored_frameworks = 'App.framework', 'Flutter.framework'
end

然后，執(zhí)行pod lib lint命令即可拉取Flutter模塊所需的組件。接下來，在原生iOS工程的Podfile文件添加生成的庫即可。

target 'iOSDemo' do
  pod 'FlutterEngine', :path => './'
end

重新執(zhí)行pod install命令安裝依賴庫，原生iOS工程集成Flutter模塊就完成了。接下來，使用Xcode打開ViewController.m文件，然后添加如下代碼。

#import "ViewController.h"
#import <Flutter/Flutter.h>
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  UIButton *button = [[UIButton alloc]init];
  [button setTitle:@"加載Flutter模塊" forState:UIControlStateNormal];
  button.backgroundColor=[UIColor redColor];
  button.frame = CGRectMake(50, 50, 200, 100);
  [button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
  [button addTarget:self action:@selector(buttonPrint) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:button];
}

- (void)buttonPrint{
  FlutterViewController * flutterVC = [[FlutterViewController alloc]init];
  [flutterVC setInitialRoute:@"defaultRoute"];
  [self presentViewController:flutterVC animated:true completion:nil];
}

@end

在上面的代碼中，我們在原生iOS中創(chuàng)建了一個按鈕，點擊按鈕時就會跳轉(zhuǎn)到Flutter頁面，最終效果如下圖所示。

默認情況下，F(xiàn)lutter為提供了兩種調(diào)用方式，分別是FlutterViewController和FlutterEngine。對于FlutterViewController來說，打開ViewController.m文件，在里面添加一個加載flutter頁面的方法并且添加一個按鈕看來調(diào)用。

Flutter模塊調(diào)試

眾所周知，F(xiàn)lutter的優(yōu)勢之一就是在開發(fā)過程中使用熱重載功能來實現(xiàn)快速調(diào)試。默認情況下，在原生工程中集成Flutter模塊后熱重載功能是失效的，需要重新運行原生工程才能看到效果。如此一來，F(xiàn)lutter開發(fā)的熱重載優(yōu)勢就失去了，并且開發(fā)效率也隨之降低。

那么，能不能在混合項目中開啟Flutter的熱重載呢？答案是可以的，只需要經(jīng)過如下步驟即可開啟熱重載功能。首先，關(guān)閉原生應用，此處所說的關(guān)閉是指關(guān)閉應用的進程，而不是簡單的退出應用。在Flutter模塊的根目錄中輸入flutter attach命令，然后再次打開原生應用，就會看到連接成功的提示，如下圖所示。

如果同時連接了多臺設(shè)備，可以使用flutter attach -d 命令來指定連接的設(shè)備。接下來，只需要按r鍵即可執(zhí)行熱重載，按R鍵即可執(zhí)行熱重啟，按d鍵即可斷開連接。

在Flutter工程中，我們可以直接點擊debug按鈕來進行代碼調(diào)試，但在混合項目中，直接點擊debug按鈕是不起作用的。此時，可以使用Android Studio提供的flutter attach按鈕來建立與flutter模塊的連接，進行實現(xiàn)對flutter模塊的代碼調(diào)試，如圖下圖所示。

上面只是完成了在原生工程中引入Flutter模塊，具體開發(fā)時還會遇到與Flutter模塊的通信問題、路由管理問題，以及打包等。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論