这一步是基于系统Flutter环境已经搭建的前提下。
刚接触,正在摸索阶段,有不好的地方,欢迎指教!
环境:macOS Mojave 10.14.5
Xcode 10.2.1
参考:https://segmentfault.com/a/1190000018804821?utm_source=tag-newest(在原生ios项目中集成flutter)
内容如下:创建+配置项目,达到如下效果:
![](https://img.haomeiwen.com/i3519106/3301473707398807.gif)
步骤如下:
一、创建工程项目
二、创建Flutter模块
三、调用
一、创建工程项目
这一步比较简单,做过iOS开发都很熟悉
新建工程:
![](https://img.haomeiwen.com/i3519106/1f5eb4b03923c63a.png)
![](https://img.haomeiwen.com/i3519106/831e15b1436b51a8.png)
![](https://img.haomeiwen.com/i3519106/d209d959dc697de9.png)
![](https://img.haomeiwen.com/i3519106/712d1671ce7c9ef4.png)
![](https://img.haomeiwen.com/i3519106/71296a766c1b9c33.png)
![](https://img.haomeiwen.com/i3519106/5f9094f2e9629b87.png)
二、创建Flutter模块
打开终端,cd进去项目文件中
使用flutter自带命令创建一个flutter模块项目
flutter create-t module my_flutter
![](https://img.haomeiwen.com/i3519106/ca3658847a7cbf4c.png)
![](https://img.haomeiwen.com/i3519106/b6377e882ffa56e3.png)
同样,cd在当前目录
pod init
![](https://img.haomeiwen.com/i3519106/2a45b98dde4b8500.png)
编辑Podfile,以便将flutter包括在里面(注意核对路径对不对)
platform :ios, '9.0'
target 'myproject' do
end
#新添加的代码
flutter_application_path = './'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
运行pod安装
pod install
![](https://img.haomeiwen.com/i3519106/ffe86c38f7ab7395.png)
关闭项目,使用pod新创建的文件myproject.xcworkspace打开
![](https://img.haomeiwen.com/i3519106/fee4dc10c5ced4ca.png)
若是编译报错:
ld: '/SourceCode/myproject/myproject/DerivedData/myproject/Build/Products/Debug-iphoneos/FlutterPluginRegistrant/libFlutterPluginRegistrant.a(GeneratedPluginRegistrant.o)' does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated library from the vendor, or disable bitcode for this target. file '/SourceCode/myproject/myproject/DerivedData/myproject/Build/Products/Debug-iphoneos/FlutterPluginRegistrant/libFlutterPluginRegistrant.a' forarchitecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
使用修改下图解决:
![](https://img.haomeiwen.com/i3519106/1226db78d7a5dc20.png)
三、调用
在上面步骤一按钮关联的方法中添加代码:
- (IBAction)srart:(id)sender
![](https://img.haomeiwen.com/i3519106/f650835a815d138e.png)
运行代码,点击“启动”按钮,进入空白页面
![](https://img.haomeiwen.com/i3519106/578610e4e8a76d8b.png)
日志报错:
![](https://img.haomeiwen.com/i3519106/8e5741d9e1edecb0.png)
第一个错误
![](https://img.haomeiwen.com/i3519106/caae9cb7221a31cc.png)
解决办法:
![](https://img.haomeiwen.com/i3519106/775beabc4727abb0.png)
另外的问题(PS:这个花了我多了点点时间)
2019-07-08 19:25:11.734547+0800 myproject[5642:673211] [VERBOSE-1:callback_cache.cc(132)] Could not parse callback cache, aborting restore
2019-07-08 19:25:14.449479+0800 myproject[5642:673211] Failed to find assets path for "Frameworks/App.framework/flutter_assets"
2019-07-08 19:25:14.552308+0800 myproject[5642:673274] [VERBOSE-2:engine.cc(115)] Engine run configuration was invalid.
2019-07-08 19:25:14.552336+0800 myproject[5642:673274] [VERBOSE-2:FlutterEngine.mm(304)] Could not launch engine with configuration.
2019-07-08 19:25:14.580422+0800 myproject[5642:673281] flutter: Observatory listening on http://127.0.0.1:59755/47Ovn9gwZYo=/
项目中缺少了文件,所以找到对应的文件,引用过来。拖过去即可
![](https://img.haomeiwen.com/i3519106/fbfef32088c59883.png)
(1) Debug.xcconfig、Flutter.xcconfig、Release.xcconfig文件获取位置:项目文件->my_flutter->.ios(隐藏文件)->Config文件夹里面
(2) App.framework文件获取位置:. 项目文件->my_flutter->.ios(隐藏文件)-> Flutter文件夹里面
(3) Flutter.framework文件获取位置:. 项目文件->my_flutter->.ios(隐藏文件)-> Flutter-> engine文件夹里面
(4) Generated.xcconfig文件获取位置:. 项目文件->my_flutter->.ios(隐藏文件)-> Flutter文件夹里面
App.framework文件会找不到,请做如下配置:
![](https://img.haomeiwen.com/i3519106/1a07b28cb8e346f7.png)
![](https://img.haomeiwen.com/i3519106/951491482d1d7b9a.png)
# Type a script or drag a script file from your workspace to insert its path.
# Type a script or drag a script file from your workspace to insert its path.
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
再次运行APP,App.framework便会生成在上述(2)的位置中
将文件引用添加入项目中:
![](https://img.haomeiwen.com/i3519106/c9d9968ffedb9825.png)
再次运行项目,点击“启动”,便可看到效果
![](https://img.haomeiwen.com/i3519106/c0efcf4a3e710431.png)
以上便是这次学习记录过程,继续研究学习中…
网友评论