Electron-开发实践：DMG安装包定制

【前言】

dmg文件是mac端常见的安装包格式，

前面几篇文章已经使用electron开发并打包好一个应用了，

本文主要讲下定制dmg安装包，

前面几篇文章：

一篇文章学会Electron

Electron-开发实践：本地数据库SQLite

Electron-开发实践：使用Monorepo管理Electron项目

Electron-开发实践：Mac打包

Electron-开发实践：注册苹果开发者账号

Electron-开发实践：Mac应用包签名和公证

【应用图标定制】

之前一篇文章讲过如何制作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