虽然 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 https://github.com/electron/electron-quick-start
- 安装依赖
cd electron-quick-start
npm install
- 运行
npm start
效果图
三、更改内容
在我们的项目可以顺利启动以后，我们需要对项目做一些更改，来运行我们需要的内容。
- 放入静态文件
在项目根目录新建static文件夹，将静态文件放入。 - 更改main.js
/*
* @Description: 主入口文件
* @Author: cuiht
* @Date: 2021-01-13 15:58:29
* @LastEditTime: 2021-01-14 15:04:16
*/
// Modules to control application life and create native browser window
const {
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"
},
然后运行
npm run package
在打包过程中如国提示下载文件，可以通过npm set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/，将下载文件的地址设置到淘宝镜像减少麻烦。
-
打包成功
打包后会生成如下文件夹，点击运行HelloWorld.exe，就可以了。
文件目录
效果图
效果图
参考文献：electronjs
世界的模样，取决于你凝视它的目光，自己的价值取决于你的追求与心态。一切美好的愿望，不是在等待中拥有，而是在奋斗中争取！
网友评论