Flutter最近好像??了瘦真，講真，自己試一下才知道黍瞧，頁(yè)面體驗(yàn)是真的好诸尽，感覺Flutter就是移動(dòng)端的未來(lái)...
創(chuàng)建全新的Flutter項(xiàng)目簡(jiǎn)單，在已有項(xiàng)目上進(jìn)行集成可能得費(fèi)點(diǎn)周章印颤，但是您机，有我的這篇親身實(shí)踐的教程，保你少走彎路年局，一步直達(dá)
關(guān)于配置Flutter環(huán)境际看，還是得煩勞各位自行配置。本文的實(shí)踐前提是
? qding_flutter git:(dev_wuhaiwei) flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel master, v1.2.3-pre.31, on Mac OS X 10.13.6 17G3025, locale zh-Hans-CN)
[?] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[?] iOS toolchain - develop for iOS devices (Xcode 10.1)
[?] Android Studio (version 3.2)
[?] VS Code (version 1.30.2)
[?] Connected device (1 available)
? No issues found!
No issues found!
官方的集成方案
ok,廢話說(shuō)了一通矢否，上開胃甜點(diǎn)仲闽，官方有提供現(xiàn)成的集成方案，
Add Flutter to existing apps
官方教程倒也不麻煩僵朗，建議有興趣的還是跟著官方教程走一遍赖欣，去理解一下。說(shuō)一下這個(gè)集成方案的缺點(diǎn):
- 步驟略繁瑣
- 對(duì)原工程侵入較大验庙，項(xiàng)目里面每個(gè)人都得安裝Flutter環(huán)境顶吮，影響其它開發(fā)同事
-
集成后Xcode編譯速度賊慢，不更改任何代碼粪薛，每次command + R都需要2-4分鐘云矫，這個(gè)真心不能忍.
如圖：
image.png
當(dāng)然，如果你是一個(gè)人開發(fā)并且不介意以上缺點(diǎn)，官方的集成方案非常適合你
鑒于一般情況下大家都不是一個(gè)人在戰(zhàn)斗让禀，官方的集成方案就目前來(lái)看很明顯的拖累整個(gè)team的開發(fā)效率挑社，跨平臺(tái)應(yīng)當(dāng)提高開發(fā)效率，這與初衷不符啊巡揍。尋尋覓覓痛阻，凄凄慘慘戚戚。關(guān)于Flutter的編譯原理咱暫時(shí)也沒有跟多的了解腮敌，咱也不吹阱当，只是知道Flutter sdk的最終編譯結(jié)果是App.framework、Flutter.framework.前者是開發(fā)的Dart代碼糜工，后者是Flutter解析引擎弊添。這就相當(dāng)于有槍有炮，干就完了捌木。
集成Flutter編譯產(chǎn)物
上硬菜..
目前我這邊是這樣處理的油坝，單獨(dú)創(chuàng)建一個(gè)Flutter項(xiàng)目: qdapp-flutter
安卓、iOS的flutter代碼都在這個(gè)里面刨裆。在 qdapp-flutter目錄下進(jìn)行編譯:
1澈圈、 debug模式: 生成debug包 App.framework、Flutter.framework帆啃，debug支持熱重載
? qding_flutter git:(dev_wuhaiwei) flutter build ios --debug
2瞬女、release模式: 生成對(duì)應(yīng)的release包，不支持熱重載努潘，并且xcode打ipa包時(shí)集成的flutter包一定要是 release包
? qding_flutter git:(dev_wuhaiwei) flutter build ios --release
大家可以每次手動(dòng)將 App.framework诽偷、Flutter.framework拖入iOS原生項(xiàng)目中，此非我所欲也疯坤。
讓 qdapp-flutter支持cocoapods豈不更好报慕，說(shuō)干就干，由于我們公司并沒有創(chuàng)建私有repo的傳統(tǒng)贴膘，就沿用了舊習(xí)，只是單純的讓 qdapp-flutter支持cocoapods進(jìn)行更新略号。在qdapp-flutter根目錄下創(chuàng)建了QDFlutterSDK.podspec文件刑峡，文件內(nèi)容如下:
Pod::Spec.new do |s|
s.name = "QDFlutterSDK"
s.version = "1.0.5"
s.summary = "app Flutter模塊兒組件"
s.homepage = "此處放git/gitlab/等地址即可"
s.license = { :type => "MIT", :file => "LICENSE" }
s.author = { "wuhaiwei" => "wuhaiwei0809@163.com" }
s.platform = :ios, "8.0"
s.ios.deployment_target = "8.0"
#我認(rèn)為不創(chuàng)建私有repo的情況下，此處定義source沒有意義玄柠，可忽略
s.source = { :git => "項(xiàng)目在git上的地址.git", :tag => s.version }
# s.source_files = "qding_flutter/.ios/Flutter/*.rb"
#通過(guò)cocoapods只安裝兩個(gè)framework
s.vendored_frameworks = ['qding_flutter/.ios/Flutter/App.framework',
'qding_flutter/.ios/Flutter/engine/Flutter.framework']
end
同時(shí)在根目錄下創(chuàng)建了 LICENSE文件突梦，LICENSE文件內(nèi)容如下:
Copyright (c) 2018-2019 QDFlutterSDK Software Foundation (項(xiàng)目地址)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
至此，qdapp-flutter項(xiàng)目應(yīng)該已經(jīng)支持cocoapods進(jìn)行安裝羽利，如有異常
還請(qǐng)大家自行搜索
接下來(lái)就是在iOS原生項(xiàng)目中修改Podfile文件:
#QDFlutterSDK 組件
# pod 'QDFlutterSDK', :git => "qdapp-flutter 項(xiàng)目私有地址", :tag =>'1.0.0'
# 調(diào)試啟用
pod 'QDFlutterSDK', :git => "qdapp-flutter 項(xiàng)目私有地址.git", :branch => 'dev_wuhaiwei'
然后pod install宫患，順利的話應(yīng)該會(huì)看到兩個(gè)framework已經(jīng)安裝到iOS原生項(xiàng)目中
接下來(lái)就是引用庫(kù)文件了，如何引用還請(qǐng)參考官方文檔这弧，很詳細(xì)娃闲。
如果順利Flutter模塊已經(jīng)可以正常打開虚汛，而且運(yùn)行Xcode與集成Flutter之前沒有任何區(qū)別，對(duì)于非Flutter開發(fā)來(lái)說(shuō)皇帮，這個(gè)集成過(guò)程是無(wú)感知的!
這卷哩，就是它對(duì)我的吸引
值得注意的是，qdapp-flutter工程有更改之后属拾，需要進(jìn)行重新編譯将谊，重新生成對(duì)應(yīng)的.framework，并在iOS原生工程進(jìn)行更新渐白。似有不妥尊浓，有改動(dòng)就這么麻煩還如何debug開發(fā)?
關(guān)于如何進(jìn)行debug開發(fā)
常理來(lái)說(shuō)，集成了.framework之后就沒辦法進(jìn)行debug開發(fā)纯衍，更別提熱重載
方式一
1栋齿、先在Xcode中連上iPhone，command+R托酸，打開flutter頁(yè)面
2褒颈、打開Android Studio,不能運(yùn)行，在終端中執(zhí)行
? qding_flutter git:(dev_wuhaiwei) flutter attach
如圖:
有些情況下方式一無(wú)效励堡，所以方式二來(lái)了谷丸。
方式二
1、先在Xcode中連上iPhone应结，command+R刨疼，打開flutter頁(yè)面
此時(shí)在Xcode的控制臺(tái)里面會(huì)打印
2019-04-02 17:44:33.596805+0800 qding[4349:1205008] flutter: Observatory listening on http://127.0.0.1:64108/
記錄控制臺(tái)中的端口號(hào)，例如我的是:64108
2鹅龄、打開Android Studio,不能運(yùn)行揩慕，在終端中執(zhí)行
? qding_flutter git:(dev_wuhaiwei) ? flutter attach --debug-port=64108
很明顯，終于連上了
根據(jù)提示扮休，更改dart代碼迎卤，輸入“R”,愉快的進(jìn)行熱重載開發(fā)吧
關(guān)于debug過(guò)程中的一些異常
1、昨天熱重載的好好的玷坠，睡了一覺到公司熱重載嗝屁了蜗搔，報(bào)錯(cuò):
Error connecting to the service protocol: HttpException: , uri = http://127.0.0.1:1024/ws
stackover flow上有跟我一樣的問題，睡了一覺八堡，flutter就掛了樟凄，對(duì)我來(lái)說(shuō)有用的解決方案在這里:
https://github.com/flutter/flutter/issues/25112#issuecomment-455410536
關(guān)閉手機(jī)wifi，用4G網(wǎng)絡(luò)就好了兄渺。據(jù)說(shuō)是Flutter 熱重載的bug缝龄。
2、今天切換了一下flutter分支，從master切換到stable分支之后報(bào)錯(cuò)如下:
? qding_flutter git:(dev_wuhaiwei) ? flutter build ios --debug
Building com.qianding.flutter for device (ios)...
Automatically signing iOS for device deployment using specified
development team in Xcode project: 6232V88552
├─Assembling Flutter resources... 1.6s └─Compiling, linking and signing... 0.6s Xcode build done. 4.3s Failed to build iOS app Error output from Xcode build:
?
** BUILD FAILED **
Xcode's output:
?
=== BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION
Debug ===
fatal error: lipo: -extract arm64 specified but fat file:
/Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/D
ebug-iphoneos/Runner.app/Frameworks/Flutter.framework/Flutter
does not contain that architecture
Failed to extract arm64 for
/Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/D
ebug-iphoneos/Runner.app/Frameworks/Flutter.framework/Flutter.
Running lipo -info:
Architectures in the fat file:
/Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/D
ebug-iphoneos/Runner.app/Frameworks/Flutter.framework/Flutter
are: armv7
Encountered error while building for device.
上面的信息表明叔壤，fat library里面需要包含 arm64架構(gòu)的包瞎饲，目前沒有，里面只是armv7的包百新，驗(yàn)證如下:
? qding_flutter git:(dev_wuhaiwei) ? lipo -info /Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/Debug-iphoneos/Runner.app/Frameworks/Flutter.framework/Flutter
Architectures in the fat file: /Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/Debug-iphoneos/Runner.app/Frameworks/Flutter.framework/Flutter are: armv7
很明顯是Runner里面的設(shè)置問題企软，它要arm64,給她就是嘍。修改設(shè)置如下:
重新編譯debug包
? qding_flutter git:(dev_wuhaiwei) ? flutter build ios --debug
Building com.qianding.flutter for device (ios)...
Automatically signing iOS for device deployment using specified
development team in Xcode project: 6232V88552
Running Xcode build... ├─Assembling Flutter resources... 1.5s
└─Compiling, linking and signing... 3.3s
Xcode build done. 6.3s
Built
/Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/iphon
eos/Runner.app.
編譯通過(guò)饭望。
檢測(cè)如下:
? qding_flutter git:(dev_wuhaiwei) ? lipo -info /Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/Debug-iphoneos/Runner.app/Frameworks/Flutter.framework/Flutter
Architectures in the fat file: /Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/Debug-iphoneos/Runner.app/Frameworks/Flutter.framework/Flutter are: x86_64 armv7 arm64
已經(jīng)包含了arm64包
3仗哨、偶爾編譯的時(shí)候報(bào)錯(cuò):
? qding_flutter git:(dev_wuhaiwei) ? flutter build ios --debug
Building com.qding.flutter for device (ios)...
Automatically signing iOS for device deployment using specified development team in Xcode project:
6232V88552
├─Assembling Flutter resources... 1.5s └─Compiling, linking and signing... 1.6s Xcode build done. 5.2s
Failed to build iOS app
Error output from Xcode build:
?
** BUILD FAILED **
Xcode's output:
?
=== BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug ===
Non-fat binary
/Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/Debug-iphoneos/Runner.app/Framework
s/App.framework/App is not armv7. Running lipo -info:
Non-fat file:
/Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/Debug-iphoneos/Runner.app/Framework
s/App.framework/App is architecture: arm64
Command /bin/sh failed with exit code 1
意思就是說(shuō)在目錄 下面目錄中的App.framework缺少armv7的二進(jìn)制包
/Users/wuhaiwei/Desktop/qdapp-flutter/qding_flutter/build/ios/Debug-iphoneos
重新編譯不行，無(wú)法覆蓋铅辞，我刪除了上面目錄下的Runner.app文件厌漂，重新編譯，搞定斟珊。
4苇倡、關(guān)于如何打斷點(diǎn)
我這邊嘗試在android studio里面打斷點(diǎn)、print(), debugPrint()囤踩，統(tǒng)統(tǒng)都不管用, logcat里面根本找不到iOS的模擬器旨椒，然而又需要iOS的模擬器或者真機(jī)進(jìn)行交互聯(lián)調(diào)，很苦惱堵漱。一個(gè)安卓同事提醒:你在你們xcode里面看看有沒有打印综慎，果然打印數(shù)據(jù)出現(xiàn)在了xcode里面，納尼??
接下來(lái)一起愉快的寫B(tài)ug吧
