flutter module打包成framework引入原生工程

news2024/11/17 5:36:24

Flutter - 将 Flutter 集成到现有项目(iOS - Framework篇)

本篇文章大幅参考了 caijinglong 大佬的总结文章: 把flutter作为framework添加到已存在的iOS中[1]

用 Flutter 来开发,从来都不可能是新开的一个纯 Flutter 项目,很大一部分都是 老项目接入 Flutter 来混编。

在 Flutter 官网 - Adding to an iOS app[2] 这里,官方也给出了一些将 Flutter 集成进入现有 iOS 项目的方法。但是,这些都多多少少的不符合我们的需求。

1. 从 Flutter Module 说起

想要把 Flutter 集成进现有 iOS 项目,我们就必须使用 Flutter Module

那就先用命令创建一个 Flutter Module:flutter create --template module flutter_test_module

img

Flutter APP 和 Flutter Module 的不同之处在于 pubspec.yaml 最后一段:

# This section identifies your Flutter project as a module meant for
# embedding in a native host app.  These identifiers should _not_ ordinarily
# be changed after generation - they are used to ensure that the tooling can
# maintain consistency when adding or modifying assets and plugins.
# They also do not have any bearing on your native host application's
# identifiers, which may be completely independent or the same as these.
module:
androidX: true
androidPackage: com.example.flutter_test_module
iosBundleIdentifier: com.example.flutterTestModule

复制

这一段代码,把该 Flutter 项目标注为一个 module,用于嵌入到原生 app 里。

这里面设置了是否使用 androidx,Android 和 iOS 的 APP id。

2. iOS原生项目所需的文件

先说一下,iOS 原生项目引入 Flutter Module 需要如下 Framework:

1.Flutter.framework2.App.framework3.FlutterPluginRegistrant.framework (如果有用到原生的插件 - 非纯 dart 编写)4.Pods_Runner.framework(如果有用到原生的插件 - 非纯 dart 编写)5.*.framework(插件的 framework)

下面继续集成。

Flutter Module 创建完成后,先来给 iOS 打个包,命令如下:flutter build ios --release --no-codesign

然后看一下打包出来的东西,路径为 build->ios->Release-iphoneos

img

如果有第三方库的话,这里面应该是有上面说的 3、4、5 的 framework,但是我们刚创建项目,什么都没有加,所以是没有任何 framework的。

然后去 .ios/Flutter 里找 1、2:

img

但是我们写程序不可能什么插件都不用,所以加上一个shared_preferences[3],再来打包看一下 build 文件夹:

img

可以看到确实出现了我们上面说的 3、4、5 framework,这样我们所需的 framework 全部集齐。

3. 使用 cocoapods + git 来管理

因为 caijinglong 大佬 文章内说:

因为找遍了 podfile 的相关文档, 没有找到可以直接引用 framework 的方式 所以需要一个 pod 库作为"中转”

所以我们就要 跟着做!

使用命令 pod lib create flutter-lib 来创建一个名为 flutter-lib的私有库。

创建完成之后,打开 flutter-lib.podspec ,在 end 前面加入一行:

img

接着我们在该文件夹内创建一个名为 ios_frameworks 的文件夹,把我们刚才的那么多 framework 全都粘贴过来。

img

这个时候我们的iOS原生项目就可以引入本地这个库了:

platform :ios, '8.0'
use_frameworks!

target 'xxx.xxx.xxx' do
   pod 'flutter-lib', :path => 'somepath/flutter-lib'
end

复制

当然,我们不可能都用本地路径来引入,所以我们把这整个 flutter-lib文件夹传到 git 上,然后这样引用:

platform :ios, '8.0'
use_frameworks!

target 'xxx.xxx.xxx' do
   pod 'flutter-lib', :git => 'http://xxxx.git'
end

复制

这样我们就可以从 git 上来远程引用该私有库了。

如果运行有错误的话,可以去 caijinglong 大佬的博客查看解决办法。[4]

4. 编写脚本自动处理

上面都是手动来处理的,包括打包->移动文件->上传git等。

下面就写一个脚本来处理一下(基于 caijinglong 大佬):

ios_project_name='xxx'    # 项目名称
ios_out_path='xxx/ios_frameworks'    # 文件输出路径
flutter_git_path='http://xxx/xxx/xxx.git'    # git 项目路径

function customEcho(){
  echo "\033[1;32m$1\033[0m"
}
customEcho '\n1. 执行 flutter clean'
flutter clean || exit -1

customEcho '\n2. 清空build文件夹'
rm -rf $ios_project_name
rm -rf build
echo '清空完成'

customEcho '\n3. 生成 iOS frameworks'
flutter build ios --release --no-codesign || exit -1 

customEcho "\n4. 从 git 上克隆 frameworks 项目"
git clone $flutter_git_path  || exit -1 

customEcho "\n5. 输出文件到 $ios_out_path"
rm -rf $ios_out_path
mkdir $ios_out_path


cp -r build/ios/Release-iphoneos/*/*.framework $ios_out_path
cp -r .ios/Flutter/App.framework $ios_out_path
# cp -r .ios/Flutter/engine/Flutter.framework $out
echo '输出完成'

customEcho "\n6. 提交文件到 git"
cd $ios_project_name
git add .
git commit -m 'update lib'
git push -u origin master


customEcho "\n7. 删除该文件夹"
cd ..
rm -rf $ios_project_name

customEcho "\nAll Done."

复制

解释就不用解释了,上面的输出都有写。

这里有一点,就是 Flutter.framework 超级大,有四五百兆,我们把它单独放在了一个 pod 里,而剩下的一些每次新增插件或变更代码都会跟着变动,所以他们是一个单独的 pod。

也就是说,该 Flutter Module 一共有三个 git 仓库:

1.Flutter Module 项目的仓库(编写代码等)2.Flutter Module 打包出来的 frameworks(不包含 Flutter.framework)3.Flutter.framework 仓库

这样的好处就是在我们编写完代码,运行 sh 文件的时候,不用去下载一个四五百兆的 flutter 引擎,脚本速度提升很快,并且其他的 iOS 项目也可以引用。

接着改一下 flutter-lib.podspec 文件,

img

把这一行改成如下:

p = Dir::open("ios_frameworks")
arr = Array.new
p.each do |f|
  if f == '.' || f == '..'
  else
    arr.push('ios_frameworks/'+f)
  end
end
s.ios.vendored_frameworks = arr

复制

这样就完成了引入所有的 frameworks。

5. 总结

到这里 Flutter Module 就完全引入到了现有的 iOS 工程中,关于如何运行代码,可以去官方文档 - Adding a Flutter screen to an iOS app[5] 中查找。

这样集成的方案,感觉是目前最方便的了。(如有更佳方案,烦请告知)

Flutter 端写完代码直接运行 ./build_module.sh 就可以了。

iOS 端直接 pod install,超级简单。

如有缺陷,希望大家提出,共同学习!?

References

[1] 把flutter作为framework添加到已存在的iOS中: https://www.kikt.top/posts/flutter/exists/add-flutter-to-ios/ [2] Flutter 官网 - Adding to an iOS app: https://flutter.dev/docs/development/add-to-app/ios/project-setup [3] shared_preferences: https://pub.dev/packages/shared_preferences [4] caijinglong 大佬的博客查看解决办法。: https://www.kikt.top/posts/flutter/exists/add-flutter-to-ios/#使用-cocoapod-管理原生工程 [5] 官方文档 - Adding a Flutter screen to an iOS app: https://flutter.dev/docs/development/add-to-app/ios/add-flutter-screen?tab=vc-objective-c-tab

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1419841.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vite+vue3 使用svg icon(包括element-plus icon)

1、安装依赖 npm i element-plus/icons-vue -S npm i vite-plugin-svg-icons -D2、在vite.config.ts文件中 import path from path; import { createSvgIconsPlugin } from vite-plugin-svg-icons; // 版本不同引入方式不同 export default defineConfig({...plugins: [...cr…

文件夹隐藏了怎么找出来?如何取消文件夹隐藏属性

在我们的日常工作中,经常会遇到文件夹被隐藏的情况,这可能会让我们在寻找需要的文件时感到困惑。那么,如何找回这些隐藏的文件夹呢?本文将为你提供一些实用的方法,帮助你解决这个问题。 图片来源于网络,如有…

温酒读Qt:QObject中篇2 ——欲遮还羞的 QObjectPrivate

《妙法莲华经》曰:“佛道长远,久受勤苦,乃可得成。” 世事修炼,莫不如是,日拱一卒无有尽,功不唐捐终入海。 传送门: 《温酒读Qt:QObject 序篇》 《温酒读Qt:QObject中篇1—— Q_OBJ…

宝塔控制面板配置SSL证书实现网站HTTPS

宝塔安装SSL证书提前申请好SSL证书,如果还没有,先去Gworg里面申请,一般几分钟就可以下来,申请地址:首页-Gworg官方店-淘宝网 一、登录邮箱下载:Gworg证书文件目录 ,都会有以下五个文件夹。宝塔…

红外热成像仪定制_热成像仪/红外夜视仪开发方案

红外热成像技术是一种利用红外热成像仪将物体发出的不可见红外辐射能量转换成可见的温度场图像的技术,通过不同颜色来表示不同温度。这项技术的应用领域非常广泛,从电路维修到暖通检测再到汽车故障排查等各个领域都有着重要的作用。 红外热成像仪的解决方…

数字人解决方案VividTalk——音频驱动单张照片实现人物头像说话的效果

前言 VividTalk是一项由南京大学、阿里巴巴、字节跳动和南开大学共同开发的创新项目。该项目通过结合单张人物静态照片和一段语音录音,能够制作出一个看起来仿佛实际说话的人物视频。项目的特点包括自然的面部表情和头部动作,口型能够同步,同…

搞明白手机卡的合约期和优惠期才能避免很多坑!

很多朋友注销流量卡时才发现自己的套餐有合约期无法注销,尤其是联通和移动,那么什么是合约期呢?合约期和优惠期又有什么不一样呢?下来答案来了。 其实,目前很多在网上办理的大流量卡都是有合约期的,尤其是移…

05. 交换机的基本配置

文章目录 一. 初识交换机1.1. 交换机的概述1.2. Ethernet_ll格式1.3. MAC分类1.4. 冲突域1.5. 广播域1.6. 交换机的原理1.7. 交换机的3种转发行为 二. 初识ARP2.1. ARP概述2.2. ARP报文格式2.3. ARP的分类2.4. 免费ARP的作用 三. 实验专题3.1. 实验1:交换机的基本原…

JSP仓储管理系统myeclipse定制开发SQLServer数据库网页模式java编程jdbc

一、源码特点 JSP仓储管理系统系统是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库 ,系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发,数据库为SQLServer2008&#x…

小白水平理解面试经典题目LeetCode 455 Assign Cookies【Java实现】

455 分配cookies 小白渣翻译: 假设你是一位很棒的父母,想给你的孩子一些饼干。但是,你最多应该给每个孩子一块饼干。 每个孩子 i 都有一个贪婪因子 g[i] ,这是孩子满意的 cookie 的最小大小;每个 cookie j 都有一个…

非内积级联学习

1.首页推荐非内积召回现状 非内积召回源是目前首页推荐最重要的召回源之一。同时非内积相比于向量化召回最终仅将user和item匹配程度表征为embeding内积,非内积召回仅保留item embedding,不构造user显式表征,而是通过一个打分网络计算用户-商…

142. 环形链表 II(力扣LeetCode)

文章目录 142. 环形链表 II题目描述解题思路判断链表是否有环如果有环,如何找到这个环的入口 c代码 142. 环形链表 II 题目描述 给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。 如果链表中有某个…

thinkadmin操作栏审核通过(操作确认),审核驳回(录入信息)

录入信息页面 {extend name="../../admin/view/main"}{block name=content} <style>textarea {font-size: 16px;padding: 10px;border: 1px solid #ccc;

格子表单GRID-FORM | 嵌套子表单与自定义脚本交互

格子表单/GRID-FORM已在Github 开源&#xff0c;如能帮到您麻烦给个星&#x1f91d; GRID-FORM 系列文章 基于 VUE3 可视化低代码表单设计器嵌套表单与自定义脚本交互 新版本功能 &#x1f389; 不觉间&#xff0c;GRID-FORM 已经开源一年&#xff08;2023年1月29日首次提交…

蓝桥杯---加法变乘法

我们都知道:123 ….. 491225&#xff0c;现在要求你把其中两个不相邻的加号变成乘号,使得结果为2015 比如&#xff1a;123 ... 10*1112 ... 27*2829 ... 492015 就是符合要求的答案. 请你寻找另外一个可能的答案,并把位置靠前的那个乘号左边的数字提交(对于示例,就是 提交10)…

inode生命周期

1.添加inode到inode cache链表 当inode的引用计数器i_count为0后&#xff0c;会调用iput_final去释放 static void iput_final(struct inode *inode) {struct super_block *sb inode->i_sb;const struct super_operations *op inode->i_sb->s_op;unsigned long sta…

07.领域驱动设计:了解3种常见微服务架构模型的对比和分析

目录 1、概述 2、整洁架构 3、六边形架构 4、三种微服务架构模型的对比和分析 5、从三种架构模型看中台和微服务设计 5.1 中台建设要聚焦领域模型 5.2 微服务要有合理的架构分层 5.2.1 项目级微服务 5.2.2 企业级中台微服务 5.3 应用和资源的解耦与适配 6、总结 1、概…

云计算底层技术、磁盘技术揭秘虚拟化管理、公有云概述

查看本机是否具备虚拟化支持 硬件辅助虚拟化 处理器里打开 虚拟化Inter VT-x/EPT 或AMD-V 构建虚拟化平台工具软件包 yum 与 dnf Yum和DNF都是用于管理Linux系统中的软件包的工具&#xff0c;但它们在许多方面存在一些差异。以下是一些可能的区别&#xff1a; 依赖解…

Qt|QPushButton控件讲解

前提 按钮分为了四种状态&#xff1a;常态、聚焦、按下、禁用 前一段时间更新了MFC框架下CButton的自绘。因为MFC框架下的按钮限制性很高&#xff0c;所以只能由自绘实现各种风格&#xff0c;但是QT框架完美的解决了这个问题&#xff0c;我们只需要了解如何调用&#xff0c;就…

Doris简介及单机部署(超详细)

文章目录 一、Doris简介1、Doris介绍2、Doris架构 二、Doris单机部署&#xff08;Centos7.9&#xff09;1、下载Doris2、准备环境3、安装部署3.1 创建存储目录3.2 配置 FE3.3 启动 FE3.4 查看 FE 运行状态3.5 配置 BE3.6 启动 BE3.7 添加 BE 节点到集群3.8 查看 BE 运行状态3.9…