混沌初始，iOS现有项目集成Flutter

2019-03-29 本文已影响1人 C_HPY

Flutter最近好像🔥了，讲真，自己试一下才知道，页面体验是真的好，感觉Flutter就是移动端的未来...
创建全新的Flutter项目简单，在已有项目上进行集成可能得费点周章，但是，有我的这篇亲身实践的教程，保你少走弯路，一步直达
关于配置Flutter环境，下载Flutter sdk的东西，还是得烦劳各位看官自行google，科学上网，科学下载。本文的实践前提是

➜  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!

google的集成方案

ok,废话说了一通，上开胃甜点，官方有提供现成的集成方案，
Add Flutter to existing apps
官方教程倒也不麻烦，建议有兴趣的还是跟着官方教程走一遍，去理解一下。说一下这个集成方案的缺点:

步骤略繁琐
对原工程侵入较大，项目里面每个人都得安装Flutter环境，影响其它开发同事
集成后Xcode编译速度贼慢，不更改任何代码，每次command + R都需要2-4分钟，这个真心不能忍.
如图：

image.png

当然，如果你是一个人开发并且不介意以上缺点，官方的集成方案非常适合你
鉴于一般情况下大家都不是一个人在战斗，官方的集成方案就目前来看很明显的拖累整个team的开发效率，跨平台应当提高开发效率，这与初衷不符啊。寻寻觅觅，凄凄惨惨戚戚。关于Flutter的编译原理咱暂时也没有跟多的了解，咱也不吹，只是知道Flutter sdk的最终编译结果是App.framework、Flutter.framework.前者是开发的Dart代码，后者是Flutter解析引擎。这就相当于有枪有炮，干就完了。

集成Flutter编译产物

上硬菜..
目前我这边是这样处理的，单独创建一个Flutter项目: qdapp-flutter
安卓、iOS的flutter代码都在这个里面。在 qdapp-flutter目录下进行编译:
1、 debug模式: 生成debug包 App.framework、Flutter.framework，debug支持热重载

➜  qding_flutter git:(dev_wuhaiwei) flutter build ios --debug

2、release模式: 生成对应的release包，不支持热重载，并且xcode打ipa包时集成的flutter包一定要是 release包

➜  qding_flutter git:(dev_wuhaiwei) flutter build ios --release

大家可以每次手动将 App.framework、Flutter.framework拖入iOS原生项目中，此非我所欲也。
让 qdapp-flutter支持cocoapods岂不更好，说干就干，由于我们公司并没有创建私有repo的传统，就沿用了旧习，只是单纯的让 qdapp-flutter支持cocoapods进行更新。在qdapp-flutter根目录下创建了QDFlutterSDK.podspec文件，文件内容如下:


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"
#我认为不创建私有repo的情况下，此处定义source没有意义，可忽略
s.source       = { :git => "项目在git上的地址.git", :tag => s.version }
# s.source_files = "qding_flutter/.ios/Flutter/*.rb"
#通过cocoapods只安装两个framework
s.vendored_frameworks = ['qding_flutter/.ios/Flutter/App.framework',
'qding_flutter/.ios/Flutter/engine/Flutter.framework']
end

同时在根目录下创建了 LICENSE文件，LICENSE文件内容如下:

Copyright (c) 2018-2019 QDFlutterSDK Software Foundation (项目地址)
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项目应该已经支持cocoapods进行安装，如有异常
还请大家自行google
接下来就是在iOS原生项目中修改Podfile文件:

  #QDFlutterSDK 组件
# pod 'QDFlutterSDK', :git => "qdapp-flutter 项目私有地址", :tag =>'1.0.0' 
# 调试启用
  pod 'QDFlutterSDK', :git => "qdapp-flutter 项目私有地址.git", :branch => 'dev_wuhaiwei'

然后pod install，顺利的话应该会看到两个framework已经安装到iOS原生项目中

image.png
接下来就是引用库文件了，如何引用还请参考官方文档，很详细。
如果顺利Flutter模块已经可以正常打开，而且运行Xcode与集成Flutter之前没有任何区别，对于非Flutter开发来说，这个集成过程是无感知的!
这，就是它对我的吸引
值得注意的是，qdapp-flutter工程有更改之后，需要进行重新编译，重新生成对应的.framework，并在iOS原生工程进行更新。似有不妥，有改动就这么麻烦还如何debug开发?

关于如何进行debug开发

常理来说，集成了.framework之后就没办法进行debug开发，更别提热重载，然而google仍旧是google，有戏。
1、先在Xcode中连上iPhone，command+R，打开flutter页面
2、打开Android Studio,不能运行，在终端中执行

➜  qding_flutter git:(dev_wuhaiwei) flutter attach

如图:

image.png

根据提示，更改dart代码，输入“R”,愉快的进行热重载开发吧
关于debug过程中的异常，昨天热重载的好好的，睡了一觉到公司热重载嗝屁了，报错:

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

stackover flow上有跟我一样的问题，睡了一觉，flutter就挂了，对我来说有用的解决方案在这里:
https://github.com/flutter/flutter/issues/25112#issuecomment-455410536
关闭手机wifi，用4G网络就好了。据说是Flutter 热重载的bug。
接下来一起愉快的写Bug吧

混沌初始，iOS现有项目集成Flutter

google的集成方案

集成Flutter编译产物

关于如何进行debug开发

猜你喜欢

热点阅读