前篇对于 go-flutter 引擎进行了初步的探索, 打包终产物是一个二进制文件配合一些资源文件

本篇研究如何将终产物变成一个 app, 进一步变成 dmg, 就和你网上下载的工具一样

本篇默认你拥有全套的工具, git xcode flutter go hover

打包出 go 终产物

这里以法空大佬的 JsonToDart 为例

cd /tmp
git clone https://github.com/fluttercandies/JsonToDart.git
cd JsonToDart/Flutter/desktop

打包

hover build

这里可能很快也可能很慢, 根据你的工程大小和网络速度而言, 网络速度是因为要下载 flutter 依赖和 go-flutter 引擎相关的东西, 工程大小影响编译速度

然后可以看到当前的目录结构

tree -L 2 desktop/build/outputs/darwin
desktop/build/outputs/darwin
├── FlutterEmbedder.framework
│   ├── FlutterEmbedder -> Versions/Current/FlutterEmbedder
│   ├── Headers -> Versions/Current/Headers
│   ├── Modules -> Versions/Current/Modules
│   ├── Resources -> Versions/Current/Resources
│   └── Versions
├── assets
│   └── icon.png
├── flutter_assets
│   ├── AssetManifest.json
│   ├── FontManifest.json
│   ├── LICENSE
│   ├── fonts
│   ├── isolate_snapshot_data
│   ├── kernel_blob.bin
│   ├── packages
│   └── vm_snapshot_data
├── icudtl.dat
└── json_to_dart

其中这个 json_to_dart 就是可运行的二进制文件 我们可以直接通过$ desktop/build/outputs/darwin/json_to_dart来运行

当然这种情况下, 运行图标是这样的

20190708142722.png

要求完美(有强迫症)的法空大佬要求要做成 app 的样子, 我就去研究了一下, 完成了这么一个终产物

20190708142831.png

双击打开是这样的 20190708142857.png

制作 app 文件

本篇内容很多来自于这里

图标部分的话使用了一个叫 iconkit 的软件结合命令行制作

新建一个文件夹

嗯, 就是一个正常的文件夹, 名字随意(后面会改), 后面所有的修改除重命名本文件夹以外, 都在这个文件夹里进行

Contents 文件夹

新建一个 Contents 文件夹, 至于为什么要这么命名, 其实是苹果对于 app 的规定, 遵守就好

里面的东西如下:

20190708143509.png

Info.plist app 的清单文件, 后面看
MacOS go-flutter 那步打包的所有文件复制进来
Resource 资源文件都会在这里,图标之类的

Info.plist

这个是清单文件,一个 xml, 但是语法比较怪

key 和 value 分别是某个标签的 content

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleExecutable</key>
    <string>json_to_dart</string>
    <key>CFBundleIconFile</key>
    <string>icon.icns</string>
    <key>CFBundleIdentifier</key>
    <string>com.github.flutter.jsontodart</string>
    <key>NSHighResolutionCapable</key>
    <true/>
    <key>LSUIElement</key>
    <true/>
</dict>
</plist>

CFBundleExecutable: 你要运行的二进制, 这里是 json_to_dart

CFBundleIconFile: 应用图标的指向, 相对 Resources 文件的路径

CFBundleIdentifier: 应用唯一标示, 这里根据你的情况写

NSHighResolutionCapable: 是否支持高清(Retina 屏,建议设置为 true)

LSUIElement: 不知道什么意思, 好像是说 UI 的什么信息

制作应用图标

准备一个 1024x1024 的图作为 icon

打开 IconKit, 把图片文件拖到中间的十字上

20190708144332.png

然后储存一下

这里做成 icns 还是直接用 iconset 由你自己决定

做成 icns 的话是一个文件, iconset 是一个文件夹, 如果资源不多直接用文件夹, 资源太多, 可以整合一下

使用这个命令制作 $ iconutil -c icns -o App.icns AppIcon.iconset, 这里注意 文件夹必须改成iconset扩展名,不然转化会报错

使用什么名字根据你自己的想法来

重命名

到最外面重命名文件夹, 加上.app 后缀, 就会自动变成一个 app 了

运行

看效果图

Kapture 2019-07-08 at 15.42.13.gif

打包 dmg

到了这步已经可以使用了, 但是一般情况下, 会使用 dmg 格式来分发应用

dmg 是一个磁盘映像, 制作很简单, 使用 mac 自带的工具就可以了

创建映像

打开磁盘工具 20190708150123.png

cmd+n 新建 20190708150152.png

大小要选能放下的大小, 这里终产物有 70m, 我就填个 100MB 然后选读写,存储,选择位置

20190708150448.png

修改映像内容

把 app 拖进来

20190708150528.png

再创建一个/Application 的”快捷方式”, 在 finder 中 cmd+shift+g 然后输入/+回车来到根目录, 创建一个替身

这时候会要输入密码, 这个是由于操作根目录需要 root 权限的原因

接着把这个快捷方式拖到 dmg 里, 就完成了基本的制作

导出映像

这个映像是不建议直接分发的, 先推出

20190708152456.png

然后在磁盘工具中转换一下

20190708153000.png

改名字, 选压缩, 加密与否看你的情况

20190708153326.png

这里转换失败的话检查一下你之前那个自己制作的 dmg 是不是没有推出

对比下大小:

20190708160649.png

20190708160707.png

导出后的 dmg 比较小

版本升级

后续制作好 app 后, 只需要替换 100MB 映像内的 app 即可

后记

简单的制作了一下 app+dmg, 顺便了解了一下 app 的包内容是如何排布的

以上