ios Flutter混合开发 FlutterBoost最新接入流程

一.Flutter环境搭建

网上有很多教程,这里不讲。注:本文使用AS做为开发工具。

二.创建Flutter module

在和原生工程同目录下,使用命令行新建Flutter module


flutter create-t module flutter_module

三.接入FlutterBoost

3.1.使用AS打开刚才创建的工程,在pubspec.yaml中加入FlutterBoost的依赖。注意对齐格式。

  flutter_boost:
    git:
      url: 'https://github.com/alibaba/flutter_boost.git'
      ref: 'v1.12.13-hotfixes'

3.2.在当前目录命令行运行:flutter packages get

3.3.修改Flutter的main.dart代码

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:flutter/services.dart';
const EventChannel eventChannel = const EventChannel("example.flutter.io/nativeCallFlutter");
const MethodChannel platform = const MethodChannel("example.flutter.io/flutterCallNative");

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    print('MyApp_initState');
    FlutterBoost.singleton.registerPageBuilders(
          "text": (pageName, params, _)=> TestPage(),
      );
  }

  @override
  Widget build(BuildContext context) {
    print('MyApp_build');
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Boost example',
        builder: FlutterBoost.init(postPush: _onRoutePushed),
        onGenerateRoute: onGenerateRoute,
        home: Container(
          color: Colors.white,
        ));
  }

  void _onRoutePushed(
      String pageName, String uniqueId, Map params, Route route, Future _) {
      _setup(pageName, uniqueId, params, route, _);
  }

  void _setup(String pageName, String uniqueId, Map params, Route route,
      Future _) {

  }
}

至此,Flutter端的代码修改完毕,TestPage页面为为写的测试页面,使用自己的页面替换

四.ios原生端接入

4.1.依赖设置

在原生的工程目录下新建Flutter文件夹,用来存放Flutter相关的文件
使用xcode在Flutter目录下新建三个配置文件:Flutter.xcconfig、Debug.xcconfig、Release.xcconfig。在Project的configurations下将Debug.xcconfig、Release.xcconfig分别加入到对应的Dubug和Release模式下。
Flutter.xcconfig

#include "../../flutter_module/.ios/Flutter/Generated.xcconfig"
ENABLE_BITCODE=NO

Debug.xcconfig

#include "Flutter.xcconfig"
// 如果你是使用的pod管理你的项目,需要添加对pod的引用,XXX修改为自己项目的名称
#include "Pods/Target Support Files/Pods-XXX/Pods-XXX.debug.xcconfig"

Release.xcconfig

#include "Flutter.xcconfig"
// 如果你是使用的pod管理你的项目,需要添加对pod的引用.XXX修改为自己项目的名称
#include "Pods/Target Support Files/Pods-XXX/Pods-XXX.release.xcconfig"
FLUTTER_BUILD_MODE=release

4.2.Flutter文件引入

用AS打开iOS模拟器,运行。运行后会发现在Flutter的.ios/Flutter目录下新出现了几个文件(注:.ios为隐藏文件夹,使用command+shift+.显示)。拷贝App.framework和engine两个文件(这两个就是Flutter的产物) 至原生端刚才新建的Flutter的文件夹下。最后将这个Flutter文件拖入至原生项目中。在原生项目的General下的Framework下,将App.framework和Flutter.framework加上,注意是用动态库(Embedded)的方式加入。

4.3. pod文件修改

修改原生项目的Podfile文件

flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

install_flutter_engine_pod
install_flutter_plugin_pods flutter_application_path

在原生项目的目录下,运行pod install命令,导入FlutterBoost
至此FlutterBoost就导入成功啦。

五.其他优化设置

5.1.脚本设置

使用以上的设置,每次修改Flutter的代码都需要重复4.2步骤,将新生成的两个文件夹替换掉,非常不方便。这里可以使用脚本来代替替换操作。
在原生项目的Bulid Phases下的Run Script下增加如下脚本。(如果没有Run Script,点旁边的+号 New Run Script Phases)。
Bulid Phases要放到Dependencies后面,尽量往后放。

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" thin
rm -rf ${SOURCE_ROOT}/Flutter/App.framework
cp -ri ../flutter_module/.ios/Flutter/App.framework ${SOURCE_ROOT}/Flutter/App.framework
rm -rf ${SOURCE_ROOT}/Flutter/engine/Flutter.framework
cp -ri ../flutter_module/.ios/Flutter/engine/Flutter.framework ${SOURCE_ROOT}/Flutter/engine/Flutter.framework

六.常见问题及解决方案

6.1.ENABLE_BITCODE的错误

①Flutter不支持BITCODE。将项目中的Bulid Settings下的enable bitcode 设置为NO。
②还是报这个错,修改Podfile文件 重新pod install

post_install do |installer|
  installer.pods_project.targets.each do |target|
    # Aggregate targets do not have a headers build phase.
    target.build_configurations.each do |config|
       config.build_settings['ENABLE_BITCODE'] = 'NO'
    end
  end
end

6.2.模拟器运行报错 。

Showing Recent Messages
: "_FlutterMethodNotImplemented", referenced from:
修改Podfile文件,重新pod install

post_install do |installer|
  installer.pods_project.targets.each do |target|
    # Aggregate targets do not have a headers build phase.
    target.build_configurations.each do |config|
        config.build_settings['ENABLE_BITCODE'] = 'NO'
        config.build_settings['SUPPORTED_PLATFORMS'] = 'iphoneos iphonesimulator'
        if config.name == "Debug" || config.name == "Debug-BD" || config.name == "Debug-TEST" || config.name == "Debug-PRE"
              config.build_settings['ONLY_ACTIVE_ARCH'] = 'YES'
            else
              config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO'
        end
    end
  end
end

6.3.打包后。上传AppStore报错

Unsupported Architectures. The executable for xxx.app/Frameworks/Flutter.framework contains unsupported architectures '[x86_64]'.
上传的Flutter.framework中包含了模拟器的支持,在Run Script下增加如下脚本删除模拟器支持。

if [[ "$CONFIGURATION" =~ "Release" ]];then
# Release环境删除Flutter.framework "x86_64" 框架
lipo -remove "x86_64" "${SOURCE_ROOT}/Flutter/engine/Flutter.framework/Flutter" -output "${SOURCE_ROOT}/Flutter/engine/Flutter.framework/Flutter"
fi

6.4.上传Appstore报错

ITMS-90338: Non-public API usage - The app references non-public symbols in Frameworks/Flutter.framework/Flutter: _ptrace。
上传的是Debug版本Flutter包。
Release.xcconfig中增加FLUTTER_BUILD_MODE=release 或者在AS的命令行输入 flutter build ios --release。打包成功后拷贝App.framework和engine两个文件(这两个就是Flutter的产物) 至原生端刚才新建的Flutter的文件夹。

6.5.Flutter页面显示空白或奔溃。

注意Flutter.framework和App.framework分别都有Dubug包和Release包。要么都用Debug包,要么都用Release包。不然会报错或者显示不出来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345