混沌初始，iOS現(xiàn)有項(xiàng)目集成Flutter

Flutter最近好像??了，講真，自己試一下才知道，頁(yè)面體驗(yàn)是真的好，感覺Flutter就是移動(dòng)端的未來...
創(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,廢話說了一通，上開胃甜點(diǎn)，官方有提供現(xiàn)成的集成方案，
Add Flutter to existing apps
官方教程倒也不麻煩，建議有興趣的還是跟著官方教程走一遍，去理解一下。說一下這個(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)斗，官方的集成方案就目前來看很明顯的拖累整個(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豈不更好，說干就干，由于我們公司并沒有創(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"
#通過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)大家自行搜索
接下來就是在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)目中

image.png

接下來就是引用庫(kù)文件了，如何引用還請(qǐng)參考官方文檔，很詳細(xì)。
如果順利Flutter模塊已經(jīng)可以正常打開，而且運(yùn)行Xcode與集成Flutter之前沒有任何區(qū)別，對(duì)于非Flutter開發(fā)來說，這個(gè)集成過程是無(wú)感知的!
這，就是它對(duì)我的吸引
值得注意的是，qdapp-flutter工程有更改之后，需要進(jìn)行重新編譯，重新生成對(duì)應(yīng)的.framework，并在iOS原生工程進(jìn)行更新。似有不妥，有改動(dòng)就這么麻煩還如何debug開發(fā)?

關(guān)于如何進(jìn)行debug開發(fā)

常理來說，集成了.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

如圖:


image.png

有些情況下方式一無(wú)效，所以方式二來了。

方式二

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

很明顯，終于連上了


image.png

根據(jù)提示，更改dart代碼，輸入“R”,愉快的進(jìn)行熱重載開發(fā)吧

關(guān)于debug過程中的一些異常

1、昨天熱重載的好好的，睡了一覺到公司熱重載嗝屁了，報(bào)錯(cuò):

Error connecting to the service protocol: HttpException: , uri = http://127.0.0.1:1024/ws

stackover flow上有跟我一樣的問題，睡了一覺，flutter就掛了，對(duì)我來說有用的解決方案在這里:
https://github.com/flutter/flutter/issues/25112#issuecomment-455410536
關(guān)閉手機(jī)wifi，用4G網(wǎng)絡(luò)就好了。據(jù)說是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è)置如下:


image.png

重新編譯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.

編譯通過。
檢測(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

意思就是說在目錄 下面目錄中的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里面，納尼??

接下來一起愉快的寫B(tài)ug吧

最后編輯于 ：
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

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