Electron-开发实践：DMG安装包定制
【前言】
dmg文件是mac端常见的安装包格式，
前面几篇文章已经使用electron开发并打包好一个应用了，
本文主要讲下定制dmg安装包，
前面几篇文章：
Electron-开发实践：使用Monorepo管理Electron项目
【应用图标定制】
之前一篇文章讲过如何制作mac应用icns图标，
接上文的代码分支： https://github.com/uikoo9/dishi-monorepo/tree/mac-sign
对应的应用图标效果如下，
会发现一个问题，比普通的mac应用图标大一圈，
原因也比较简单，找一个正常的mac应用图标对比一下，
可以看到问题的原因是两者留的边距不一样，
正确的编剧是1024px尺寸留96px边距。
按这个比例修改icon后的效果如下，
这里推荐一个简单好用的在线画图网站，
https://www.suxieban.com/index.html#
【dmg预期效果】
有点跑偏了，接着来讲dmg安装包的定制，
找一个软件看下dmg预期的效果，
比如微信的mac版，
可以看到dmg的定制包括几部分
1.dmg文件本身的图标，这个保持默认即可
2.dmg双击后挂载到电脑后的图标，如上图右侧图标
3.双击dmg挂载后的效果，如上图下面的部分
这里看下目前应用的效果如下，
可以看到
1.双击dmg文件，挂载后的图标是默认electron的图标
2.双击挂载文件后的页面有点简单和丑
【定制dmg挂载后的图标】
使用qiao-electron-cli，
https://qiao-electron-cli.vincentqiao.com/#/
安装
npm i -D qiao-electron-cli配置文件
主要是icon属性，
这里的icon在生成app应用包和dmg时都会使用到。
// pkg
const pkg = require('../dist/package.json');
// const
const arch = process.arch;
const platform = process.platform;
const version = pkg.version;
const iconPath = `pack/icon/icon${platform === 'darwin' ? '.icns' : '.ico'}`;
// qiao-electron config
module.exports = {
overwrite: true,
asar: false,
dir: 'dist',
out: 'out',
arch: arch,
platform: platform,
name: 'dishi',
icon: iconPath,
appVersion: version,
appCopyright: 'Copyright © 2023 insistime.com版权所有',
};脚本
先执行packmac，生成mac应用，
在执行packdmg，生成dmg安装包。
"packmac": "qelectron pm ./pack/qiao-electron.config.js",
"packdmg": "qelectron pd ./pack/qiao-electron.config.js",效果
定制后效果如下
【定制安装界面】
目前的安装界面如下，
其实分3块
1.背景图，其中包括了那个黑色的箭头
2.应用icon，其实就是应用包，双击也可以启动
3.Applications的快捷方式，这个一般不用改
修改背景图
先随便找一个背景图，
然后修改上面配置文件，
添加一个dmgBackground的属性，
{
// dmg配置项-背景图
dmgBackground: 'pack/icon/bg.png',
}再次生成dmg后的效果，
可以看到背景图已经替换了。
修改icon位置
这里假设要讲两个icon向上移动一些，
可以在上面的配置项添加如下配置，
其中type为file的代表左侧的应用图标位置，
type为link的为右侧的Applications的位置，
{
// dmg配置项-内容位置
dmgContents: [
{ x: 80, y: 60, type: 'file' },
{ x: 260, y: 60, type: 'link' },
],
}修改配置再次打包后的效果，
可以看到两个icon已经挪到了页面上边。
修改界面尺寸
当自定义了背景图后，
对应的需要修改下界面的尺寸，
在配置文件中加下面的配置，
{
// dmg配置项-窗口大小
dmgWindowSize: {
width: 350,
height: 140,
},
}【最终效果】
最终效果如下
1.定制了dmg挂载后的图标
2.定制了安装界面的背景图
3.定制了安装界面的尺寸
【qiao-electron-cli】
封装了一个npm包，功能包括
1.打包mac应用包
2.打包mac-dmg包
https://qiao-electron-cli.vincentqiao.com/#/packdmg
定制dmg包，只需新增一个配置文件如下
/**
* dmg options
*/
module.exports = {
// 定制窗口
window: {
size: {
width: 500,
height: 200,
},
position: {
x: 500,
y: 500,
},
},
// 定制背景图
background: 'pack/icon/bg.png',
// 内容位置
contents: [
{ x: 160, y: 90, type: 'file' },
{ x: 360, y: 90, type: 'link' },
],
};【总结】
1.定制dmg挂载后的图标
2.定制dmg安装界面-背景图
3.定制dmg安装界面-图标位置
4.定制dmg安装界面-窗口大小
5.qiao-electron-cli， https://qiao-electron-cli.vincentqiao.com/#/
6.本文对应代码库： https://github.com/uikoo9/dishi-monorepo/tree/custom-dmg
7.本文对应应用（Mac M1）： https://static-insistime.vincentqiao.com/21_dishi/dmg/dishi-2.1.1-arm64.dmg
8.本文对应应用（Mac Intel）： https://static-insistime.vincentqiao.com/21_dishi/dmg/dishi-2.1.1-x64.dmg