本软件完成状况
未完成~~
在做软件之前
在做软件之前我们很有必要把主进程和渲染器这两种类型的进程的概念给大家介绍一下。这很重要 , 他跟浏览器结构很相似,
什么是进程(process)
我们打开任务管理器,每一行都是一个进程
浏览器
在最早期浏览器大多使用单个进程来处理多个标签页 虽然这样打开的标签页消耗的性能很小,但是就意味着一个标签的页面崩溃或者无响应,就会影响到整个浏览器。 所以为了解决这问题, Chrome 团队决定让每个标签页在自己的进程中渲染就像下面图一样
Electron 应用程序的结构和Chrome非常相似 !
Electron主进程
- 每个 Electron 应用都有一个单一的主进程(只有一个)，作为应用程序的入口点。 主进程在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力。
- 他也可以调Electron 的API 如打开目录 上传文件 等等
也就是在我们的main.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()
})
复制代码运行结果
提示 打开Electron页面控制台 View->Toogle Developer Tools的方式手动打开
本心
本篇文章的初衷是通过封装这么一个小工具达到学习Electron的目的, 最后产出的程序只做开发学习之用,不作任何商用.
源代码
本文章的相关代码地址: github.com/weshmily/Ma…