使用 DMG Canvas 打包 macOS app 为 DMG
最近在准备 Lemon Squeezy 平台上架 Zipic 的事情，使用 Sparkle 实现更新管理，过程中需要对 app 打包，正好使用最近发现的 DMG Canvas 打包，方便快捷而且直观，如果你也有打包需求，不妨试试这款工具。
本篇文章中我将按照我个人的使用习惯大体讲一下自己的使用过程，供参考✨。在正式开始之前，我大概描述一下我个人的需求：
- app 要做签名并经过苹果公证；
- app 打包为 DMG，DMG 打开时要有好看的背景， DMG 也需要公证；
- 操作步骤需要尽量简单清晰，GUI 工具优先。
🌟 从 macOS Catalina 开始，所有经过代码签名的磁盘映像也需要经过 Apple 的“公证”才能由最终用户打开。如果没有经过公证，用户将看到报错。因为无法验证磁盘映像的身份和来源，所以无法打开它。
最后我选择了 DMG Canvas 这款工具，本文以我开发的产品 Zipic 为例，这是一款简约高效的图片压缩工具，若有图片压缩需求也同样推荐试试。
导出 App
打开 Xcode 中的项目，首先 archive 项目
然后选中刚 archive 的包，然后点击 Distribute 按钮
选择 Direct Distribution 然后点击 Distribute 按钮
随后 Xcode 会自动为 app 签名并上传到 Apple 服务器进行公证（notarize），一般需要 1 分钟左右，等待一段时间通常会成功🎉，如果有问题按照提示排查解决即可
最后点击 Export 按钮，弹窗中选择合适的目录，我一般会以名称+版本的格式命名导出目录，比如 Zipic1.4，最后点击 Export 导出即可
就能在 Zipic1.4 的目录中看到 Zipic.app
DMG Canvas 基本配置
DMG Canvas 拥有独立的类型 dmgcanvas，存储为这种类型的文件用于保存配置信息，我通常会为一个 app 保存一个，这样基本配置就不用调整，每次只需要选择导出的新版本 app 就能轻松构建 DMG 文件。
下面讲一下我添加基本配置的过程。
Format、Compression、Image Size、Encryption 不用动，我通常使用默认配置。
将 Volume Name 修改为 app名称+DMG的形式，比如图中的 Zipic DMG。
Volume Icon 我会选择 App Icon 中的 512×512 规格的图标。
Gatekeeper 选择 Code Sign and Notarize
- Signing Cert：选择 macOS 中已经存在的 Developer ID 即可，这里会自动列出 Xcode 中使用过的 Developer ID 的信息，这个用于 DMG 的签名。
- Apple ID：为了跳过二次验证，这里需要登录 Apple ID 并新建 App-Specific Password，另外 Team ID 也需要填写。下面讲一下具体获取 App-Specific Password 和 Team ID 的步骤。
App-Specific Password
打开Apple ID 的账户管理页面登录自己的 Apple ID，并打开 Sign-In and Security 页面。
点击 App-Specific Passwords，进入相应页面，点击 Add 按钮
填写名称，我这里填写的是 DMG Canvas，点击 Create 按钮
再次输入 Apple ID 的密码验证后就会创建成功，会有弹窗展示密码，这就是我们需要的 App-Specific Password，复制它。
Team ID
Team ID 是十位的字符串，在Apple开发者账号页面中的 MembershipDetails Card中就能看到，需要登录你的开发者账号。
设计 DMG 内容
通常情况下，我会添加第一大步导出的 app 文件，添加 Applications 文件夹，配置背景，然后把 app 文件和 Application 文佳佳调整合适的位置，最后构建 DMG。
画布中添加基本元素
点击 DMG Canvas 页面左上角的 Add 按钮，选择 Add Files
选择导出的 app 文件，我这里就是 Zipic.app，然后点击 Open
然后 DMG Canvas就会打开设计画布，继续点击窗口左上角的 Add 按钮，选择 Add Applications Folder 按钮，添加 Applications 文件夹
通常，我会将添加的 Zipic.app 和 Applications 文件夹的 Icon size 调整到 128，鼠标框选画布中的两个图标，然后调整右边 Inspector 中最下面的 Icon Size
设计背景
我会使用 Figma 为 app 设计一个专属的 DMG 内容背景图，用于表示需要将 App 拖拽到 Applications 文件夹中，我为 Zipic 设计的背景图如下，图中使用了渐变色的背景色，然后添加了跟图片压缩处理相关的几个淡色的 Icon，并绘制了一个方向箭头表示拖动方向，同时使用明确的文本表示要进行拖拽动作。
为了适应默认的窗口大小以及 HiDPI 的显示效果，我是用 1200x720 的大小进行设计的，导出背景图，我选择 jpg 格式，并选择导出到桌面：
为了减少 DMG 的大小，通常我还会尽可能压缩背景图，😀我使用 Zipic 进行压缩，我通常配置导出到原目录、转换为 webp 格式，并且选择压缩强度为 1 ，数值越小质量越高，可以看到从 291.01KB 压缩到了 19.63KB，真的很不错，推荐朋友们尝试一下 Zipic，本文所有图片均为 Zipic 压缩后的。
💡 其实，不用非得使用设计工具专门设计背景图，直接在 DMG Canvas 中也能添加很多元素，比如图标、文本等，单纯使用这个工具就能做出我设计的背景图的效果，根据你的喜好选择对应方式即可。
设置背景
回到 DMG Canvas 画布，右侧的 Inspector 中找到 Window Background 选择 Image，然后点击 Choose 按钮，选择刚才压缩好的背景图 DMG BG.webp
记得需要将 Choose 按钮下的缩放倍数选择为 0.5×，并微调 Zipic.app 和 Applications 文件夹的图标位置与背景匹配起来。
构建 DMG
点击窗口中右上角的小锤子按钮，就会开始自动构建 DMG 文件，中间过程中会将构建好的 DMG 上传 Apple 进行公证所以会花点时间，总的构建时间正常需要几分钟，耐心等待⌛️即可，如果时间过长根据打印的构建过程日志排查问题就好。
为了方便下次打包不同版本的 DMG，建议保存为 dmgcanvas 文件，⌘+S 保存，下次直接打开只需要更换 app 文件重新打包就好。🚀
总结
使用 GUI 的工具构建 DMG 会更加直观，只需要做好布局和设计即可，构建过程完全自动化，无需过多干扰。希望本文能助你发掘属于你自己的打包工作流。✨
