electron+vue全家桶开发包含(心得,遇见的坑,解决办法等)

2024-02-29 18:28:38 浏览数 (2)

简单介绍

目前网上有好多关于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受到限制。 流程之间的通信可以通过进程间通信模块进行: ipcMainipcRenderer 接下来分别说一下渲染进程和主进程
代码语言:javascript复制
  /* 个人认为electron的难点的主要就是 主进程和渲染进程之间的通信, 
	其次就是关于electron的api了,接下来我们一起来揭开这个小东西的神秘面纱吧!! 
 */

创建主脚本文件

主脚本指定了您将运行主进程的 Electron 应用程序的入口点(通常情况下是 main.js 文件)【后续代码结构中会有示例说明】。 通常,在主进程中运行的脚本控制应用程序的生命周期,并显示图形用户界面及其元素。 执行本机操作系统交互,并在网页中创建渲染程序。 Electron 应用程序只能有一个主流程。 主脚本可以如下所示:

代码语言:javascript复制
    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.	

这段代码说的是啥嘞

0 人点赞