Electron 应用

前言

什么是 Electron？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

进程模型

Electron 应用由一个主进程和若干渲染进程组成：

1. 主进程（main）：运行 package.json main 字段指定的脚本，掌管窗口生命周期、系统 API（菜单、托盘、文件对话框等），能使用全部 Node.js API
2. 渲染进程（renderer）：每个 BrowserWindow 一个页面进程，只负责渲染 Web 页面；出于安全默认无法直接使用 Node API，需要通过 preload 桥接

搭建 Web 应用桌面端壳子

初始化项目

在一个空白目录下进行操作

// 初始化npm项目
npm init -y
// 查看npm源
npm config get registry
// 设置淘宝源
npm config set registry https://registry.npmmirror.com/

// 下载node18
nvm install 18.0.0
// 使用node18
nvm use 18.0.0
// 查看当前node版本
node -v

依赖安装

electron

// 下载electron
npm install --save-dev electron

Electron Forge

// electron打包分发库
npm install --save-dev @electron-forge/cli

// 引入到项目中
npx electron-forge import

目录结构 && 依赖

image-20240109104354388

package.json

{
  "name": "electron-tools",
  "version": "1.2.0",
  "description": "Electron集成Vue",
  "main": "main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "keywords": [
    "Electron",
    "Vue3",
    "Tools"
  ],
  "author": "Sunshine",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^7.2.0",
    "@electron-forge/maker-deb": "^7.2.0",
    "@electron-forge/maker-rpm": "^7.2.0",
    "@electron-forge/maker-squirrel": "^7.2.0",
    "@electron-forge/maker-zip": "^7.2.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
    "electron": "^28.1.1"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
}

codes

main.js（主入口）

/**
 * app：控制应用程序的事件生命周期
 * BrowserWindow：创建和管理应用程序窗口
 */
const { app, BrowserWindow } = require("electron");
const path = require("path");

// 构建窗口
const createWindow = () => {
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			// 预加载脚本
			// __dirname：指向当前正在执行脚本的路径
			preload: path.join(__dirname, "preload.js")
		}
	});

	// 加载网页地址
	win.loadURL("http://60.204.186.245/");
	// 加载html文件
	// win.loadFile("./dist/index.html");
};

// 当app的whenReady()触发后再生成窗口
app.whenReady().then(() => {
	createWindow();

	// 检测当前窗口是否打开成功，若未打开成功再次调用
	app.on("activate", () => {
		if (BrowserWindow.getAllWindows().length === 0) createWindow();
	});
});

// 监听关闭全部窗口事件
app.on("window-all-closed", () => {
	// 非macOS系统，darwin代表macOS
	if (process.platform !== "darwin") app.quit();
});

preload.js（预加载文件）

/**
 * 预加载脚本
 * contextBridge：定义全局对象，定义给内部使用
 * ipcRenderer：在渲染进程中向主进程发送消息，并接收来自主进程的回复
 */
const { contextBridge, ipcRenderer } = require("electron");

// 定义一个全局对象versions
contextBridge.exposeInMainWorld("versions", {
	// 将应用中的 Chrome、Node、Electron 版本号暴露至渲染器
	node: () => process.versions.node,
	chrome: () => process.versions.chrome,
	electron: () => process.versions.electron
});

命令行

// 启动本地服务
yarn start
// 打包
yarn make

最终效果

image-20240109104850522

image-20240109104909244