IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> Flutter —— 混合工程自动化 -> 正文阅读

[移动开发]Flutter —— 混合工程自动化

1. 前言

作为一个团队来说,会有很多的工程搭配,团队里会有Flutter工程,Android工程和iOS工程,那么这些工程搭配在一起的时候就会有问题,因为每个开发者都有自己的开发环境,那么这个时候如果去配置所有的环境的话就很麻烦,所以就有了混合工程自动化的需求。

先创建一个flutter_module 和 一个 iOS工程。在iOS工程里面创建一个button,响应方法里面展示flutterController, 那么这个时候肯定会报错的因为没有Flutter环境。所以就需要给iOS配置flutter环境。terminal打开iOS工程目录,然后输入pod init 创建podfile,然后修改podfile:

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

target 'NativeDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  install_all_flutter_pods(flutter_application_path)

  # Pods for NativeDemo

end

修改完podfile之后在terminal执行pod install,这样iOS工程里面的Flutter环境就配置好了。
在这里插入图片描述
那么这里可以运行是因为在当前的环境已经把Flutter环境配置好了,但是如果没有配置flutter环境,这里把flutter文件的名字修改一下。
在这里插入图片描述
那么环境中就相当于没有了flutter。
在这里插入图片描述
那么这个时候iOS工程就跑不起来了。那么该如何解决这个问题呢?这个时候就需要用到混合工程

2. 混合工程

2.1 Framework 混合工程

先将Flutter的名字还原,作为Flutter来说,不能将flutter_module直接给iOS端,而是将Framework给到iOS端。这个时候打开terminal来到flutter_module里面,输入指令

flutter build ios-framework --output=../flutter_app 

然后就会开始构建混合工程。
在这里插入图片描述
然后就会生成三个目录,Debug,Profile 和 Release,代表着Flutter发布的三种版本。Debug是调试阶段,Release是发布阶段。调试阶段的效率是高于发布阶段的,因为发布阶段很多冗余代码都没有了,并且很多调试信息也没有了,但是这里有个问题,我们在Debug调试的时候我们有很多东西只有在Debug存在的,所以在debug做性能测试的时候是无法体现Release版本的真实情况的。Flutter就提供了Profile这个版本,介于Debug和Release之间,既有Release的性能,又有Debug的调试功能。
在这里插入图片描述
目录里面有2个framework,其中Flutter framework是和Flutter环境有关,原生工程有了Flutter framework就相当于具备了有Flutter环境,拥有了flutter 的API。但是如果想要显示module里面的代码和页面,那么就需要App framework。如果有多个Flutter Module,那么就只需要多个App framework就可以了。
在这里插入图片描述
将Debug的目录复制到iOS工程目录(没有pod过Flutter的iOS工程)下,然后集成framework

Flutter
这样即使没有配置过Flutter环境,iOS里面也可以使用Flutter了。可以将Flutter目录的名字修改后验证。
在这里插入图片描述

2.2 Cocopods 混合工程

这里也创建一个flutter_module 和 iOS 工程。然后terminal 到flutter_module里面执行

flutter build ios-framework --cocoapods --output=../Flutter_app

这里面生成的和Framework的不一样,Flutter 的是podspec,需要自己去下载。
在这里插入图片描述
同样的把Debug目录拷贝到iOS工程里面。然后terminal到iOS里面执行pod init。然后修改podfile

# Uncomment the next line to define a global platform for your project
 platform :ios, '9.0'

target 'NativeDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  pod 'Flutter',:podspec => 'Debug/Flutter.podspec'
  # Pods for NativeDemo

end

接着pod install 之后,flutter环境就有了。然后在集成一下App framework.这样就能正常使用Flutter了。
在这里插入图片描述

3. 混合工程自动化

上面介绍了工程,知道了需要集成App framework,那么如果中间修改了代码,那么App framework就会变化,这个时候又需要重新生成App framework然后集成。这个时候就需要有一个代码仓库,当flutter_module开发完了之后push上去,之后代码仓库把flutter_module打包成一个framework给到iOS使用。那么iOS这里只需要拉取就可以获取新的App framework了。那么这里就需要借助github以及CI了。

github创建仓库并且添加文件进来。

在这里插入图片描述
接下来要在flutter_module提交的时候自动打包成framework,在github中点击Actions。

在这里插入图片描述
点击 set up a workflow yourself 。
在这里插入图片描述
输入脚本
在这里插入图片描述
然后点击start commit
在这里插入图片描述
然后进入Action里面就可以看到脚本在运行了。
在这里插入图片描述
在这里插入图片描述
这样,每次push的时候,github仓库就会自动将flutter module 打包,然后放入到iOS工程里面,这样以后每次拉取更新就可以使用Flutter了,这里就实现简单的混合工程自动化了。

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-12-16 17:47:32  更:2021-12-16 17:49:59 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:54:23-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码