虽然 B/S 是目前开发的主流，但是 C/S 仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，再加上 Web 开发的低成本、高效率的优势，这种跨平台方式越来越受到开发者的喜爱。
Electron 是一个基于 Chromium 和 Node.js，使用 HTML、CSS 和 JavaScript 来构建跨平台应用的跨平台开发框架，兼容 Mac、Windows 和 Linux。目前，Electron 已经创建了包括 VScode 和 Atom 在内的大量应用。
一、准备工作
创建Electron跨平台应用之前，需要先安装一些常用的工具，如Node和Electron等。
安装node在前说过就不详细说了。安装Electron。
npm install -g electron// 或者cnpm install -g electron// 验证是否安装成功electron -v
二、创建项目
创建运行项目
Electron官方提高了一个简单的项目，可以执行以下命令将项目克隆到本地。
git clone /electron/electron-quick-start
安装依赖
cd electron-quick-startnpm install
运行
npm start
效果图
三、更改内容
在我们的项目可以顺利启动以后，我们需要对项目做一些更改，来运行我们需要的内容。
放入静态文件
在项目根目录新建static文件夹，将静态文件放入。更改main.js
/** @Description: 主入口文件* @Author: cuiht* @Date: -01-13 15:58:29* @LastEditTime: -01-14 15:04:16*/// Modules to control application life and create native browser windowconst {app,globalShortcut,screen,dialog,BrowserWindow,Menu,} = require("electron");const path = require("path");function createWindow() {// 去除菜单栏Menu.setApplicationMenu(null);// 创建窗口const mainWindow = new BrowserWindow({width: screen.getPrimaryDisplay().workAreaSize.width * 0.9,height: screen.getPrimaryDisplay().workAreaSize.height * 0.9,fullscreen: true,webPreferences: {nodeIntegration: true,preload: path.join(__dirname, "preload.js"),},});// //配置ESC键退出全屏globalShortcut.register("ESC", () => {mainWindow.close();});// //配置F11切换全屏// globalShortcut.register("F11", () => {// mainWindow.setFullScreen(!mainWindow.isFullScreen());// });// 加载静态文件mainWindow.loadFile("static/index.html");// 监听窗口关闭mainWindow.on("close", (e) => {e.preventDefault();dialog.showMessageBox({type: "info",title: "提示",defaultId: 0,message: "确定要退出吗？",buttons: ["最小化", "退出"],}).then((result) => {if (result.response === 0) {e.preventDefault();mainWindow.minimize();} else {app.exit(); //exit()直接关闭客户端，不会执行quit();}}).catch((err) => {console.log(err);});});// 监听程序崩溃mainWindow.webContents.on("crashed", () => {const options = {type: "error",title: "进程崩溃了",message: "这个进程已经崩溃.",buttons: ["重载", "退出"],};recordCrash().then(() => {dialog.showMessageBox(options).then((result) => {if (result.response === 0) {reloadWindow(mainWindow);} else {app.exit();}}).catch((err) => {console.log(err);});}).catch((e) => {console.log("err", e);});});}// 崩溃日志请求function recordCrash() {return new Promise((resolve) => {// 崩溃日志请求成功....resolve();});}// 重载窗口function reloadWindow(mainWin) {if (mainWin.isDestroyed()) {app.relaunch();app.exit(0);} else {BrowserWindow.getAllWindows().forEach((w) => {if (w.id !== mainWin.id) w.destroy();});mainWin.reload();}}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.whenReady().then(() => {createWindow();app.on("activate", function () {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow();});});// Quit when all windows are closed, except on macOS. There, it's common// for applications and their menu bar to stay active until the user quits// explicitly with Cmd + Q.app.on("window-all-closed", function () {if (process.platform !== "darwin") app.quit();// 注销所有快捷键globalShortcut.unregisterAll();});// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.
目录
四、打包为exe文件
安装打包工具electron-packager
cnpm install electron-packager -g
打包
在项目根目录运行
electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules --electron-version 5.0.0
注意事项各个参数介绍：
HelloWorld ：你将要生成的exe文件的名称
--platform=win32：确定了你要构建哪个平台的应用,可取的值有 darwin, linux, mac, win32
--arch=x64：决定了使用 x86 还是 x64 还是两个架构都用
--icon=computer.ico：自定义设置应用图标
--out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的out文件夹
--asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在，否则会以文件夹形式存在
--app-version=0.0.1：生成应用的版本号
--overwrite：覆盖原有的build,让新生成的包覆盖原来的包
--ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去
--electron-version 5.0.0：指定当前要构建的electron的版本,需要和当前的版本一致,具体可以在package.json文件中查看,可以不加该参数，如果不一致，会自动下载，不建议设置
可以将打包命令写入 package.json中方便后续开发。
eg:
"scripts": {"start": "electron .","package": "electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"},
发现当下载到electron-v1.8.3-win32-x64.zip 停留很久并且没有网速的时候，因为electron压缩包的服务器在国外，所以网速很慢而且不稳定，所有在下载之前把下载镜像的地址切换为淘宝的
npm config set ELECTRON_MIRROR /mirrors/electron/
然后运行
npm run package
在打包过程中如国提示下载文件，可以通过npm set ELECTRON_MIRROR=/mirrors/electron/，将下载文件的地址设置到淘宝镜像减少麻烦。
打包成功
打包后会生成如下文件夹，点击运行HelloWorld.exe，就可以了。
文件目录效果图效果图
参考文献：electronjs
世界的模样，取决于你凝视它的目光，自己的价值取决于你的追求与心态。一切美好的愿望，不是在等待中拥有，而是在奋斗中争取！
