Electron应用的创建与打包使用

Electron的创建于打包过程（并与项目连接）

		创建
			使用github提供的先有electron模板 
			链接:https://github.com/electron/electron-quick-start
			clone到本地
			npm install进行初始化项目
			npm run start 进行启动
			项目内容介绍：
			main.js：主进程文件，启动渲染进程，并监听消息，用于调用原生方法。比如跨域、全屏、下载、打开浏览器、开机启动等方法都是写在这里
			preload.js ：预加载文件，实现网页资源预加载，在主进程创建渲染进程时指定，可以进行一些预处理操作
			renderer.js： 渲染进程文件
			renderer.js： 示例页面 index.html 中引用了该 JS 文件，渲染进程调用 Node 的 API，因此可以直接使用 Node 的 API
			package.json ：文件其实就是对项目或者模块包的描述，包括项目信息，打包信息等
			package-lock.json ：锁定包版本文件
			
			在主进程中 createWindow 为加载你的实例或者项目
			 mainWindow.loadFile('index.html')
			 加载项目入vue的时候可以降你的项目打包，然后将dist文件夹放到你的项目当中
				mainWindow.loadFile('dist/index.html')
				比较常见的设置有：
				 // 设置窗口最大化
			 mainWindow.maximize()
			 //打开控制台
			 mainWindow.webContents.openDevTools()
			// 设置窗口是否全屏
			 mainWindow.setFullScreen(true)
			 electron项目初期菜单按钮为英文，如果想要中文或者自定义按钮则需要自己写一个菜单文件
			 比如：我自己写的menu.js

menu.js
	const { Menu, dialog } = require('electron')
  				 	const menuTemplate = [
     {
    //     label: '首页'
    // },
    // {
    //     label: '编辑',
    //     submenu: [
    //         {
    //             label: '撤销',
    //             role: 'undo'
    //         },
    //         {
    //             label: '前进',
    //             role: 'redo'
    //         },
    //         {
    //             label: '复制',
    //             role: 'copy'
    //         },
    //         {
    //             label: '粘贴',
    //             role: 'paste'
    //         },
    //     ]
    // },
    // {
    //     label: '动作',
    //     submenu: [
    //         {
    //             label: '打开控制台',
    //             role: 'toggleDevTools',
    //         },
    //         {
    //             label: '全屏',
    //             role: 'togglefullscreen'
    //         }
    //     ]
    // }
]
//把写的menu文件加入Menu中
const menuBuilder = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menuBuilder)

在主进程文件main.js里面的createWindow函数导入
// 自定义顶部菜单
require(‘./menu’)
createWindow：具体使用看electron官网快速入门篇
如果想要较为熟悉连接的话建议跟着Electron官网文档一起创建一个项目更为全面

打包

命令：npm run pack
生成图标
在打包应用之前，要为应用准备一个图标，作为安装包图标。不同的操作系统所需图标的格式不同，Mac对应的格式为icns，Windows对应的格式为ico。
图标的生成可以借助 electron-icon-builder。
准备一张1024*1024的png图片，将图片放在项目文件夹中
安装 electron-icon-builder：

npm i electron-icon-builder --D

在package.json的scripts添加指令：

"build-icon": "electron-icon-builder --input=./public/icon.png --output=build --flatten"

input=./public/icon.png 为你的图片路径
运行npm run build-icon，就会在build文件夹中生成一系列打包所需的图标文件。

此时已生成你的打包图片
打包应用
最快捷的打包方式是使用 Electron Forge。但是这个我没下载下来，如想使用查看Electron 文档进行使用
Electron生态下常用的打包工具还有有两个：electron-builder 和 electron-packager。
我使用的是electron-builder
electron-builder配置更灵活，使用也更广泛。下面，我们使用electron-builder来进行打包
安装

npm i electron-builder --D

打包之前先把build配置给侬好，具体配置我在下面有写到
npm run pack先打包试试，会发现electron 直接打包一般都不会成功，因为打包过程中需要下载文件
可以提前下载放入具体的文件夹中
注意：放置的位置是固定的
一般打包不成功的时候控制台会给出具体确实的文件路径，可以直接下载，控制台也会给出具体放置路径
以下为需要下载的文件：或者查看
下载 winCodeSign 、nsis、nsis-resources
具体下载路径和需要放置的位置查看控制台，以下是我的放置位置



下载好的文件解压到控制台显示的位置
打包配置：
build里面公共配置有：

buildResources //指定打包需要的静态资源，默认是build
output //打包生成的目录，默认是dist，我这里做了修改
productName  // 打包之后的名称

	"appId": "this.is.tasky",
    "productName": "Tasky",
    "copyright": "Copyright © 2021 Alaso",
    "directories": {
      "buildResources": "build",
      "output": "eledist"
 },

打包Windows需要添加的打包配置
下面展示一些 内联代码片。

 "win": {
        "target": ["msi","nsis"], #安装包的格式，默认是"nsis"
        "icon": "build/icons/icon.ico" # 安装包的图标
    },
    "nsis": { # 是 windows 系统安装包的制作程序，它提供了安装、卸载、系统设置等功能
      "oneClick": false, #是否一键安装，默认为 true
      "language": "2052", #安装语言，2052 对应中文
      "perMachine": true, #为当前系统的所有用户安装该应用程序
      "allowToChangeInstallationDirectory": true #允许用户选择安装目录
    }

打包Mac需要添加的打包配置

  "mac": {
    "target": ["dmg", "zip"],       #安装包的格式，默认是"dmg"和"zip"
    "category": "public.app-category.utilities"  #应用程序安装到哪个分类下，具体有哪些分类可以在苹果官网上找
  },
  "dmg": {
    "background": "build/background.jfif",   #安装窗口背景图
    "icon": "build/icons/icon.icns",         #安装图标
    "iconSize": 100,                         #图标的尺寸
  "contents": [                            #安装图标在安装窗口中的坐标信息
     {
       "x": 380,
       "y": 180,
       "type": "link",
       "path": "/Applications"
     },
     {
       "x": 130,
       "y": 180,
       "type": "file"
     }
  ],
  "window": {                             #安装窗口的大小
     "width": 540,
     "height": 380
  }
}

打包之后会根据当前的操作系统打包出默认的文件

icon 图标 win-unpacked 打包后的各种文件在这里可以找到
latest 打包结果的描述文件
tasky setup.exe 安装文件