一口气完成electron的入门进修

2024年5月28日 243次阅读 来源: chenhao_ch

引见

现在，运用前端手艺开辟桌面运用已愈来愈成熟，这使得前端同砚也能够介入桌面运用的开辟。现在相似的东西有electron，NW.js等。这里我们偏重引见下electron。

electron开辟

electron是基于Node.js和Chromium做的一个东西。electron是的能够运用前端手艺完成桌面开辟，而且支撑多平台运转。下面来说下怎样运用electron开辟桌面app。

hello world

一个最简朴的electron项目包括三个文件, package.json, index.html, main.js。
package.json是Node.js项目的设置文件，index.html是桌面运用的界面页面，main.js是运用的启动进口文件。个中，中心的文件是inde.html和main.js，下面来说下这两个文件的细节。
index.html是运用的展现界面，代码以下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

main.js是electron运用的进口文件。重要用户启动electron的界面。能够经由历程以下代码来启动electron界面。

const electron = require('electron');
const { app } = electron;
const { BrowserWindow } = electron;
let win;
function createWindow() {
  // 建立窗口并加载页面
  win = new BrowserWindow({width: 800, height: 600});
  win.loadURL(`file://${__dirname}/index.html`);

  // 翻开窗口的调试东西
  win.webContents.openDevTools();
  // 窗口封闭的监听
  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

上面的代码就完成了一个hello world的electron运用。代码写完后，须要运转代码看看结果，这个时刻须要运用electron-prubuilt来运转代码。
起首，我们须要装置electron-prubuilt包。能够经由历程敕令npm install --saved-dev electron-prebuilt举行装置。装置完成后，项目当地就能够运用electron敕令，直接运转敕令electron .就能够看到hello world的结果。或许能够在package.json中设置scripts，轻易项目的运转。
详细代码能够去这里猎取。

主历程与衬着历程

electron中，由package.json中的main.js运转出来的历程为主历程(Main Process)。主历程用于建立GUI界面以便web页面的展现。electron由Chromium担任页面的显现，所以当建立一个页面时，就会对应的建立衬着历程(Renderer Process)。
主历程经由历程建立BrowserWindow对象来建立web显现页面，BrowserWindow运转在他本身的衬着历程中。当BrowserWindow被烧毁时，对应的衬着历程也会停止。

在衬着历程中，直接挪用原生的GUI接口是非常风险的。假如你想在衬着历程中运用原生的GUI的功用，须要让衬着历程与主历程举行通讯，再由主历程去挪用对应接口。那末主历程和衬着历程是怎样举行通讯的呢？
electron中，主历程与衬着历程的通讯存在多种要领。这里引见一种，经由历程ipcMain和ipcRenderer对象，以音讯的体式格局举行通讯。
先来看下主历程怎样向衬着历程发信息。
起首，衬着历程经由历程接口ipcRenderer.on()来监听主历程的音讯信息。主历程经由历程接口BrowserWindow.webContents.send()向一切衬着历程发送音讯。相干代码以下：

// renderer.js
// 引入ipcRenderer对象
const electron = require('electron');
const ipcRenderer = electron.ipcRenderer;
// 设置监听
ipcRenderer.on('main-process-messages', (event, message) => {
  console.log('message from Main Process: ' , message);  // Prints Main Process Message.
});

// main.js
// 当页面加载完成时，会触发`did-finish-load`事宜。
win.webContents.on('did-finish-load', () => {
  win.webContents.send('main-process-messages', 'webContents event "did-finish-load" called');
});

那末衬着历程须要给主历程发作音讯该怎样做呢？

// renderer.js
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log('asynchronous-reply: %O %O', event, arg);
});
ipcRenderer.send('asynchronous-message', 'hello');

// main.js
ipcMain.on('asynchronous-message', (event, arg) => {
  // 返回音讯
  event.sender.send('asynchronous-reply', 'ok');
});

上面的代码是异步监听历程。 主历程设置好监听，衬着历程经由历程ipcRenderer.send()发送音讯。主历程取得音讯后，经由历程event.sender.send()返回信息。返回信息也是异步的，所以衬着历程也设置了监听。
别的，electron还供应了一种同步的音讯通报体式格局。代码以下:

// renderer.js
console.log('synchronous-message: ', ipcRenderer.sendSync('synchronous-message', 'hello'));

// main.js
ipcMain.on('synchronous-message', (event, arg) => {
  event.returnValue = 'ok';
});

主历程与衬着历程互相通报数据的例子能够去这里猎取。

调试

一个app的开辟历程，会用到代码调试，那末electron应当怎样举行调试呢？
electron中，衬着历程由于是Chromium的页面，所以能够运用DevTools举行调试。启动DevTools的体式格局是：在main.js中，建立好BrowserWindow后，经由历程接口BrowserWindow.webContents.openDevTools();来翻开页面的DevTools调试东西，举行页面调试，详细的调试要领和运用Chrome举行调试一致。
主历程是基于Node.js的，所以electron的调试和Node.js相似。这里说下在VS Code中怎样举行electron主历程的调试。
第一步，设置VS Code的tasks，用于启动electron。相干设置以下:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0",
  "command": "electron",
  "isShellCommand": true,
  "showOutput": "always",
  "suppressTaskName": true,
  "args": ["--debug=5858", "."]
}

个中，--debug=5858是用于调试Node.js的端口。
第二步，设置VS Code项目的调试设置。能够天生launch.json，内容以下：

{
  "version": "0.2.0",
  "configurations": [ {
      "name": "Attach",
      "type": "node",
      "address": "localhost",
      "port": 5858,
      "request": "attach"
    }
  ]
}

个中的port:5858的端口信息须要和上面的--debug=5858端口保持一致。
设置完成后，便能够最先调试主历程。
起首启动electron项目。
由于上面设置了task，所以能够运用VS Code的task举行启动。按下快捷键shift + command + p能够启动敕令，输入task electron敕令，回车，就能够运转electron的task举行项目的启动。
项目启动后，再最先设置主历程代码的断点。在VS Code的调试界面中设置断点，并点击运转。这个时刻，操纵启动的electron运用，当运转到断点地点代码时，就能够触发断点调试。

扩大功用

electron除了运用前端手艺完成界面展现的功用外，还供应了大批的桌面环境接口。比方支撑Notification，Jump List, dock menu等。详细支撑哪些桌面接口以及怎样运用，能够去http://electron.atom.io/docs/… 相识。

打包

完成功用代码后，我们须要将代码打成可运转的包。能够运用electron-packager来举行运用打包，electron-packager支撑windows, Mac, linux等体系。详细引见能够去https://github.com/electron-u… 相识。
打包的步骤很简朴，只须要两步：

  1. 全局装置Node.js模块electron-packager。

  2. 运转敕令： electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]。 个中platform能够取darwin, linux, mas, win324个值；arch能够取ia32, x64两个值。
    须要注重，打包后，代码中的一切途径都必须运用绝对途径，经由历程${__dirname}取得app的根途径，然后拼接成绝对途径。

    原文作者：chenhao_ch
    原文地址: https://segmentfault.com/a/1190000006207600
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞