electron程序,如何利用appdmg打包生成dmg安装包?
发布于 作者:苏南大叔 来源:程序如此灵动~苏南大叔再次开始更新electron
相关文章,本文中给大家带来的是:如何利用appdmg
生成dmg
安装包。在macos
的世界里面,安装一个文件是非常简单的事情,并没有win
下面哪些繁琐步骤。最常见的安装包格式dmg
,打开就是一个简单界面,把左边的图标拖动到右边的快捷方式上就算安装完成了。对,就是这么简单。那么,对于electron
生成的.app
文件来说,如何才能拥有这样的安装界面呢?这就是本文所要描述的问题。
本文测试环境:mac
/electron@5.0.3
/appdmg0.6.0
。本文特约龙套是electron-quick-start
,用electron-packager
打包成了.app
文件,本文的任务就是把.app
文件再包装成.dmg
文件。本文假设您,已经利用electron-packager
正确打包好了龙套项目的.app
文件。位置信息是:
./electron-quick-start-darwin-x64/electron-quick-start.app
全局安装appdmg
appdmg
的github
页面地址如下所示,您可以找到更详细的描述内容:
因为appdmg
的角色和electron-packager
的角色类似,所以苏南大叔推荐您使用-g
全局安装appdmg
。命令行如下:
npm install -g appdmg
可以通过下面的命令,获得appdmg
的版本号。截至到发稿,苏南大叔安装好的appdmg
的版本号是0.6.0
。
appdmg --version
配置文件
对于appdmg
生成.dmg
文件这个事情来说,还需要一个json
配置文件。苏南大叔使用的测试配置文件如下:
{
"title": "MyApp",
"icon": "icns.icns",
"background": "bg.png",
"contents": [
{ "x": 380, "y": 170, "type": "link", "path": "/Applications" },
{ "x": 200, "y": 170, "type": "file", "path": "./../electron-quick-start-darwin-x64/electron-quick-start.app" }
],
"window": {
"size": {
"width": 580,
"height": 360
}
},
"format": "UDBZ"
}
准备文件
在上述配置中,苏南大叔还需要准备几样文件:
.icns
图标文件。制作方式见:https://newsn.net/say/electron-icns.html.app
可执行文件。制作方式可参考:https://newsn.net/say/electron-packager.htmlbg.png
背景图片,这个图片可以自由设计,建议在合适的位置出现一个箭头,指示大家拖动图标。
目录结构
在electron-quick-start-darwin-x64
的同级目录,建立一个dmg
文件夹,下面放置如下相关文件。目录结构,如下图所示:
数值设置
另外,关于上述配置文件中的坐标信息。理论上来说,是需要自己手工不断调整的。不过其实也是有规律可循的。苏南大叔总结了几条规律,仅供参考:
width
和height
就是bg.png
的宽度和高度。contents
里面的y
,指的就是图标中心点的位置。如果设置高度的一半的话,就可以保证图标在竖直最中间的位置。但是考虑到图标下面的文字信息,所以,可以考虑设置为高度一半,再剪掉一个向上的偏移量。
压缩格式
关于参数format
,就是压缩格式了。这里苏南大叔没有做具体测试。因为第一个测试结构,个人就挺满意的。据说还可以format
取值如下:
- UDRW - UDIF read/write image
- UDRO - UDIF read-only image
- UDCO - UDIF ADC-compressed image
- UDZO - UDIF zlib-compressed image
- UDBZ - UDIF bzip2-compressed image (OS X 10.4+ only)
- UFBI - UDIF entire image with MD5 checksum
- UDTO - DVD/CD-R master for export
- UDSP - SPARSE (grows with content)
- UDSB - SPARSEBUNDLE (grows with content; bundle-backed)
生成dmg
命令
命令格式如下:
appdmg <json文件路径> <dmg文件路径>
但是考虑到实际的情况,会反复生成上述.dmg
文件,所以,推荐您设置命令如下:
rm -f ./dmg/test.dmg && appdmg ./dmg/dmg.json ./dmg/test.dmg
可以定义在package.json
里面的script
节点里面,命名为:dmg
,便于使用npm run dmg
执行相关命令。
使用代码生成dmg
基本姿势
如果不用命令行,而使用node
代码的话,也是可以生成dmg
的。基本姿势如下:
const appdmg = require('appdmg');
const ee = appdmg({ source: 'test/appdmg.json', target: 'test.dmg' });
ee.on('progress', function (info) {
// info.current is the current step
// info.total is the total number of steps
// info.type is on of 'step-begin', 'step-end'
// 'step-begin'
// info.title is the title of the current step
// 'step-end'
// info.status is one of 'ok', 'skip', 'fail'
});
ee.on('finish', function () {
// There now is a `test.dmg` file
});
ee.on('error', function (err) {
// An error occurred
});
可选方案
这里主要需要配置的就是ee
对象,其实就是appdmg
的实例。
方案一,传递json
配置文件和dmg
的路径位置。
const ee = appdmg({ source: 'test/appdmg.json', target: 'test.dmg' });
方案二,传递json
配置文件的内容和dmg
的路径位置。至于basepath
变量,直接忽略即可。
const ee = appdmg({
target: 'test.dmg',
basepath: __dirname,
specification: {
"title": "Test Title",
// ...
}
});
执行方式
执行方式就是:
node test.js
最终成品
对于electron-quick-start
这里例子来说,生成的dmg
安装包的实验结果是50m
左右,体积上来说,在可接受的范围内。
在苏南大叔的这几条测试中,这个最顶端的title
是没有显示的。这个issue
在官方的列表中,也没看到描述,也许是苏南大叔自己的系统问题。暂无解决方案。
总结
生成dmg
安装包之后,这个安装文件就会显得高大上很多。更多dmg
相关的经验文字,请点击苏南大叔的博客:
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。