一、Flutter简单介绍
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
在这里不对Flutter过多介绍。
如果你想安装Flutter或想了解更多Flutter相关信息可关注以下网址:
Flutter官方 https://flutter.io/
Flutter中文网 https://flutterchina.club/
二、分析Flutter Xcode项目
1、创建Flutter项目
当安装完成Flutter环境后,我们在终端下使用"flutter create flutter_app"命令来创建一个名为"flutter_app"的项目来一起分析一下flutter的目录
2、分析iOS运行所需内容
1.我们首先运行一下看看项目有没有问题。首先打开iOS模拟器,终端进入flutter_app目录下,我们执行"flutter run"命令运行项目,可以看到一个计数器的项目启动起来了。我们直接打开flutter_app目录下的ios文件夹里面是一个xcode项目,直接打开Runner.xcworkspace项目结构如下:
2.Flutter目录
Flutter目录中主要用到的是flutter_assets、App.framework、Flutter.framework这三个文件。
目录 | 说明 |
---|---|
flutter_assets | 项目资源文件(图片、字体等)都会存放在这个目录下 |
App.framework | 所有Flutter代码都会编译进这个库文件 |
Flutter.framework | Flutter运行所需库文件 |
注:App.framework和Flutter.framework在debug、release模式下会有所不同,后面我们需要在debug和release下分别取出相应的库文件
3.分析AppDelegate
1.AppDelegate.h 引入 #import <Flutter/Flutter.h> 并继承 FlutterAppDelegate
2.AppDelegate.m 引入 #include "GeneratedPluginRegistrant.h" 文件并在didFinishLaunchingWithOptions方法中调用了
[GeneratedPluginRegistrant registerWithRegistry:self];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
3.GeneratedPluginRegistrant文件, 这个文件是用来注册用到的Flutter插件的,因为这里是新建项目并没有引入任何插件,所以registerWithRegistry方法为空。如果Flutter项目引入其他插件会在flutter_app目录下生成一个.flutter-plugins的隐藏文件里面会包括插件名称和对应路径,GeneratedPluginRegistrant.m文件也会有所变化。如下图
4.rootViewController
我们打开Main.storyboard文件发现是有一个叫做FlutterViewController的viewController。通过查阅文档,可以通过以下代码跳转
FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
//设置路由页面
//[flutterViewController setInitialRoute:@"route1"];
[self presentViewController:flutterViewController animated:false completion:nil];
三、总结步骤
通过步骤二,我们需要flutter_assets、App.framework、Flutter.framework还要将插件引入并继承FlutterAppDelegate然后使用FlutterViewController跳转
四、编写shell编译并获取iOS运行所需文件
1、在flutter_app目录下执行"flutter build ios debug"、"flutter build ios release"可以编译并得到debug/release相对应的App.framework、Flutter.framework,然后我们利用.flutter-plugins引入所有插件,导入flutter_assets文件,最后制作一个Flutter.podspec文件以便引入pod中
2、实现代码
1.将Flutter.podspec、flutter-ios.sh放入flutter_app目录下,运行flutter-ios.sh脚本便会flutter_app/build/flutter-ios/下生成debug和release对应的文件,使用pod。
2.将flutter-ios目录拷贝到项目目录下使用Podfile引入
3.1AppDelegate继承FlutterAppDelegate
3.2导入GeneratedPluginRegistrant并注册插件
3.3使用FlutterViewController显示Flutter
#将代码保存到flutter_app目录下命名为Flutter.podspec
#
# NOTE: This podspec is NOT to be published. It is only used as a local source!
#
Pod::Spec.new do |s|
s.name = 'Flutter'
s.version = '1.0.0'
s.summary = 'High-performance, high-fidelity mobile apps.'
s.description = <<-DESC
Flutter provides an easy and productive way to build and deploy high-performance mobile apps for Android and iOS.
DESC
s.homepage = 'https://flutter.io'
s.license = { :type => 'MIT' }
s.author = { 'Flutter Dev Team' => 'meng1711@sina.com' }
s.source = { :git => 'https://github.com/flutter/engine', :tag => s.version.to_s }
s.ios.deployment_target = '7.0'
s.vendored_frameworks = 'Flutter.framework', 'App.framework'
s.resources = 'flutter_assets'
s.source_files = '*.{h,m}'
s.public_header_files = '*.h'
end
#!/bin/sh
#将代码保存到flutter_app目录下命名为flutter-ios.sh
function echoError() {
echo '\033[31mError:'$1'\033[0m'
}
function echoGreen() {
echo '\033[32m'$1'\033[0m'
}
#debug/release
function buildFlutter() {
mode='release'
if [ $# = 1 ] ; then
mode=$1
fi
buildRoot='build/flutter-ios/'
buildPath=$buildRoot$mode'-iphoneos/'
buildRootPlugins=$buildRoot'plugins/'
rm -rf $buildPath
mkdir -p $buildPath
#编译flutter
echoGreen 'flutter build ios --'$mode
flutter build ios --$mode
#加载Flutter.framework
flutterFramework='ios/Flutter/Flutter.framework'
if [ ! -d $flutterFramework ]; then
echoError 'Flutter.framework不存在'
exit 0
else
echoGreen '加载Flutter.framework'
cp -r $flutterFramework $buildPath
fi
#加载App.framework
appFramework='ios/Flutter/App.framework'
if [ ! -d $appFramework ]; then
echoError 'App.framework不存在'
exit 0
else
echoGreen '加载App.framework'
cp -r $appFramework $buildPath
fi
########################################
#加载plugins
if [ ! -d $buildRootPlugins ]; then
mkdir -p $buildRootPlugins
flutterPlugins='.flutter-plugins'
if [ -f $flutterPlugins ]; then
while read line
do
array=(${line//=/ })
pluginPath=$buildRootPlugins${array[0]}
mkdir -p $pluginPath
cp -r ${array[1]}'/ios/.' $pluginPath
done < $flutterPlugins
fi
fi
echoGreen '加载plugins'
ln -fs '../plugins' $buildPath'plugins'
#注册文件
if [ ! -f $buildRoot'GeneratedPluginRegistrant.h' ]; then
flutterPluginsRegistrant='ios/Runner/GeneratedPluginRegistrant'
if [ -f $flutterPluginsRegistrant'.h' ]; then
cp -r $flutterPluginsRegistrant'.h' $buildRoot
cp -r $flutterPluginsRegistrant'.m' $buildRoot
fi
fi
ln -fs '../GeneratedPluginRegistrant.h' $buildPath'GeneratedPluginRegistrant.h'
ln -fs '../GeneratedPluginRegistrant.m' $buildPath'GeneratedPluginRegistrant.m'
#加载flutter_assets
if [ ! -d $buildRoot'flutter_assets' ]; then
flutterAssets='ios/Flutter/flutter_assets'
if [ -d $flutterAssets ]; then
cp -r $flutterAssets $buildRoot
fi
fi
echoGreen '加载flutter_assets'
ln -fs '../flutter_assets' $buildPath'flutter_assets'
#复制Flutter.podspec
if [ ! -f $buildRoot'Flutter.podspec' ]; then
flutterPodspec='Flutter.podspec'
if [ -f $flutterPodspec ]; then
cp -r $flutterPodspec $buildRoot
fi
fi
echoGreen '加载Flutter.podspec'
ln -fs '../Flutter.podspec' $buildPath'Flutter.podspec'
}
start=$(date +%s)
#编译
rm -rf 'build/flutter-ios/'
mkdir -p 'build/flutter-ios/'
buildFlutter debug
buildFlutter release
end=$(date +%s)
echo '^v^制作完成,耗时:'$(( $end - $start ))'s'
# Uncomment the next line to define a global platform for your project
# platform :ios, ‘9.0’
# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
#Flutter model: debug/release
def podFlutter(mode)
flutterPath = 'flutter-ios/' + mode + '-iphoneos/'
pod 'Flutter', :path => flutterPath
pluginsPath = 'flutter-ios/' + mode + '-iphoneos/plugins/'
if File.directory?(pluginsPath)
Dir.foreach(pluginsPath) do |fileName|
if fileName != '.' and fileName != '..' and fileName != '.DS_Store'
pod fileName, :path => pluginsPath + fileName
end
end
end
end
target 'demo' do
podFlutter('debug')
end
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['ENABLE_BITCODE'] = 'NO'
end
end
end
本文只是探索了一种使用pod库来导入Flutter项目代码的方法,如果大家有更换好方法或建议欢迎留言
项目有些大就不传了,有不明白的可以留言或私信
晚安~