Mac 开发flutter的iOS APP 之 Flutter集

2019-08-15 本文已影响1人 Auditore

1.下载flutter的SDK

https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.7.8+hotfix.4-stable.zip

2.设置环境变量，前往 ~/.bash_profile，然后设置环境变量

FLUTTER_STORAGE_BASE_URL  https://storage.flutter-io.cn
PUB_HOSTED_URL   https://pub.flutter-io.cn  
export PATH="$PATH:/Users/liudj/Documents/softwareVim/arcanist/bin/"
export PY3PATH=/usr/local/bin/python3 
export FLUTTERPATH=/Users/liudj/Documents/flutter/bin
export PATH=$PATH:$PY3PATH:$FLUTTERPATH
#多条path通过:符号进行拼接

source ~/.bash_profile #修改完以后刷新环境变量

这时候flutter应该就能运行命令了

flutter -h

3.检查环境

flutter doctor

根据检测结果

image

可以看到缺少了iOS tools

根据提示继续输入命令

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller

这时候你会发现各种报错，基本都是提示缺少user/local文件夹权限的，这时候，你打开finder，shift+command+G 打开前往功能，然后输入user/local跳转过去，如果文件夹被隐藏，shift+command+. 打开隐藏。然后你自己新建那些没有权限的文件夹，再重新安装对应的工具就行了，命令一般是brew reinstall XXX这种格式。

Android studio也要安装，安装完以后，如果你有代理工具，最好给Android studio设置一下，因为要安装plugins。如果你是shadowsocks，代理地址就是127.0.0.1:1087，设置完，进入Android studio的preference，搜一下proxy，然后设置好代理，重启AS（代称Android studio）。重启以后进入preference的plugins，搜索flutter，然后安装这个插件，装完重启。这时候你再输入终端命令，flutter doctor，如果报错说Android license的问题，请输入
flutter doctor --android-licenses，如果报错-21，这时候需要进行重新如下命令

sudo chmod -R 777 /var/db/lockdown
brew update
brew uninstall --ignore-dependencies libimobiledevice
brew uninstall --ignore-dependencies usbmuxd
brew install --HEAD usbmuxd
brew unlink usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
flutter doctor （检测是否成功）

PS.如果感觉dart安装太慢了，请设置.bash_profile文件中的PATH环境变量

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

将上面两个路径加入到PATH中，可解决dart下载慢的问题，其实是被墙了。谷歌emmm

4.用AS创建一个iOS flutter application

https://flutterchina.club/get-started/test-drive/#create-app
创建好工程以后，你就可以用Android来构建一个可运行与iOS设备上的APP了。这种是全新的一个flutter app，如果要iOS和flutter混编，需要接下去的操作。

可能你很好奇，怎么flutter项目能在iOS设备或者模拟器上跑，这不科学啊，其实非常简单，这个所谓的flutter application项目，就是个混编的xcode project!

证据，当然就是这个Android studio创建出来的flutter application工程，其实里面还包含了iOS工程！路径就在flutter application下的iOS目录里，例如/Users/liudj/AndroidStudioProjects/flutter_app/ios/Runner.xcodeproj，这是我折腾了一下午flutter 混编后的副产物...唉，都是泪。

所以这就是个套壳的xcode工程，那就一点都不神奇了，本质上，Android生成的flutter application在编译安卓app的时候，就用对应的安卓工程，编译iOSAPP就用对应的iOS工程，共同点就是他们都引用了flutter framework。iOS 旧项目混编flutter就是，要自己手动完成Android studio上创建flutter project的过程。

5.iOS项目混编flutter

这是我验证过靠谱的混编攻略，但是步骤不够详细，我亲自试验后，补充了一些，见下方步骤

创建一个工程，然后关闭bitcode
flutter module(就是一些flutter的framework和资源，叫啥随你)
切换分支flutter channel master（尽量切换一下吧）
cd /Users/houjianan/flutter
flutter channel master

期间可能需要安装dart SDK，需要开启全局代理下载，或者修改环境变量参照第3步的ps内容
```
brew tap dart-lang/dart
brew install dart
```
然后需要做的就很简单了,cd进入.xcodeproj所在的目录，然后终端执行下面命令，创建flutter module
flutter channel master
flutter create -t module flutter_library
结果如下

JeroldMac:~ liudj $cd /Users/liudj/Desktop/笔记/私人笔记/个人Demo/FlutterApp JeroldMac:FlutterApp liudj$ flutter create -t module flutter_module
Creating project flutter_module...
flutter_module/test/widget_test.dart (created)
flutter_module/flutter_module.iml (created)
flutter_module/.gitignore (created)
flutter_module/.metadata (created)
flutter_module/pubspec.yaml (created)
flutter_module/README.md (created)
flutter_module/lib/main.dart (created)
flutter_module/flutter_module_android.iml (created)
flutter_module/.idea/libraries/Flutter_for_Android.xml (created)
flutter_module/.idea/libraries/Dart_SDK.xml (created)
flutter_module/.idea/modules.xml (created)
flutter_module/.idea/workspace.xml (created)
Running "flutter pub get" in flutter_module... 2.6s
Wrote 12 files.

All done!
Your module code is in flutter_module/lib/main.dart.
JeroldMac:FlutterApp liudj$

pod的方式添加flutter，如下链接我试过，然而没成功，你可以自己试试。
http://tryenough.com/flutter03

接着讲，一步步来。

新建一个flutter文件夹，用来放等会生成的config和framework等文件
Run Script处添加一行脚本"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

image
Config文件
config文件，当你通过flutter create -t module flutter_library命令行创建module以后，它就在下图位置

image
将它们copy到我们新建的Flutter文件夹内
还需要配置一下，打开我们的demo工程，按下图步骤配置
image
这三个config文件里的内容如下
1.Debug.xcconfig
#include "../Flutter/Flutter.xcconfig"
2.Flutter.xcconfig
```
#include "../flutter_library/.ios/Flutter/Generated.xcconfig"
ENABLE_BITCODE=NO
```
3.Release.xcconfig
```
#include "../Flutter/Flutter.xcconfig"
FLUTTER_BUILD_MODE=release
```
cmd + B build工程，生成framework
刚刚我们已经创建了flutter_library，接下去我们建个文件夹，然后把那些用得上的framework和资源copy进去，有三个东西是必须的，app.framework、flutter_assets、 Flutter.framework。

image
可能有人要问，这三个文件哪来的，其实就是刚刚用flutter create -t module flutter_library命令行创建的flutter_library文件夹里，如下图

image
engine文件夹里面是flutter.framework，app.framework我们看到了，那么flutter_assets在哪？它就在App.framework里面。OK，全部copy到我们刚新建的Flutter文件夹下。
一起copy到我们新建的Flutter文件夹下。最后文件夹下内容有如下东西：
image
然后把Flutter文件夹内的文件拖入工程，注意添加flutter_assets目录时，选择 Create forlder references ，不能不然会出问题，然后，然后如下图embed framework
image
下图就是最终Demo内的Framework状态
image
结束了吗？并没有，只要我们还没有真正的将工程跑起来，都不算完。接下去我们要真正的引用Flutter了，demo所以我选择在默认的viewcontroller里实验
```
    //
  //  ViewController.m
  //  FlutterDemo
  //
  //  Created by jer on 2019/8/15.
  //  Copyright © 2019 liudj. All rights reserved.
  //
  
  #import "ViewController.h"
  #import <Flutter/Flutter.h>
  
  @interface ViewController ()
  
  @end
  
  @implementation ViewController
  
  - (void)viewDidLoad {
      [super viewDidLoad];
      // Do any additional setup after loading the view.
      [self.view setBackgroundColor:[UIColor orangeColor]];
      UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
      [button addTarget:self action:@selector(handleButtonAction) forControlEvents:UIControlEventTouchUpInside];
      [button setTitle:@"Press me" forState:UIControlStateNormal];
      [button setBackgroundColor:[UIColor blueColor]];
      button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
      [self.view addSubview:button];
  }
  
  - (void)handleButtonAction {
      FlutterViewController* flutterViewController = [[FlutterViewController alloc] init]; flutterViewController.view.frame = [UIScreen mainScreen].bounds;//
      [flutterViewController setInitialRoute:@"route1"];//如果设置了router，可以到不同的页面
      [self presentViewController:flutterViewController animated:NO completion:nil];}
  @end
```
满怀期待Run一下工程，emmm，报错了，看上去是证书错误，这时候打开你的钥匙串，删掉那些无用的证书，继续一次，OK了。终于成了，我是在模拟器上运行的。前后花费了一天左右时间，来做混编，真的太蛋疼了，Flutter希望后续能完善cocoapods方式的引用，就不用这么麻烦了。至此，整个flutter嵌入工作都已经完成，接下去就是愉快地写代码了~