Electron[5] 渲染进程和主进程

这篇具有很好参考价值的文章主要介绍了Electron[5] 渲染进程和主进程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 进程

Electron里头的进程分为渲染进程和主进程。简单理解:

  1. main.js就是主进程
  2. 每个页面就是渲染进程
  3. 一个Electron应用仅有一个主进程,可以有多个渲染进程
    上面的这些概念很重要,不展开细讲。

2 进程职责

主进程是用来实现应用的基础功能,包括跟底层的系统交互等。渲染进程是用来实现具体每个页面的功能。
那么当渲染进程需要跟系统底层进行交互的时候,怎么处理呢?目前有两种方式:

  1. 在渲染进程里头直接引用支持跟底层进行交互的包,然后直接实现跟底层的交互(十分不推荐)
  2. 渲染进程将事件委托给主进程,让主进程来完成。(推荐)
  3. 事件委托是通过事件监听和触发来实现的。

3 渲染进程与Native API

虽然上面说了,不建议渲染进程直接调用Native API,但是还是要说下,渲染进程如何实现直接调用底层API。

之所以不建议渲染进程直接调用Native API是因为,渲染进程调用原生能力,其实是从主进程同步过来的,那么在应用的使用过程,就要不断的实现主进程和渲染进程之间的原生能力载体的状态同步,这个同步是十分耗费宿主机资源的。

3.1保存文件

下面的案例是讲解下如何通过渲染进程直接调用原生API。

3.1.1 渲染进程页面

先用h5画出包含有一个文本框和用来保存的按钮。
源码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>electron从入门到精通</title>
</head>
<body> 
    <button type="button" id="saveBtn">保存文件</button>
    <textarea id="textArea" style="position:absolute;top:60px;bottom:0;left:0;right:0;"></textarea>
<script src="./test.js"></script>
</body>
</html>

然后test.js的源码如下:

const { dialog } = require('@electron/remote')
//引入fs模块
var fs = require('fs')
//获取文本框的dom 
var textAreaDom = document.querySelector('#textArea')
var saveBtn = document.getElementById('saveBtn')

// 文件保存路径,第一保存后,就缓存起来
var currentPath = null
saveBtn.addEventListener('click',function(){
    if (currentPath) {
        writeFile(currentPath)
    } else {
    	// 调用native api实现文件保存
        dialog.showSaveDialog({properties:['showOverwriteConfirmation']}).then(({canceled,filePath})=>{
            if (!canceled) {
                writeFile(filePath)
                currentPath = filePath
            }
        })
    }
    
})
function writeFile(path,){
    fs.writeFileSync(path, textAreaDom.value)

}

到这边要停下来下,缓一缓捋一捋。
首先,我们需要在渲染进程里头引用node的包,fs包,其次,还用到了remote的依赖包。因此还需要做如下操作:

  • 安装@electron/remote,版本:2.0.12
npm install @electron/remote@2.0.12
  • 调整渲染进程窗口的创建配置。创建窗口是在main.js里实现的,下面直接附上整个main.js的文件:
		// main.js
	const { app, BrowserWindow} = require('electron')
	const path = require('path')
  
	// *************************1.引入remote模块******************************
	const remote = require("@electron/remote/main");
	remote.initialize();

	function createWindow () {
		const mainWindow = new BrowserWindow({
			width: 800,
			height: 600,
			webPreferences:{
				//  渲染进程 开启node模块,使得JS中可以使用node的model
				nodeIntegration:true,
				// 开启 remote 模块
				enableBlinkFeatures:true,
				// 控制上下文隔离
				contextIsolation:false,
				//由于安全问题,remote模块默认关闭
				enableRemoteModule: true,//开启remote模块
				//关闭web权限检查,允许跨域
				webSecurity: false,
			}
		})

		mainWindow.loadFile('./src/index.html')
			// 默认打开调试工具
		mainWindow.webContents.openDevTools()
		// ********2.启用remote模块,渲染进程就可以使用主程序模块********************
		remote.enable(mainWindow.webContents);  
	}
	
	app.whenReady().then(() => {
	  createWindow()
	
	  app.on('activate', () => {
	    if (BrowserWindow.getAllWindows().length === 0) {
	      createWindow()
	    }
	  })
	})
	
	app.on('window-all-closed', () => {
	  if (process.platform !== 'darwin') {
	    app.quit()
	  }
	})

至此,源码分享就结束了。

4 源码解释

4.1 test.js和Electron的原生能力

上面主要麻烦的就是test.js里头的dialog的使用。这个调用的是原生能力的弹窗,其实像原生能力的使用,不知道都觉得很麻烦,但是,如果知道了,就不难,下面附上原生能力的工具字典:
app | Electron

4.2 remote模块

不同版本的Electron使用的remote是不一样的,main.js里头关于remote的配置,以及渲染进程里头的remote的引用都是跟版本挂钩了,大家如果一意孤行还要用使用不推荐的方式来使用原生能力的话,那么配置就按照上面的来做即可了。文章来源地址https://www.toymoban.com/news/detail-758262.html

到了这里,关于Electron[5] 渲染进程和主进程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • electron+vue3全家桶+vite项目搭建【13.1】ipc通信的使用,主进程与渲染进程之间的交互

    electron项目常常由一个主进程和多个渲染进程构成,渲染进程之间是隔离的,而所有渲染进程都和主进程共享资源。 所有的渲染进程都是由主进程创建的 每个窗口都对应着一个渲染进程 所有的渲染进程共享一个主进程 我们主进程与渲染进程交互,渲染进程与渲染进程交互【

    2024年02月10日
    浏览(61)
  • Electron实战之进程间通信

    进程间通信(IPC)并非仅限于 Electron,而是源自甚至早于 Unix 诞生的概念。尽管“进程间通信”这个术语的确创造于何时并不清楚,但将数据传递给另一个程序或进程的理念可以追溯至 1964 年,当时 Douglas McIlroy 在 Unix 的第三版(1973 年)中描述了 Unix 管道的概念。 例如,我

    2024年02月22日
    浏览(35)
  • Electron 进程间通信的实现

    在 Electron 中,可以使用多种方式实现进程间通信(IPC,Inter-Process Communication),以下是几种常见的实现方式: 使用 Electron 提供的 ipcMain 和 ipcRenderer 模块进行通信。主进程使用 ipcMain 模块监听事件,渲染进程使用 ipcRenderer 模块发送事件。 示例: 主进程: 渲染进程: 使用

    2024年02月10日
    浏览(77)
  • Vite + Vue3 + Electron实现进程通信

    Electron 是一个基于 Chromium 和 Node.js 的桌面应用程序开发框架,而 Vue3 则是一种流行的前端框架。将两者结合使用可以快速地打造出跨平台的桌面应用程序。在这种组合中,Electron 提供了强大的桌面应用开发能力,而 Vue3 则提供了易用的 UI 组件和开发体验 Electron 内置了 Chrom

    2024年02月12日
    浏览(45)
  • 使用vue3+vite+elctron构建小项目介绍Electron进程间通信

    进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。 由于主进程和渲染器进程在 Electron 的进程模型具有不同的职责,因此 IPC 是执行许多常见任务的唯一方法,例如从 UI 调用原生 API 或从原生菜单触发 Web 内容的更改。 在 Electron 中,进程使用 ipcM

    2024年02月06日
    浏览(62)
  • Electron:Electron整合vue

    主要思路:分别启动两个进程,一个是vue,另一个是electron。然后在electron通过loadURL去引入vue的主页面。但怎么才能将这两个项目整合成一键启动呢?请看后文! TODO

    2024年01月19日
    浏览(38)
  • 正确安装Electron、Electron-quick-start和Electron Forge

    Electron Forge引用了Squirrel.windows项目,这导致Electron Forge生成的安装包只能安装在本地用户帐户中。 Or maybe you’re good at reinvent the wheel and can read this part of the documentation. ElectronForge文档 - 扩展 - 制作工具 Squirrel.Windows的Github议题 - Choosing install directory 打开命令行工具,输入 如果正

    2024年02月06日
    浏览(43)
  • 【electron 4】electron配置打包环境

    window需要:ico mac需要:icns linux需要png 借助:electron-icon-builder 安装: 配置package.json scripts 说明: input:icon.png是我需要引入的图标 output:是我将input引入图标所转换不同大小不同格式的图标输出文件 因为我是已有的项目了,所以这里我只需要安装并引入electron-forge,虽然我进

    2024年04月28日
    浏览(37)
  • 【Electron】electron与cljs的处理

    实现效果: 前言: 如何用cljs的方式,编写electron应用,可以实现多窗体应用 要使用ClojureScript(CLJS)编写一个 Electron 应用程序,并实现多窗体功能,您可以按照以下步骤进行操作: 设置开发环境: 安装 Node.js:确保您的计算机上安装了 Node.js,因为 Electron 依赖于它。 安装

    2024年02月07日
    浏览(36)
  • electron、electron-forge 安装

    npm修改了registry,安装依旧无效 使用cnpm 倒是可以解决,但是 npx electron-forge import 中 Installing dependencies 使用的是npm 给出一次性解决方案: step1:切换npm的下载源,可以使用nrm 进行管理,有很多写的了,就不赘述了。 或者直接修改 (ps:如果你还想修改回来,可以记录一下现

    2024年02月13日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包