Electron
环境搭建
首先要安装 Node.JS。安装好以后用下面的指令检测一下
node -v npm -v
注意，electron内嵌nodejs。这部分与您安装的node.js是相互独立的。
安装electron
找个空文件夹，输入下面的命令
mkdir my-electron-app cd my-electron-app yarn init
mkdir是创建文件夹的指令。cd是进入某个文件夹的指令。
可以合并为一条 mkdir my-electron-app && cd my-electron-app。但有可能会报错
您的 package.json 应如下所示
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"license": "MIT"
}main入口默认是index.js，需要改为main.js。另外，在发布时应当加上author和description，用于表明作者和应用概述。
然后，安装electron
yarn add --dev electron
基本项目
创建两个文件：main.js文件和index.html文件。
在html中写入
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!</h1>
我们正在使用 Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
和 Electron <span id="electron-version"></span>.
<!-- 您也可以此进程中运行其他文件，例如vue、react -->
<script src="./renderer.js"></script>
</body>
</html>在main.js中写入
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
mainWindow.loadFile('index.html')
// 打开开发工具
// mainWindow.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。在 preload.js 中写入
// preload.js
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})打包发布
使用electron-forge进行打包。先安装依赖
yarn add --dev @electron-forge/cli
执行命令进行打包
注意！！打包前，package.json中的author和description要补充完整
npx electron-forge import