electron笔记——前端项目转成dmg

向上柚子茶
374 阅读1分钟

这是整个的目录结构

image.png

1、创建一个项目

npm create electron-app my-new-app

2、在根目录运行

npx electron-forge import

npm run make

image.png 成功后会在你的根目录下生成一个out文件

3、安装appdmg

npm install -g appdmg

appdmg.json配置如下

{
    "title": "MyApp",
    "icon": "app.icns",
    "background": "bg.png",//
    "contents": [
      { "x": 380, "y": 170, "type": "link", "path": "/Applications" },
      { "x": 200, "y": 170, "type": "file", "path": "out/my-new-app-darwin-x64/my-new-app.app" } //这是上一步electron forge生成的东西，指定好目录就行了。
    ],
    "window": {
        "size": {
            "width": 580,
            "height": 360
        }
    },
    "format": "UDBZ"
}

4、生成icns

方法1

  • 1.创建目录icon，创建命名为icons.iconset的文件夹，放入尺寸为1024*1024的应用图标，命名为pic.png。

  • 2.进入到icon目录，执行下面脚本，会在icons.iconset中生成各种尺寸的图标。

sips -z 16 16     pic.png --out icons.iconset/icon_16x16.png
sips -z 32 32     pic.png --out icons.iconset/icon_16x16@2x.png
sips -z 32 32     pic.png --out icons.iconset/icon_32x32.png
sips -z 64 64     pic.png --out icons.iconset/icon_32x32@2x.png
sips -z 64 64     pic.png --out icons.iconset/icon_64x64.png
sips -z 128 128   pic.png --out icons.iconset/icon_64x64@2x.png
sips -z 128 128   pic.png --out icons.iconset/icon_128x128.png
sips -z 256 256   pic.png --out icons.iconset/icon_128x128@2x.png
sips -z 256 256   pic.png --out icons.iconset/icon_256x256.png
sips -z 512 512   pic.png --out icons.iconset/icon_256x256@2x.png
sips -z 512 512   pic.png --out icons.iconset/icon_512x512.png
sips -z 1024 1024   pic.png --out icons.iconset/icon_512x512@2x.png
  • 3.在icon目录下执行下面的脚本，生成icns文件
iconutil -c icns icons.iconset -o Icon.icns

方法2

  • 打开访达 >> 应用程序
  • 随便选取一个.app（例如App Store.app），右键菜单点击显示包内容
  • 找到Contents/Resources/AppIcons.icns

image.png

5、生成dmg

appdmg appdmg.json ~/Desktop/test.dmg

image.png

执行玩命令之后，桌面便生成了可安装的dmg

image.png

企业微信截图_95bf0398-ad9d-4100-b8da-6e5bf55e04b4.png

安装dmg，完成

参考文章

avatar
文章
阅读
粉丝