2.Electron-封装地图瓦片下载小工具(MapDownload) [主进程和渲染器进程]

最新推荐文章于 2024-09-06 23:04:25 发布

前端小孟

最新推荐文章于 2024-09-06 23:04:25 发布

阅读量1.2k

点赞数

分类专栏： Electron 文章标签： electron chrome javascript 主进程渲染器进程

本文链接：https://blog.csdn.net/qq_27118895/article/details/122172605

版权

Electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本软件完成状况

未完成~~

在做软件之前

在做软件之前我们很有必要把主进程和渲染器这两种类型的进程的概念给大家介绍一下。这很重要 , 他跟浏览器结构很相似,

什么是进程(process)

我们打开任务管理器,每一行都是一个进程
在这里插入图片描述

浏览器

在最早期浏览器大多使用单个进程来处理多个标签页 虽然这样打开的标签页消耗的性能很小,但是就意味着一个标签的页面崩溃或者无响应,就会影响到整个浏览器。
所以为了解决这问题, Chrome 团队决定让每个标签页在自己的进程中渲染就像下面图一样

盗个图
Electron 应用程序的结构和Chrome非常相似 !

Electron主进程

每个 Electron 应用都有一个单一的主进程(只有一个)，作为应用程序的入口点。主进程在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力。
他也可以调Electron 的API 如打开目录 上传文件 等等

也就是在我们的main.js文件里
mian.js

Electron渲染进程

他是窗口里面的内容可以有多个,每个对应一个窗口
每一个窗口里的内容都是独立的进程
也支持调用node.js API 和DOM API
提供一部分Electron 的API

对应代码preload.js 和 renderer.js

但是默认renderer.js文件不能使用Nodejs API, 只能使用DOM API

BrowserWindow

创建一个渲染进程(也就是一个窗口)

main.js

const {
  app,
  BrowserWindow
} = require('electron')

const path = require('path')

function createWindow() {
  // 创建一个窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加入内容页面
  mainWindow.loadFile('index.html')
}

// electron加载完成
app.whenReady().then(() => {
  createWindow()
})

preload.js

//所有的Node.js api都在预加载过程中可用。  
//它有相同的沙盒作为Chrome扩展。  

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

效果

主进程和渲染进程通讯

Electron使用IPC 在进程通讯和Chrome完全一致
主进程和渲染进程通讯很重要他能连接我们的页面(渲染)和主进程沟通, 可以完成如上传文件, 操作本地文件等功能

在这里插入图片描述

举个例子

preload.js

//所有的Node.js api都在预加载过程中可用。  
//它有相同的沙盒作为Chrome扩展。  
const {
  ipcRenderer
} = require("electron")

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }

   //例子开始
  ipcRenderer.send("meg", "Hello") // 发送消息

  ipcRenderer.on("reply", (event, msg) => {
    console.log(msg)// 打印在浏览器控制台
  })
  //例子结束

})

main.js

const {
  app,
  BrowserWindow,
  ipcMain
} = require('electron')

const path = require('path')

function createWindow() {
  // 创建一个窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加入内容页面
  mainWindow.loadFile('index.html')
   //例子开始
  //接收消息
  ipcMain.on("meg", (event, msg) => {
    console.log(msg)// 打印在CMD控制台

    event.sender.send("reply",'Hello too')
  })
  //例子结束
}

// electron加载完成
app.whenReady().then(() => {
  createWindow()
})