Electron: 使用纯 JavaScript 调用原生 API创造桌面应用

时间 2019-11-11

标签 electron 使用 javascript 调用原生 api 创造桌面应用栏目 JavaScript 繁體版

原文原文链接

简介

Electron 可让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你能够把它看做是专一于桌面应用而不是 web 服务器的，io.js 的一个变体。javascript

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面做为它的 GUI，因此你能把它看做成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。html

主进程

在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本能够以建立 web 页面的形式展现 GUI。java

渲染进程

因为 Electron 使用 Chromium 来展现页面，因此 Chromium 的多进程结构也被充分利用。每一个 Electron 的页面都在运行着本身的进程，这样的进程咱们称之为渲染进程。node

在通常浏览器中，网页一般会在沙盒环境下运行，而且不容许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，能够与底层操做系统直接交互。linux

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例建立网页。每一个 BrowserWindow 实例都在本身的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。git

主进程管理全部页面和与之对应的渲染进程。每一个渲染进程都是相互独立的，而且只关心他们本身的网页。github

因为在网页里管理原生 GUI 资源是很是危险并且容易形成资源泄露，因此在网页面调用 GUI 相关的 APIs 是不被容许的。若是你想在网页里使用 GUI 操做，其对应的渲染进程必须与主进程进行通信，请求主进程进行相关的 GUI 操做。web

在 Electron，咱们提供用于在主进程与渲染进程之间通信的 ipc 模块。而且也有一个远程进程调用风格的通信模块 remote。npm

打造你第一个 Electron 应用

大致上，一个 Electron 应用的目录结构以下：json

your-app/
├── package.json ├── main.js └── index.html

package.json的格式和 Node 的彻底一致，而且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 package.json 看起来应该像：

{
  "name" : "your-app", "version" : "0.1.0", "main" : "main.js" }

注意：若是 main 字段没有在 package.json 声明，Electron会优先加载 index.js。

main.js 应该用于建立窗口和处理系统时间，一个典型的例子以下：

var app = require('app'); // 控制应用生命周期的模块。 var BrowserWindow = require('browser-window'); // 建立原生浏览器窗口的模块 // 保持一个对于 window 对象的全局引用，否则，当 JavaScript 被 GC， // window 会被自动地关闭 var mainWindow = null; // 当全部窗口被关闭了，退出。 app.on('window-all-closed', function() { // 在 OS X 上，一般用户在明确地按下 Cmd + Q 以前 // 应用会保持活动状态 if (process.platform != 'darwin') { app.quit(); } }); // 当 Electron 完成了初始化而且准备建立浏览器窗口的时候 // 这个方法就被调用 app.on('ready', function() { // 建立浏览器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加载应用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html'); // 打开开发工具 mainWindow.openDevTools(); // 当 window 被关闭，这个事件会被发出 mainWindow.on('closed', function() { // 取消引用 window 对象，若是你的应用支持多窗口的话， // 一般会把多个 window 对象存放在一个数组里面， // 但此次不是。 mainWindow = null; }); });

最后，你想展现的 index.html ：

<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using io.js <script>document.write(process.version)</script> and Electron <script>document.write(process.versions['electron'])</script>. </body> </html>

运行你的应用

一旦你建立了最初的 main.js， index.html 和 package.json 这几个文件，你可能会想尝试在本地运行并测试，看看是否是和指望的那样正常运行。

electron-prebuild

若是你已经用 npm 全局安装了 electron-prebuilt，你只须要按照以下方式直接运行你的应用：

electron .

若是你是局部安装，那运行：

./node_modules/.bin/electron .

手工下载 Electron 二进制文件

若是你手工下载了 Electron 的二进制文件，你也能够直接使用其中的二进制文件直接运行你的应用。

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

OS X

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app 里面是 Electron 发布包，你能够在这里下载到。

--------------------------------转至w3cschool