前言
在移动互联网时代,只做PC端应用,应用场景还是太局限。
如果要对移动端进行应用开发,最直接的办法就是用原生方式开发,Android 系统用 Android Studio,iOS 系统用 Xcode。
有没有办法用同一套代码,同时适配web、windows、linux、macos、android、ios呢?
当然是有的,其中,Flutter就是其中最具代表性的技术框架之一。
本文就先根据 Flutter 的项目文档,跑通环境搭建、多端部署的流程。
Flutter 开源地址:github.com/flutter/flu…
Flutter 文档地址:docs.flutter.dev
开发环境搭建
开发环境搭建步骤如下:
1.启动 Cursor** 或 VS Code
2.安装 Flutter 插件
3.快捷键ctrl + shift + p,选择Flutter: New Project
4.如果已安装 Flutter SDK,点击“Locate SDK”,如果尚未安装 Flutter SDK,点击下载 SDK,选择下载SDK到相关位置。
Flutter 有两种开发调试模式,比如开发web,桌面端应用,开发设备的调试设备是同一台。
如果是开发移动端应用,可以直接用数据线连接真机开发。
4.安装完后,就可以直接根据提示创建第一个初始项目
按 F5 启动浏览器调试运行,在弹出的界面中,可以看到整个简单的界面。
Android 开发环境搭建
下面来搭建 Android 的开发环境,除了安装完 flutter之外,还需要安装 Android 的相关环境支持。
1.下载 Android SDK
访问:developer.android.com/studio#comm…
下载 Android Studio 和 命令行工具。
启动 Android Studio之后,会自动去下载Android SDK。
2.配置环境变量
我的 sdk 下载路径为D:\Android_sdk。
下面设置环境变量:
ANDROID_HOME - D:\Android_sdk
添加Path变量:%ANDROID_HOME%\platform-tools 和 %ANDROID_HOME%\tools。
下载最新版的sdk,没有 tools 这个文件夹,因此不添加估计也可以,这里还是遵循官方教程,先加上。
单独下载的命令行工具解压到该路径下。
注意需要手动在里面加一个latest文件夹,这里实测如果不修改顺序,后面会出问题。
文件结构如下:
Android_Sdk\
├── cmdline-tools\
│ └── latest\
│ ├── bin\
│ ├── lib\
│ └── ...
├── platform-tools\
├── platforms\
└── build-tools\
修改完后,再添加一条环境变量:%ANDROID_HOME%\cmdline-tools\latest\bin
配置完之后运行:
flutter doctor
如果看到下面这样,所有条件均满足,表示环境搭建完成。
Android 真机调试
下面连接 Android 真机进行调试。
首先下载adb调试工具:developer.android.com/tools/relea…
配置完adb环境变量。
以小米手机为例,手机开启开发者模式,和电脑连接同一局域网,启用无线配对,当然也可以通过数据线连接,无限配对更加方便。
命令行执行配对命令,ip和端口号从手机上读取:
adb pair 192.168.1.101:36009
输入匹配的配对码,配对成功后,再连接:
adb connect 192.168.1.101:45917
查看设备
adb devices
输出以下内容,可以看到设备已成功连接:
List of devices attached
192.168.1.101:45917 device
adb-0587A02001A00540-lOHzYB._adb-tls-connect._tcp devices
使用 flutter 查看设备
flutter devices
输出以下内容,可以看到 flutter也能识别到连接的手机设备。
输入以下内容,开始部署调试,-d 后面为上一步查看到的设备编号。
flutter run -d 25042PN24C
首次启动时,会自动下载 gradle 及相关依赖,下载完之后,就能看到手机上弹出相应界面。
由于默认是 debug 版本,界面右上角会出现 debug 的标记。
如需安装 release 版本,可执行
flutter run -d 25042PN24C --release
iOS 系统应用部署
要在 iphone 上进行调试,和 Android 类似,flutter 需要借助 Xcode 的工具链。
Xcode只能在 macOS 上安装,由于我没有mac设备,只能采用一种“曲线救国的方式”,就是利用 Github 上的自动化 CI 帮我编译打包。
我让 Ai 帮我写了一个自动化打包的workflows。
相关代码放在:github.com/zstar1003/F…
添加 Tag 之后,会自动触发打包任务,自动生成 iOS和 Android 安装包。
获取到 iOS 的 .ipa 安装包后,发给手机,还是不能直接安装。
因为 iOS 要求安装包必须有应用签名。
因此,需要借助第三方工具(如爱思助手),对应用进行签名,再安装到手机上。
首先需要 iphone 开启开发者模式,在老一点版本的 iOS 中,可以直接在隐私与安全性中找到该选项。
然而,在新系统(比如我的系统是18.5)中,移除了该选项。(damn iphone!)
将 iphone 通过数据线连接电脑,爱思助手可以通过虚拟定位**的方式,将该选项恢复。
具体步骤可参考:www.i4.cn/news_detail…
打开开发者模式后,进入工具箱-IPA签名。
apple 有两种签名方式,一种是证书签名,需要开发者缴$99年费获取开发者账号;另一种是通过 Apple id** 进行临时签名,免费,但七天过期。
下面采用后者方式进行签名。
签名完就可以直接安装到手机。
然而,安装完之后,是无法直接打开的,会出现如下提示:
还需要在设置中,配置相应 Apple ID 签名的信任。
设置完之后,终于能打开了。
欸,又是吐槽iPhone的一天。