Flutter iOS真机调试及打包过程记录

  • 本文为 AriesHoo 原创,转载必须保留出处!
  • 原文地址

相关文章一:用Flutter给Readhub写一个App
相关文章二:Flutter版本Readhub开源
相关文章三:Flutter iOS真机调试及打包过程记录
相关文章四:Flutter iOS打包过程及构建上线审核通过流程总结
相关文章五:Freadhub终于升级Flutter2.0了

注册一个Apple ID

注册地址;如果有可跳过该步骤

Flutter iOS真机调试及打包过程记录_第1张图片
注册Apple ID

整个注册及加入开发者计划流程可参考文章

在Xcode登录 Apple ID

1、Xcode在前台,点击 Xcode菜单选择 Preferences,进入设置

Flutter iOS真机调试及打包过程记录_第2张图片
Preferences页面

2、进入 Preferences 页面,切换到 Accounts 菜单,进入账号管理页面

Flutter iOS真机调试及打包过程记录_第3张图片
Accounts页面

3、点击 + 选择 Apple ID 登录

Flutter iOS真机调试及打包过程记录_第4张图片
Apple ID登录选择

4、输入Apple ID 按照提示登录即可

Flutter iOS真机调试及打包过程记录_第5张图片
输入Appele ID

注意:此处登录的Apple ID 一定要与后面真机测试机子上登录的Apple ID匹配

在IDE打开iOS模块

这里以 Android Studio 为例: 选择 ios 文件夹 右键 Open iOS module in Xcode

Flutter iOS真机调试及打包过程记录_第6张图片
image.png

也可通过Xcode直接 open ios文件夹

Flutter iOS真机调试及打包过程记录_第7张图片
Xcode打开ios文件夹

Xcode配置Flutter项目

切换 菜单到 Signing&Capabilities ,进入签名及证书配置页面。理论上和配置原生iOS项目是一致的

Flutter iOS真机调试及打包过程记录_第8张图片
Signing&Capabilities页面

如上图所示:

1、Team 为登录 Apple ID 所属组-即需要测试的真机登录的Apple ID所属的组

2、Bundle Identifier 唯一标识-同Android packageName

3、提示 Bundle Identifie不能使用,修改后 “enter”提交即可

Flutter iOS真机调试及打包过程记录_第9张图片
修改Bundle Identifier

返回Flutter项目 运行真机测试

选择苹果真机

如出现下图错误

Flutter iOS真机调试及打包过程记录_第10张图片
第一次苹果真机错误

根据提示:进入Xcode 选择 “Product > Run” 解决

Product > Run

如此即可在真机上调试Flutter应用。

如需换不同的测试机

1、Xcode 登录Apple ID --这个Apple ID 与需要与测试机登录的 Apple ID 一致

2、Signing&Capabilities 选择与测试机对应的Team

3、Xcode 选择 Product > Run

至此关于Flutter项目使用iOS真机测试流程介绍完毕。

接下来介绍iOS打包相关流程-该流程的前提是加入开发者计划并购买年费

Flutter iOS真机调试及打包过程记录_第11张图片
已加入开发者计划
Flutter iOS真机调试及打包过程记录_第12张图片
未加入开发者计划

整个注册及加入开发者计划流程可参考文章

Mac 上新建钥匙串

打开 钥匙串访问 > 证书助理 > 从证书颁发机构请求证书

主要用于后面到苹果开发者后台请求开发证书,有了开发证书才能打包进行内测及上传App Store

Flutter iOS真机调试及打包过程记录_第13张图片
创建钥匙串

输入邮箱及姓名,将生成的钥匙串保存电脑。

Flutter iOS真机调试及打包过程记录_第14张图片
输入邮箱及姓名
保存的钥匙串文件

登录开发者后台,申请开发证书、Bundle ID及Profile

1、进入Certificates, Identifiers & Profiles 菜单 ,进行证书、Bundle ID及Profile的申请

Flutter iOS真机调试及打包过程记录_第15张图片
登录后台

2、进入Certificates" 进行证书申请

3、选择需要申请的证书类型

Flutter iOS真机调试及打包过程记录_第16张图片
image.png

4、选择钥匙串-就是上文Mac上申请并保存电脑的。

Flutter iOS真机调试及打包过程记录_第17张图片
选择钥匙串

5、下载开发证书并安装到Mac-后面打包过程会校验。

Flutter iOS真机调试及打包过程记录_第18张图片
下载开发证书

6、进入 Identifiers 菜单进行 Bundle ID 申请

申请Bundle ID

7、选择App IDs

Flutter iOS真机调试及打包过程记录_第19张图片
选择App IDs

8、选择App 类型

Flutter iOS真机调试及打包过程记录_第20张图片
选择App类型

9、输入概述及 Bundle ID -- 与本地Xcode配置保存一致即可

Flutter iOS真机调试及打包过程记录_第21张图片
输入概述及Bundle ID

10、进入 Profiles 菜单,申请profile

Flutter iOS真机调试及打包过程记录_第22张图片
申请profile

11、选择profile类型

Flutter iOS真机调试及打包过程记录_第23张图片
选择profile类型

12、选择对应 Bundle ID

Flutter iOS真机调试及打包过程记录_第24张图片
选择对应 Bundle ID

13、选择对应的开发证书

Flutter iOS真机调试及打包过程记录_第25张图片
选择对应的开发证书g

14、选择测试设备-正式版可不选

Flutter iOS真机调试及打包过程记录_第26张图片
选择测试设备

15、设置标识-方便查找

Flutter iOS真机调试及打包过程记录_第27张图片
设置标识

16、创建完成,下载电脑以便打包使用

Flutter iOS真机调试及打包过程记录_第28张图片
创建完成,下载保存

17、增加测试设备

UUID获取推荐使用蒲公英扫描获取链接

Flutter iOS真机调试及打包过程记录_第29张图片
扫描获取UUID

通过 Devices 菜单,添加测试设备

Flutter iOS真机调试及打包过程记录_第30张图片
Devices菜单添加测试设备

输入标识及 UUID 保存即可

Flutter iOS真机调试及打包过程记录_第31张图片
输入标识及UUID

设备可随时添加,添加后台编辑profile,保存电脑,重新使用profile打包即可。

保存苹果后台生成的开发证书及profile进入打包流程

1、Xcode 打开Flutter项目的ios文件夹,配置好版本及 Bundle ID

勾选 Automatically manage signing选项并选择对应Apple ID Team

Flutter iOS真机调试及打包过程记录_第32张图片
勾选Automatically

点击 Product > Archive 进行打包

Flutter iOS真机调试及打包过程记录_第33张图片
image.png

如果 Archive 为灰色 查看是否选中了模拟器,修改为真机或者“Any iOS Device” 即可

Flutter iOS真机调试及打包过程记录_第34张图片
Archive为灰色
Flutter iOS真机调试及打包过程记录_第35张图片
修改为真机或者“Any iOS Device”

2、打包成功后点击"Distribute App" 可选择导出类型

Flutter iOS真机调试及打包过程记录_第36张图片
打包完成

因笔者将发布蒲公英内测,选择"Ad Hoc" 选项

Flutter iOS真机调试及打包过程记录_第37张图片
Ad Hoc

3、此处可选择本地文件进行重新签名-即profile

Flutter iOS真机调试及打包过程记录_第38张图片
选择本地profile
Flutter iOS真机调试及打包过程记录_第39张图片
选择profile

4、输入Mac登录密码进行打包

Flutter iOS真机调试及打包过程记录_第40张图片
输入密码

推荐:输入密码后选择 始终允许,不然你可能会以为密码输错了,或者多次输入密码崩溃,不要问我为啥知道的

5、保存文件到本地上传到测试平台即可愉快的进行内测

Flutter iOS真机调试及打包过程记录_第41张图片
导出ipa

至此:关于Flutter项目iOS环境下真机调试及打包内测相关流程到此结束。

结语

该流程为参考网络文章并结合自己实际操作整理而成.权当抛砖引玉了,万望各位不吝赐教。

关于我

: AriesHoo

GitHub: AriesHoo

Email: [email protected]

你可能感兴趣的:(Flutter iOS真机调试及打包过程记录)