个人随笔
目录
Electron学习：初探Electron
2024-11-21 22:06:26

前言

这个其实没什么好记录的，主要就是参考官方文档的快速入门，几乎是照搬。
https://www.electronjs.org/zh/docs/latest/

一、Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

在使用Electron进行开发之前，您需要安装 Node.js。

二、建立第一个Electron程序

1、安装node.js

https://www.suibibk.com/topic/885088639694929920

2、创建项目

在项目目录下面新建一个项目文件夹，我这里叫做hello-electron,然后cmd进入到该目录下面执行如下命令

  1. npm init

init初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的，有几条规则需要遵循：

  • entry point 应为 main.js.
  • author 与 description 可为任意值，但对于应用打包是必填项。

这里第二条很重要，在打包分发的时候如果没有设置author和description会报错。

上面执行完后就会得到一个package.json在你的文件夹下面

  1. {
  2.   "name": "hello-electron",
  3.   "version": "1.0.0",
  4.   "description": "test",
  5.   "main": "main.js",
  6.   "author": "forever",
  7.   "license": "MIT"
  8. }

3、安装electron的依赖

这里只需要在项目目录下面执行如下命令即可

  1. npm install --save-dev electron

等执行完就可以在开发工具里面打开该项目了，有可能会有用户遇到如下问题

  1. reify:@types/node: timing reifyNode:node_modules/global-agent Completed in 193ms

明明已经切了镜像源也没有用，此时我们可以在用户目录下面的.npmrc文件下面加上如下内容。

  1. registry=https://registry.npmmirror.com
  2. electron_mirror=https://npmmirror.com/mirrors/electron/

然后重新执行，大概率就可以了。

4、package.json添加启动脚本

在开发工具中打开后，在 package.json配置文件中的scripts字段下增加一条start命令：

  1. {
  2.   "scripts": {
  3.     "start": "electron ."
  4.   }
  5. }

然后后续只需要执行

  1. npm start

5、添加运行主进程main.js

任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程。

在您项目的根目录下创建一个名为main.js的文件加入如下内容

  1. const { app, BrowserWindow } = require('electron')
  2. const path = require('node:path')
  3. const createWindow = () => {
  4.   const win = new BrowserWindow({
  5.     width: 800,
  6.     height: 600,
  7.     webPreferences: {
  8.       preload: path.join(__dirname, 'preload.js')
  9.     }
  10.   })
  12.   win.loadFile('index.html')
  13. }
  15. app.whenReady().then(() => {
  16.   createWindow()
  17.   app.on('activate', () => {
  18.      if (BrowserWindow.getAllWindows().length === 0) createWindow()
  19.   })
  20. })
  22. app.on('window-all-closed', () => {
  23.   if (process.platform !== 'darwin') app.quit()
  24. })

6、创建index.html页面

上面的运行主进程中，需要index.html，这里我们在当前目录下面新建，内容自定义，这里跟官网一致，如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  6.     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  7.     <title>Hello World!</title>
  8.   </head>
  9.   <body>
  10.     <h1>Hello World!</h1>
  11.     We are using Node.js <span id="node-version"></span>,
  12.     Chromium <span id="chrome-version"></span>,
  13.     and Electron <span id="electron-version"></span>.
  14.   </body>
  15. </html>

7、创建预加载脚本preload.js

我们不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。 它们存在于完全不同的进程！
预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。

  1. window.addEventListener('DOMContentLoaded', () => {
  2.   const replaceText = (selector, text) => {
  3.     const element = document.getElementById(selector)
  4.     if (element) element.innerText = text
  5.   }
  7.   for (const dependency of ['chrome', 'node', 'electron']) {
  8.     replaceText(`${dependency}-version`, process.versions[dependency])
  9.   }
  10. })

上面的代码访问 Node.js process.versions 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。

8、将额外功能添加到网页中

对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。 由于渲染器运行在正常的 Web 环境中，因此您可以在 index.html 文件关闭 </body> 标签之前添加一个 <script> 标签，来包括您想要的任意脚本。

这里我们建立一个renderer.js

  1. alert(1)

然后在index.html的前加上

  1. <script src="./renderer.js"></script>

三、运行项目

1、启动项目测试

上面我们已经建好了一个electron程序，然后这里来测试下。执行

  1. npm start

然后回弹出


看内容，我们果然弹出了额外功能的1，然后也取到了各种版本号。

四、打包

最快捷的打包方式是使用 Electron Forge。

到这里我们得打包成一个exe可执行文件才算体验完全流程，这里要记得，打包的时候需要把程序关了，不然会报错。

执行如下命令,将 Electron Forge 添加到您应用的开发依赖中，并使用其”import”命令设置 Forge 的脚手架

  1. npm install --save-dev @electron-forge/cli
  2. npx electron-forge import

然后执行打包命令

  1. npm run make

注：对于命令 npm run **，如果 ** 是 start 字样，就可以省略 run 字样。

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到：


点击执行exe文件发现跟上面运行的效果一样。

五、所有代码

通过新建然后运行打包，我们跑完了整个流程，这里总结下用到的一些命令和代码。

1、命令

  1. #创建项目
  2. npm init
  3. #安装electron的依赖
  4. npm install --save-dev electron
  5. 就可以启动应用程序啦。
  6. #启动执行
  7. npm start
  8. #安装 Forge 的脚手架
  9. npm install --save-dev @electron-forge/cli
  10. npx electron-forge import
  11. #打包
  12. npm run make

2、最终项目结构

3、package.json

  1. {
  2.   "name": "hello-electron",
  3.   "version": "1.0.0",
  4.   "description": "testnpm ",
  5.   "main": "main.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "start": "electron-forge start",
  9.     "package": "electron-forge package",
  10.     "make": "electron-forge make"
  11.   },
  12.   "author": "forever",
  13.   "license": "ISC",
  14.   "devDependencies": {
  15.     "@electron-forge/cli": "^7.5.0",
  16.     "@electron-forge/maker-deb": "^7.5.0",
  17.     "@electron-forge/maker-rpm": "^7.5.0",
  18.     "@electron-forge/maker-squirrel": "^7.5.0",
  19.     "@electron-forge/maker-zip": "^7.5.0",
  20.     "@electron-forge/plugin-auto-unpack-natives": "^7.5.0",
  21.     "@electron-forge/plugin-fuses": "^7.5.0",
  22.     "@electron/fuses": "^1.8.0",
  23.     "electron": "^33.2.0"
  24.   },
  25.   "dependencies": {
  26.     "electron-squirrel-startup": "^1.0.1"
  27.   }
  28. }

4、index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  6.     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  7.     <title>Hello World!</title>
  8. </head>
  9. <body>
  10. <h1>Hello World!</h1>
  11. We are using Node.js <span id="node-version"></span>,
  12. Chromium <span id="chrome-version"></span>,
  13. and Electron <span id="electron-version"></span>.
  14. <script src="./renderer.js"></script>
  15. </body>
  16. </html>

4、main.js

  1. const { app, BrowserWindow } = require('electron')
  2. const path = require('node:path')
  3. const createWindow = () => {
  4.   const win = new BrowserWindow({
  5.     width: 800,
  6.     height: 600,
  7.     webPreferences: {
  8.       preload: path.join(__dirname, 'preload.js')
  9.     }
  10.   })
  12.   win.loadFile('index.html')
  13. }
  15. app.whenReady().then(() => {
  16.   createWindow()
  17.   app.on('activate', () => {
  18.      if (BrowserWindow.getAllWindows().length === 0) createWindow()
  19.   })
  20. })
  22. app.on('window-all-closed', () => {
  23.   if (process.platform !== 'darwin') app.quit()
  24. })

5、preload.js

  1. window.addEventListener('DOMContentLoaded', () => {
  2.   const replaceText = (selector, text) => {
  3.     const element = document.getElementById(selector)
  4.     if (element) element.innerText = text
  5.   }
  7.   for (const dependency of ['chrome', 'node', 'electron']) {
  8.     replaceText(`${dependency}-version`, process.versions[dependency])
  9.   }
  10. })

6、renderer.js

  1. alert(1)

六、总结

参照官网就对了
https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

 16

啊！这个可能是世界上最丑的留言输入框功能~


当然，也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2