简单介绍
目前网上有好多关于electron相关的文章,但是本人在开发的时候发现,网上大部分文章可以说是千篇一律,没有真正的痛点解析啥的很无语 ,好多的问题都需要自己去找、去试,这无异于加大了开发成本与学习成本,所以本篇博客会从electron 的api 到 electron vue 组合式开发到 打包 及开发过程中遇见的问题分门别类的进行说明, 当然在最后的文末我会将我写的 electron vue全家桶的git开源项目附上,需要的话就去git 吧
electron基础 (基础补习)
官方文档
什么是electron
Electron 是一个框架,可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序。 然后这些应用程序可以打包在macOS、Windows和Linux上直接运行,或者通过Mac App Store或微软商店分发。 通常,您使用每个操作系统特定的本地应用程序框架为操作系统 (OS)创建一个桌面应用程序。 Electron 可以在使用您已经知道的技术后写入您的应用程序。
electron 的两个进程(重点)
electron 主要分为两个进程 分别是主进程和渲染进程
- 主进程 通过创建 浏览器窗口 实例来创建 个网页。 每一个
浏览窗口
实例在其渲染过程中运行网页. 当一个BrowserWindow
实例被摧毁时,对应的渲染过程也被终止。 -主进程 管理所有 个网页及其对应的渲染过程。 渲染进程 只能管理 个相应的网页。 在一个渲染过程中崩溃不会影响其他渲染过程。 渲染进程 通过IPC 与主进程通信 在网页上执行GUI操作。 由于安全考虑和可能的资源泄漏,直接从渲染器过程中调用与本地GUI有关的API受到限制。 流程之间的通信可以通过进程间通信模块进行:ipcMain
和ipcRenderer
接下来分别说一下渲染进程和主进程
/* 个人认为electron的难点的主要就是 主进程和渲染进程之间的通信,
其次就是关于electron的api了,接下来我们一起来揭开这个小东西的神秘面纱吧!!
*/
创建主脚本文件
代码语言:javascript复制主脚本指定了您将运行主进程的 Electron 应用程序的入口点(通常情况下是 main.js 文件)【后续代码结构中会有示例说明】。 通常,在主进程中运行的脚本控制应用程序的生命周期,并显示图形用户界面及其元素。 执行本机操作系统交互,并在网页中创建渲染程序。 Electron 应用程序只能有一个主流程。 主脚本可以如下所示:
1. const { app, BrowserWindow } = require('electron')
2.
3. function createWindow () {
4. const win = new BrowserWindow({
5. width: 800,
6. height: 600,
7. webPreferences: {
8. nodeIntegration: true
9. }
10. })
11.
12. win.loadFile('index.html')
13. win.webContents.openDevTools()
14. }
15.
16. app.whenReady().then(createWindow)
17. app.on('window-all-closed', () => {
18. if (process.platform !== 'darwin') {
19. app.quit()
20. }
21. })
22.
23. app.on('activate', () => {
24. if (BrowserWindow.getAllWindows().length === 0) {
25. createWindow()
26. }
27. })
28.
这段代码说的是啥嘞