用Electron将web网页程序包装成桌面应用
前提
web 端页面，真的太容易一不小心关掉了，或者,标签页比较多的时候不太容易找到,所以决定快速包装一个认识electron
electron快速入门搭建electron项目
第一步 创建项目,下载依赖init初始化命令会提示您在项目初始化配置中设置一些值mkdir my-electron-app && cd my-electron-app
npm init
npm install --save-dev electron (devDependencies:只在开发环境中使用的依赖，最后不会被打包到项目中)
{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js","author": "Jane Doe","license": "MIT"}
编写文件 需要我们编写两个文件index.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</body></html>
main.js
// 在文件头部引入 Node.js 中的 path 模块const path = require('path')// app 它控制应用程序的事件生命周期。// BrowserWindow 模块，它创建和管理应用程序 窗口。const {app, BrowserWindow } = require('electron');// 创建浏览器窗口function createWindow () {//__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)const mainWindow = new BrowserWindow({width: 1000,height: 800,})// 本地文件//mainWindow.loadFile('index.html')// 线上页面mainWindow.loadURL('/')// 打开控制台mainWindow.webContents.openDevTools()};// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()})// 部分 API 在 ready 事件触发后才能使用。// 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口app.whenReady().then(() => {createWindow()app.on('activate', function () {// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他打开的窗口，那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})})
打包 采用electron-builder打包 electron-buildernpm install --save-dev electron-builder 配置打包信息
"build": {"appId": "com.baidu.app",//包名 "productName": "baidu",//项目名 这也是生成的exe文件的前缀名"dmg": {"icon": "public/icon/icons.icns"},"win": {"icon": "public/icon/icons.ico"}},
图标icon,mac要求是icns,win要求是ico ico生成网址文件转换器,png转icon
效果图
浏览器桌面应用
