介绍

目前，使用前端技术开发桌面应用已经越来越成熟，这使得前端同学也可以参与桌面应用的开发。目前类似的工具有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... 了解。
打包的步骤很简单，只需要两步：

全局安装Node.js模块electron-packager。
运行命令： electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]。其中platform可以取darwin, linux, mas, win324个值；arch可以取ia32, x64两个值。
需要注意，打包后，代码中的所有路径都必须使用绝对路径，通过${__dirname}获得app的根路径，然后拼接成绝对路径。

一口气完成electron的入门学习相关推荐

最全面的openGL 入门学习
自己在找openGL学习资料的时候,找到此篇openGL入门学习(虽然不是移动开发,但给我提供了非常好的思路),所以转一下让更多人知道,本文来自http://www.cppblog.com/doing ...
OpenGL编程入门学习
OpenGL编程入门学习非常详细的教程,很适合初学者本文转自:http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html === ...
OpenGLGLUT入门学习
本文为转载,原文出处:OpenGL入门学习说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的? ...
OpenGL入门学习 (转)
OpenGL入门学习 (转) 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜 ...
【待完善】OpenGL入门学习
严正声明:本文转载自网络,但具体出处未知.如果有读者了解,请联系我更正. 为了阅读方便,我对文字格式进行了修改,并填补了缺少的图片. 我尊重每位作者的权益,如果本文存在侵权行为,请联系我删除并道歉. ...
vs-OpenGL编程入门学习
最近需要用c语言绘图,我用的编译软件是vs2013,有人给我推荐使用opengl库,从网上看到一篇比较详细的入门教程,感觉不错,给大家分享一下本文转自:http://www.cppblog.com/ ...
【转载】OpenGL入门学习
说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640*480分辨率.16色 ...
OpenGL之入门学习
第一个OpenGL程序一个简单的OpenGL程序如下:(注意,如果需要编译并运行,需要正确安装GLUT,安装方法如上所述) #include <GL/glut.h> void myDis ...
Electron从入门到精通
一,Electron 快速入门 1.简介 Electron是利用web前端技术进行桌面应用开发的一套框架,它是由Github开发的,利用HTML.CSS.JavaScript来构建跨平台桌面应用程序的 ...

一口气完成electron的入门学习

介绍

electron开发

hello world

主进程与渲染进程

调试

扩展功能

打包

一口气完成electron的入门学习相关推荐

最新文章

热门文章