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包。不然会报错或者显示不出来。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。