教你如何使用Flutter和原生App混合开发
點擊上方 "程序員小樂"關注,?星標或置頂一起成長
每天凌晨00點00分,?第一時間與你相約
????
每日英文
Things in this world are temporary. If events are turning well, enjoy it. If they go wrong don’t worry, it won’t last long.
世界上的所有事情都是暫時的，如果事事順心，那就好好享受；如果發生意外，不要過于擔心，一切都會過去的。
每日掏心話
秒針、分針、時針，拖著虛影轉動成無數密密麻麻的日子，最終匯聚成時間的長河，變成我們所生活的龐大的時代。
來自：炸雞叔?| 責編：樂樂
鏈接：juejin.im/user/56365e4960b294e7f5f999cb
程序員小樂(ID:study_tech)第 1004?次推文
往日回顧：《最受歡迎的男友職業排行榜Top10》
??? ?
? ?正文? ?
前言
記得去年9月份的時候谷歌在上海有一次開發者大會，去參加的時候關注到了flutter，隨后沒過多久就發布了1.0版本。18年底的時候用flutter做了個小項目，發現flutter確實挺好用的。于是嘗試在公司找個小項目上馬，進行混合開發試試。
方案選擇
目前主流的混合開發方案有兩種集成方式：
源碼集成
也就是谷歌官方提供的方案，項目地址如下所示：
https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps
產物集成
Flutter項目單獨開發，開發完成后發布成aar包或者iOS的framework形式，原生項目依賴flutter輸出的制品即可。具體可以參考閑魚的文章。
兩種方式各有優劣，其實產物集成更好一些，不過即使是進行產物集成，也需要弄懂源碼集成的方式，因為當有很多和原生交互的功能進行開發的時候，源碼集成的方式可以直接調試會方便很多。
根據目前我們的情況：
參與人員都要進行flutter開發
持續發布和構建我可以修改控制
我們現在這個項目選擇了源碼集成的方式。
為原生項目集成flutter
整個的集成方案是參考谷歌方法，但是有一些不一樣，我是創建了一個flutter項目后，在原生的項目中使用git submodule的形式進行管理的。
創建flutter module project
我們假定已經有了原生的項目Native-iOS和Native-Android；現在我們需要創建我們的flutter項目。
把我們的flutter的channel切換到master(master分支下是flutter的preview版本)
flutter?channel?master創建flutter模塊的項目
flutter?create?-t?module?{moduleName}我這里創建一個flutter的模塊項目叫flutter_module
搜索公眾號程序員小樂回復關鍵字“Java”，獲取Java面試題和答案。
??flutter?create?-t?module?flutter_module Creating?project?flutter_module...flutter_module/test/widget_test.dart?(created)......flutter_module/.idea/workspace.xml?(created) Running?"flutter?packages?get"?in?flutter_module...?????????????????7.2s Wrote?12?files.All?done! Your?module?code?is?in?flutter_module/lib/main.dart.創建成功后我們可以看一下目錄結構
???flutter_module?git:(master)???tree?-L?2?-a . ├──?.android │???├──?Flutter │???├──?app │???├──?... ├──?.gitignore ├──?.ios │???├──?Config │???├──?Flutter │???├──?... │???└──?Runner.xcworkspace ├──?lib │???└──?main.dart ├──?pubspec.lock ├──?pubspec.yaml └──?test└──?widget_test.dart在flutter的模塊項目中包含有一個隱藏的.android和.ios目錄這個目錄下是可運行的Android和iOS項目，我們的flutter代碼還是在lib下編寫，注意在.android和.ios目錄下都有一個Flutter目錄，這個是我們flutter的庫項目了。也就是Android用來生成aar，iOS用來生產framework的庫。如果我們用flutter create xxx 生成的純flutter項目是沒有這個Flutter目錄的。
把該項目使用git管理起來，稍后我們要在native項目中以子模塊的形式添加進去。
???cd?flutter_module ???git?init Initialized?empty?Git?repository?in?/Users/zhiqiangdeng/Documents/ProjectSource/FlutterProject/flutter_module/.git/ ???flutter_module?git:(master)??初始化git倉庫后我們先編輯一下項目下的.gitignore文件，當前這個文件是把項目下的.ios和.android忽略掉的。這個兩個項目我們需要跟蹤一下，大家可以去github上找一下iOS和Android的gitignore模版文件，然后添加到這個兩個目錄中，然后把頂層目錄的文件作出如下修改，刪除.android和.ios添加.ios/Flutter/Generated.xcconfig。
.gitignore文件：
-.android/ -.ios/ +.ios/Flutter/Generated.xcconfig提交你的flutter模塊項目到你的git服務器(我提交到github上了，大家可以參考)
git?remote?add?origin?{你的flutter?module的倉庫地址} git?push?origin?master給iOS項目集成flutter
進入我們原生的iOS項目根目錄中，為它添加一個git submodule，把我們的flutter項目拉取下來
git?submodule?add?{你的flutter?module的倉庫地址} git?submodule?update在項目的Podfile文件中添加下面的代碼，在每次執行pod install會運行podhelper.rb
platform?:ios,?'8.0' use_frameworks!target?'MyApp'?dopod?'AFNetworking',?'~>?2.6'xxxx end #添加如下兩行代碼，路徑修改為我們的fluter?module的路徑 flutter_application_path?=?'./flutter-module-demo'eval(File.read(File.join(flutter_application_path,?'.ios',?'Flutter',?'podhelper.rb')),?binding)?打開Xcode關閉bitcode配置Build Settings->Build Options->Enable Bitcode
添加編譯腳本，打開Xcode在 Build 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模塊目錄中執行flutter packages get命令
回到原生項目根目錄執行pod install
到此為止我們的原生項目就已經集成好了flutter項目了。
在原生項目中使用flutter，下面以swift項目為例
修改AppDelegate.swift:注意AppDelegate是集成自FlutterAppDelegate
import?UIKit import?Flutter import?FlutterPluginRegistrant?//?Only?if?you?have?Flutter?Plugins.@UIApplicationMain class?AppDelegate:?FlutterAppDelegate?{var?flutterEngine?:?FlutterEngine?;//?Only?if?you?have?Flutter?plugins.override?func?application(_?application:?UIApplication,?didFinishLaunchingWithOptions?launchOptions:?[UIApplication.LaunchOptionsKey:?Any]?)?->?Bool?{self.flutterEngine?=?FlutterEngine(name:?"io.flutter",?project:?nil);self.flutterEngine?.run(withEntrypoint:?nil);GeneratedPluginRegistrant.register(with:?self.flutterEngine);return?super.application(application,?didFinishLaunchingWithOptions:?launchOptions);}}修改Controller代碼
import?UIKit import?Flutter class?ViewController:?UIViewController?{override?func?viewDidLoad()?{super.viewDidLoad()let?button?=?UIButton(type:UIButtonType.custom)...self.view.addSubview(button)}@objc?func?handleButtonAction()?{let?flutterEngine?=?(UIApplication.shared.delegate?as??AppDelegate)?.flutterEngine;let?flutterViewController?=?FlutterViewController(engine:?flutterEngine,?nibName:?nil,?bundle:?nil)!;self.present(flutterViewController,?animated:?true,?completion:?nil)}RUN….
iOS項目集成過程梳理
整個的集成過程其實總得來說是如下三個步驟：
將flutter項目放入原生項目的文件夾下
在podfile中添加podhelper.rb配置
在Xcode的build phases添加"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh"iOS編譯腳本
搜索公眾號程序員小樂回復關鍵字“offer”，獲取算法面試題和答案。
其中podhelper.rb文件位于我們flutter模塊項目的.ios/Flutter/podhelper.rb下，大家查看它的源碼可以發現，它有下面幾個作用：
把Flutter（flutterEngine）和FlutterPluginRegistrant兩個庫用pod給原生項目導入進入
如果flutter項目有用到flutter plugin插件，把插件用pod導入
導入Generated.xcconfig的相關配置信息，在podhelper.rb同級別的目錄下還有一個Generated.xcconfig文件，這個文件在使用flutter create xx、flutter run xxx、flutter packages get命令的時候如果該文件不存在則會生成這個文件。這個文件內容如下：
他記錄了當前flutter sdk的目錄位置，以及版本號，還有項目模塊的目錄位置。這個文件的內容在執行pod install的時候會被寫入到xcode build setting中，在執行完pod install之后，可以在原生項目根目錄使用xcodebuild -showBuildSettings|grep flutter?查看相關的信息。
最后一步就是運行程序，運行程序的時候在Build phase添加了xcode_backend.sh該腳本會使用到上面pod install給xcode build setting設置的那些環境變量，然后找到項目目錄生成AppFramework。
給原生Android項目集成Flutter
Android的文章很多，這里不再詳細描述了
在原生Android項目中添加子模塊，將上面創建的flutter module項目拉取到原生安卓項目中
git?submodule?add?{你的flutter?module的倉庫地址} git?submodule?update在根目錄的settings.gradle中添加如下配置
在原生項目的app目錄下的build.gradle文件中添加Flutter庫的依賴
dependencies?{implementation?project(':flutter') }?????在原生代碼中集成flutter跳轉到flutter頁面
我使用了一個新的Activity進行跳轉。具體可以參看源碼
Button?open?=?findViewById(R.id.openBtn); open.setOnClickListener(new?View.OnClickListener()?{@Overridepublic?void?onClick(View?v)?{Intent?intent?=?new?Intent();intent.setClass(MainActivity.this,?MyFlutterActivity.class);startActivity(intent);} });public?class?MyFlutterActivity?extends?AppCompatActivity?{@Overrideprotected?void?onCreate(Bundle?savedInstanceState)?{super.onCreate(savedInstanceState);setContentView(R.layout.activity_flutter);final?FlutterView?flutterView?=?Flutter.createView(this,getLifecycle(),"route1");final?FrameLayout?layout?=?findViewById(R.id.flutter_container);layout.addView(flutterView);final?FlutterView.FirstFrameListener[]?listeners?=?new?FlutterView.FirstFrameListener[1];listeners[0]?=?new?FlutterView.FirstFrameListener()?{@Overridepublic?void?onFirstFrame()?{layout.setVisibility(View.VISIBLE);}};flutterView.addFirstFrameListener(listeners[0]);} }????Android從原生跳到Flutter模塊的黑屏問題，在網上看到很多說設置透明主題的但是沒有用，后來看到一種先隱藏顯示，等待渲染好第一幀后才顯示flutter頁面的方法。這里要注意一點要在布局中先把flutter的Container布局設置為InVisible狀態，不要使用Gone，用gone的話是不顯示也不渲染，用InVisible不顯示但是會渲染界面占位置，等待渲染完成后再設置為Visible即可。
flutter的版本管理
在我們的開發過程中遇到了一個問題，就是各個開發者使用的flutter sdk版本不一致，導致一些庫無法運行，在網上也遇到有相同問題的人，提出了模仿gradle wrapper來做一個flutter_wrapper的思路。于是我根據自己的需要寫了一個flutter_wrapper的小工具。它的主要作用是統一開發人員的本地flutter環境。
使用說明
在你的項目根目錄中執行命令下載腳本
curl -O https://raw.githubusercontent.com/zakiso/flutterw/master/flutterw && chmod 755 flutterw
下載好腳本后在根目錄中使用
./flutterw init
該命令會收集你當前系統中的flutter版本，并將相關信息寫入flutter_wrapper.properties文件中，團隊中所有成員都會以該版本號做為該項目的標準版本
將flutterw文件和flutter_wrapper.properties文件添加到git中提交到倉庫里
其他成員拉取代碼后在項目中使用flutter命令的地方使用./flutterw代替，如果使用ide請選擇home目錄下對應版本的sdk包
flutterw做了什么？
使用flutterw的時候會獲取當前目錄下的flutter_wrapper.properties文件中的版本號
去用戶的${HOME}/flutter_wrapper/{版本號}/ 目錄下查找是否有該版本sdk
如果沒有該版本sdk會下載下來，然后使用該目錄下的sdk執行命令
注意事項
如果flutter版本是preview的版本是直接使用master的最新代碼來管理的。大家可以查看源碼很簡單，根據自己的需要定制。
項目demo我已經傳到github中：有遇到問題的可以參考項目源碼
https://github.com/zakiso
總結
我們整個項目都是使用git進行管理的，雖然每個開發者都需要安裝flutter環境，但是對于小團隊來說成本并不高，加上flutter_wrapper也保證了版本的一致性。iOS開發者可以在原來的iOS項目中開發flutter的項目，Android開發者可以在原android項目中開發flutter，flutter開發者也可以自己單獨開發flutter項目，這種方式其實對于開發者來說也是很方便的。
歡迎在留言區留下你的觀點，一起討論提高。如果今天的文章讓你有新的啟發，歡迎轉發分享給更多人。歡迎加入程序員小樂技術交流群，在后臺回復“加群”或者“學習”即可。
猜你還想看
阿里、騰訊、百度、華為、京東最新面試題匯集
超實用超牛X！Linux系統內存知識總結！
推薦 33 個 IDEA 最牛配置，寫代碼太爽了！
IDEA 上位？不！Eclipse Theia 1.0 發布！
嘿，你在看嗎？
總結
以上是生活随笔為你收集整理的教你如何使用Flutter和原生App混合开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机专业的校本教材,计算机应用基础校本
- 下一篇： https证书自签名