浅谈electron
官网： https://www.electronjs.org/
使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象，可以构建跨平台桌面程序， 本身支持node.js，可以使用node.js的一些模块
主进程
在 Electron 中，运行 package.json 主脚本的过程称为主进程 (main process)。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI (图形用户界面（Graphical User Interface)。
一个 Electron 应用有且只有一个主进程。并且创建窗口等所有系统事件都要在主进程中进行。
由于 main 进程本质上是一个完整的 node 环境，所以除了以下两个文件之外，并没有什么初始的项目结构。
src/main/index.js
这个文件是你应用程序的主文件，electron 也从这里启动。它也被用作 webpack 产品构建的入口文件。所有的 main 进程工作都应该从这里开始。
app/src/main/index.dev.js
这个文件专门用于开发阶段，因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件，但它可以用于扩展你开发的需求。
渲染进程
由于 Electron 使用 Chromium 显示网页，那么，Chromium 的多进程架构也被使用。Electron 中的每个网页都在自己的进程中运行，称为渲染器进程 (renderer process)。
Chromium是由Google主导开发的网页浏览器 Chromium
也就是说每创建一个 web 页面都会创建一个渲染进程。每个 web 页面都运行在它自己的渲染进程中。每个渲染进程是独立的，它只关心它所运行的页面。
主进程与渲染进程的区别
主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程中运行。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。
使用Electron的API
Electron 在主进程和渲染进程中提供了大量 API 去帮助开发桌面应用程序， 在主进程和渲染进程中，可以通过require() 方法将其包含在模块中，以此获取 Electron 的 API。
引入 electron：
const electron = require('electron');
所有 Electron 的 API 都被指派给一种进程类型。许多 API 只能被用于主进程或渲染进程中，但其中一些 API 可以同时在上述两种进程中使用。 每一个 API 的文档都将声明我们可以在哪种进程中使用该 API 。
Electron 中的窗口是使用 BrowserWindow 类型创建的一个实例， 它只能在主进程中使用，如下所示：
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
主进程和渲染进程之间通信
Electron 的主进程是在后台运行，对应 main.js 文件。而渲染进程是前端看到的，对应 index.html 文件。这个两个进程之间的通信首选 ipc 方式，因为它会在完成时返回，而不会阻止同一进程中的其他操作。
IPC（Inter-Process Communication，进程间通信 IPC
异步通信
异步通信，在发送消息之后，不会阻止同一进程中程序的继续运行。下列示例渲染进程发送异步消息 ping 到主进程，然后主进程回答 pong。
示例：
渲染器进程：
const ipc = require('electron').ipcRendererconst asyncMsgBtn = document.getElementById('async-msg')asyncMsgBtn.addEventListener('click', function () {ipc.send('asynchronous-message', 'ping')
})ipc.on('asynchronous-reply', function (event, arg) {const message = `异步消息回复: ${arg}`document.getElementById('async-reply').innerHTML = message
})
主进程：
const ipc = require('electron').ipcMainipc.on('asynchronous-message', function (event, arg) {event.sender.send('asynchronous-reply', 'pong')
})
同步消息
除了以异步方式在进程之间发送消息，我们还可以使用 ipc 模块在进程之间发送同步消息，但是此方法的同步特性意味着它在完成任务时会阻止其他操作。
示例：
渲染器进程：
const ipc = require('electron').ipcRendererconst syncMsgBtn = document.getElementById('sync-msg')syncMsgBtn.addEventListener('click', function () {const reply = ipc.sendSync('synchronous-message', 'ping')const message = `同步消息回复: ${reply}`document.getElementById('sync-reply').innerHTML = message
})
主进程：
const ipc = require('electron').ipcMainipc.on('synchronous-message', function (event, arg) {event.returnValue = 'pong'
})
读写本地文件
使用 electron 的一大好处是 可以访问用户的文件系统。这使你可以读取和写入本地系统上的文件。为了避免 Chromium 的限制以及对应用程序内部文件的改写，请确保使用 electron 的 API，特别是 app.getPath(name) 函数。这个帮助函数可以使你获得指向系统目录的文件路径，如用户的桌面、系统临时文件 等等
electron - vue
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！