阅读 1735

Windows 安装 MacOS 10.15 虚拟机调试 Flutter iOS 应用

cover.jpg

生命不息,搞机不止。最近入了 Flutter 的坑,众所周知,调试 iOS App 必须使用 MacOS 系统,然鹅,我的电脑是 Windows,并且不想再买一台 Mac,为啥?因为 Mac 性价比太低,同等价位的 Windows 配置随便碾压 Mac 几条街(主要还是因为贫穷),但是咱也没办法,所以只好借助 VMware 搭建一个 MacOS 虚拟机来完成调试。

安装准备

系统镜像

macOS.Catalina.10.15.0.cdr

虚拟机软件

VMware Workstation Pro, 版本号大于等于 15.5

unlocker

用于解锁 VMware 对 MacOS 的支持, 版本号大于等于 3.0.2

darwin.iso

VMware Tools For Mac,用于解决安装后,MacOS 分辨率过小(1024*768像素),版本号大于等于 11.5 ,默认情况下安装 unlocker 时,会自动下载 darwin.iso,然鹅,官方源在墙外,所以你需要先科xuo上网。

科xuo上网教程:

以上软件均已被我存入百度网盘,点击下方链接即可领取宁的礼物:

链接:曲境折跃

提取码:tpa1

安装 MacOS

安装 VMware

首先安装 VMware Workstation Pro 15.5,如果你的版本低于 15.5,不要使用官方的在线升级,你可能陷入重启、重新安装的死循环中,请直接覆盖安装,安装后需要立即重启系统。如果以前已经激活了,那么原激活信息会被保留,如果是第一次安装,则使用如下激活码即可进行激活:

YG5H2-ANZ0H-M8ERY-TXZZZ-YKRV8

安装 unlocker

此步需要下载各种墙外的依赖,强烈建议科xuo上网,否则会以龟速下载,起码得等个一两天才能下好,不会科xuo上网的弟弟请学习上方教程。

Win 键 + R 键,打开运行,输入 services.msc 并回车,打开系统服务列表,如下图:

services.png

鼠标右键,停止 VMware 的全部服务。

解压 unlocker-master.zip,进入目录unlocker-master,鼠标右键点击 win-install.cmd,以管理员身份运行 ,等待命令自动执行完毕,即可成功解锁 VMware 对 MacOS 支持。

创建虚拟机

打开 VMware,在主页点击 创建新的虚拟机,选择 典型 配置,点击下一步后,选择 安装程序光盘映像文件,选中 macOS.Catalina.10.15.0.cdr

此步需要注意,选择文件时,后缀需要选择 所有文件才会在列表中显示 cdr 文件,如下图:

all.png

接着在下一步中,选择系统版本,macOS 10.15,如下图

sysytem.png

接着在下一步中,输入自定义名称,以及系统存放目录,如下图

name.png

接着在下一步中,自定义硬盘大小等配置,因为我的硬盘是 1 TB 的 三星 SSD 970 PRO,性能比较好,所以我选择了储存为单个文件,并分配 80 GB 空间给虚拟机,如下图

memory.png

最后一步,先根据实际硬件情况自定义虚拟机配置,如下图

config.png

点击自定义硬件,打开配置列表。

我的内存条是 24 GB DDR4 2400MHz,所以我给虚拟机分配了 12 GB

我的处理器是 i5 8400 六核,所以我给虚拟机也分配了六核(一核有难,五核围观)

接着是很重要的一个配置,网络适配器一定要选择桥接模式,否则在 MacOS 中可能无法登陆 AppStore,如下图

network.png

接着又是一个很重要的配置,USB 兼容性一定要选择 USB 2.0,否则在将 iPhone 与电脑连接后,MacOS 虚拟机中会无法显示 iPhone,如下图

usb.png

最后点击关闭,VMware 主页中会多出一个 MacOS 10.15,点击开启虚拟机,等待虚拟机自动安装,如下图

loading.png

安装 MacOS

虚拟机自动安装时,会提示你选择语言,此时选择中文即可,然后我们需要进行抹盘,点击进入 Mac 实用工具,选择 磁盘工具,选择 VMware Virtual SATA Hard Dirve Media,点击 抹掉,完成抹盘。

退出磁盘工具后,点击安装 MacOS,接着会自动安装,会提示你选择国家、键盘、设置密码等,根据提示一步步完成 MacOS 的安装。

安装 VMware Tools

完成 MacOS 的安装后,你会发现鼠标滑动会有点迟钝,分辨率也很低,无法全屏显示,不要着急,这是正常现象,我们需要安装 VMware Tools,即可解决这些问题。

首先关闭 MacOS 虚拟机,编辑虚拟机设置,挂载 darwin.so,如下图

tools.png

点击确定后,再次启动 MacOS,我们会在桌面发现 VMware Tools,双击安装即可,如下图:

vmtools.png

需要注意安装时,系统偏好设置/安全与隐私 界面会显示软件已被阻止,此时先点击左下角的图标解锁,并点击 允许 即可。

安装成功后,会重启 MacOS,分辨率会变得清晰、鼠标操作也会变得非常丝滑流畅。

配置 Flutter 环境

复制粘贴问题

因为 Mac 键盘 Command 键对应普通键盘的 Win 键,出于习惯,我将 Command 键 与 Control 键互换,就可以继续使用 Control + C 键复制粘贴。

依次打开 系统偏好设置-> 键盘-> 修饰键,将 Command 键与 Control 键互换,如下图

cv.png

解决打开软件时提示恶意软件、已损坏或无法验证等错误

运行依次运行如下命令,避免后面的步骤报错:

sudo -i
spctl --master-disable
xattr -r -d com.apple.quarantine ~/development/flutter/bin/cache/artifacts/libimobiledevice/idevice_id
xattr -r -d com.apple.quarantine ~/development/flutter/bin/cache/artifacts/libimobiledevice/idevicename
xattr -r -d com.apple.quarantine ~/development/flutter/bin/cache/artifacts/libimobiledevice/idevicescreenshot
xattr -r -d com.apple.quarantine ~/development/flutter/bin/cache/artifacts/libimobiledevice/idevicesyslog
xattr -r -d com.apple.quarantine ~/development/flutter/bin/cache/artifacts/libimobiledevice/ideviceinfo
复制代码

配置镜像源

因为 flutter 资源被墙了,我们使用 flutter pub get 等操作时则可能无法访问资源,需要翻蔷才行,如果你已经学会科xuo上网,则在 MacOS 中安装 爱思爱思R 客户端或 VTwoRay 客户端即可。

爱思爱思R 下载链接: 曲境折跃

不想每次下载都科xuo上网也没关系,配置中国镜像即可,点击桌面右上角的搜索按钮,打开聚焦搜索,搜索 终端,打开命令行。

然后,依次输入以下命令完成对中国镜像的配置:

echo 'export PUB_HOSTED_URL=https://pub.flutter-io.cn' >> ~/.bash_profile
echo 'export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn' >> ~/.bash_profile
source ~/.bash_profile
复制代码

获取Flutter SDK

首先,去 Chrome 官网下载 Chrome,完成后,使用 Chrome 去 Flutter 官网下载最新版SDK(不要使用 Safari 下载,因为 Safari 会自动解压文件)。

Chrome 官网:曲境折跃

Flutter 官网:曲境折跃

然后,依次运行如下命令,在家目录下创建一个 development 目录,用于开发使用,解压安装包至 development 目录:

cd
mkdir development
unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.5-stable.zip -d ~/development
echo 'export PATH=~/development/flutter/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile
echo 'source ~/.bash_profile' >> ~/.zshrc
复制代码

如果需要使用命令行代理,则可以将 .bash_profile 文件内容改为如下即可:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/development/flutter/bin:$PATH

alias proxy='export all_proxy=socks5://127.0.0.1:1086'
alias unproxy='unset all_proxy'
复制代码

运行 proxy 则开启代理,运行 unproxy 则关闭代理。

测试是否成功更换代理:

curl ip.gs
复制代码

运行以上命令会输出代理的 ip 地址,则代表开启成功。

安装真机调试工具

在 AppleStore 里安装 XCode,这个步骤非常缓慢,可能是苹果的带宽不够给力,我是花费了 1 个小时才下载下来,期间就是漫长的等待。

在等待的过程中,当然是可以先执行以下步骤的:

执行完以上步骤后,便可运行 flutter doctor 来检测 Flutter 环境配置,此时肯定会提示 XCode 及 Andriod Studio 未安装,但是在 MacOS 环境下,我们只调试 iOS app,所以只需要去 AppStrore 安装 XCode,安装之前是需要登录 AppStrore 的,按照提示登录即可。

安装完 Xcode,我们还需要安装一些额外的工具使 Flutter app 能够安装至真机上,依次运行如下命令完成安装:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
复制代码

以上个别步骤需要耐心等待几分钟。

在 XCode 下载完成后,运行 XCode 可能还需要安装一些组件,又需要等待几分钟,完成后运行如下命令,使 XCcode 可以真机调试:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
复制代码

真机调试

首先,我们需要设置一个共享文件夹,使 MacOS 虚拟机能够访问 Windows 里的文件。在 VMware 里打开 MacOS 的设置,如下图,设置共享文件夹:

share.png

例如,我的 Flutter 项目根目录为 D:\office\android\vhiphop,我将 android 目录设置为共享文件夹,设置后重启 MacOS 虚拟机,你会在桌面上发现多出一个 VMware Shared Folder,打开后就是 winodows 的共享文件夹,如下图

shared.png

如果我们需要在 MacOS 的终端里进入 android 文件夹,则使用如下命令即可:

cd /Volumes/VMware\ Shared\ Folders/android/
复制代码

在执行 flutter run 命令之前,我们需要使用 XCode 对项目进行签名。

打开项目根目录下的 ios/Runner.xcworkspace,如下图

sign.png

添加苹果开发者账号,并选择团队,接着将 iPhone 与电脑连接,此时 VMware 会提示你选择连接虚拟机还是电脑,我们选择虚拟机即可,如下图

iphone.png

最后,运行 flutter doctor,会发现 iPhone 已连接。

此时,我们还无法直接运行 flutter run,原因有两个:

  • 项目根目录下的 .packages 文件中的依赖路径是相对于 Windows 的路径,MacOS 环境无法直接访问

  • 共享文件夹有迷之 BUG,执行后会报如下的错

cocoapods.png

为了解决以上两个问题,我们需要将 Flutter 项目复制到 MacOS 中(建议先将文件压缩,然后再复制并解压,不然传输速度会很慢)。

接着在 MacOS 中,删除复制来的项目根目录下的 .packages 文件,并在根目录下执行 flutter pub get,即可直接点亮

run.png

build 错误

build 过程中可能会出现类似 [!] CDN: trunk Repo update failed 这种错误,这是由于墙外资源的问题,解决办法很简单:

首先在 /ios/Podfile 文件中添加如下代码:

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
复制代码

然后依次执行以下命令移出 trunk 源并更换清华 git 源:

cd ~/.cocoapods/repos/
pod repo remove trunk
pod repo remove master
git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
复制代码

pod install 失败

执行 pod install 时报错:

[!] Error installing libwebp
[!] /usr/bin/git clone https://chromium.googlesource.com/webm/libwebp /var/folders/gc/fhk9rvz11w71xbr87gm1d0sw0000gn/T/d20200530-24422-2c5thk --template= --single-branch --depth 1 --branch v1.1.0

Cloning into '/var/folders/gc/fhk9rvz11w71xbr87gm1d0sw0000gn/T/d20200530-24422-2c5thk'...
fatal: unable to access 'https://chromium.googlesource.com/webm/libwebp/': Failed to connect to chromium.googlesource.com port 443: Operation timed out
复制代码

由于墙外资源,所以下载失败,可以看到上面的错误信息是 1.1.0 版本安装失败,首先执行以下命令找到路径

find ~/.cocoapods/repos/master -iname libwebp

输出路径后,复制路径,并拼接后缀 /1.1.0/libwebp.podspec.json,完整命令如下:

vi ~/.cocoapods/repos/master/Specs/1/9/2/libwebp/1.1.0/libwebp.podspec.json
复制代码

source:git 中的 url 更换成 https://github.com/webmproject/libwebp.git

然后保存并重新执行 pod install

wq
pod install
复制代码

flutter run 失败

报错如下:

Could not find the built application bundle at build/ios/iphoneos/Runner.app.
Error launching application on 李奶奶的iPhone6s.
复制代码

原因是我将 Display Name 一栏的值更改了,默认值是 Runner,这里不能更改,如下图:

runner

如果需要更改 Display Name,应该在 info.plist 中更改,如下图:

plist

关于设置代理

MacOS 虚拟机中运行的 Flutter app 可以直接访问 Windows 本地 ip,所以无需任何其他配置即可设置代理,例如 Windows 的本地 ip 为 192.168.0.100,我们在 dio 中设置了如下代理:

(_dio.httpClientAdapter as DefaultHttpClientAdapter)
  .onHttpClientCreate = (client) {
    client.findProxy = (uri) => 'PROXY 192.168.0.100:8888';
    client.badCertificateCallback = (cert, host, port) => true;
  };
复制代码

在 Windows 中打开 Charles,即可代理 MacOS 中运行的 Flutter app 的网络请求。

关于代码同步

目前我是每次先在 Windows 里修改项目代码,修改完后,在 MacOS 中从共享文件夹拉取出来,并替换相应文件。

同理,修改 iOS Runner 配置,则是在 MacOS 中使用 Xcode 直接操作共享文件夹中的项目,修改完后,再从共享文件夹拉取出来,并替换相应文件。

有大佬建议直接使用 Git,不过我的项目是我独立开发,可以用但没必要。

复制秘钥文件

如果使用 git 同步 Windows 与 MacOS 之间的代码,则需要 id_rsaid_rsa.pub 这两个文件进行权限验证。

复制 C:\Users\leo\.ssh 下的 id_rsaid_rsa.pub 文件内容,粘贴至 MacOS 环境中 ~/.ssh/

例如

vi ~/.ssh/id_rsa
vi ~/.ssh/id_rsa.pub
复制代码

复制完成后,使用以下更新文件权限:

chmod 700 ~/.ssh/id_rsa
chmod 700 ~/.ssh/id_rsa.pub
复制代码

完成后即可使用 git clone 命令克隆 GitHub 上的文件。

其他

CocoaPods 的安装

当出现 pod intall 卡住的时候,首先尝试上文中介绍的更换清华源操作,还可以尝试升级 CocoaPods

CocoaPods 是 iOS 开发的版本管理工具,类似 JS 中的 NPM、 PHP 中的 Composer,它基于 Ruby 环境,而 Mac 自带 Ruby 环境,输入

gem sources -l
复制代码

可以查看系统默认的源地址为

https://rubygems.org/
复制代码

此地址在国外,所以访问很慢,可以将其更换为国内地址,依次执行以下命令即可:

gem sources --remove https://rubygems.org/

gem source -a https://gems.ruby-china.com
复制代码

输入以下命令可查看是否更换成功:

gem sources -l
复制代码

输入以下命令可安装最新版 CocoaPods

sudo gem install -n /usr/local/bin CocoaPods

pod setup
复制代码

若安装过程有确认提示,直接依据提示输入 y 进行确认即可。

所有的第三方 Podspec 文件都托管在 https://github.com/CocoaPods/Specs 上,而 pod setup 命令的作用就是将第三方插件的索引文件集成到本地目录 ~/.CocoaPods/repos 中,这样我们便可以执行 pod search 进行本地搜索等操作。

输入以下命令可查看当前 CocoaPods 的版本:

pod --version
复制代码

flutter run 报错

报错如下:

could not find included file 'Pods/Target Support Files/Pods-Runner/Pods-Runner.debug...
复制代码

如果未执行 pod install,而 /ios/Flutter 目录下的 Debug.xcconfigRelease.xcconfig 文件中有如下代码:

#include "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
复制代码

如下图:

xcconfig

先将这行代码删除,然后使用命令行进入项目根目录,执行以下命令

flutter clean

cd ios

pod install
复制代码

安装成功后,重新执行 flutter run 即可。