electron入门
来源:互联网 发布:陈奕迅失忆蝴蝶知乎 编辑:程序博客网 时间:2024/05/17 16:45
介绍
目前,使用前端技术开发桌面应用已经越来越成熟,这使得前端同学也可以参与桌面应用的开发。目前类似的工具有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.jsipcRenderer.on('asynchronous-reply', (event, arg) => { console.log('asynchronous-reply: %O %O', event, arg);});ipcRenderer.send('asynchronous-message', 'hello');// main.jsipcMain.on('asynchronous-message', (event, arg) => { // 返回消息 event.sender.send('asynchronous-reply', 'ok');});
上面的代码是异步监听过程。 主进程设置好监听,渲染进程通过ipcRenderer.send()
发送消息。主进程获得消息后,通过event.sender.send()
返回信息。返回信息也是异步的,所以渲染进程也设置了监听。 另外,electron还提供了一种同步的消息传递方式。代码如下:
/ renderer.jsconsole.log('synchronous-message: ', ipcRenderer.sendSync('synchronous-message', 'hello'));// main.jsipcMain.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 http://baidu.com // 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
,win32
4个值;arch可以取ia32
,x64
两个值。
需要注意,打包后,代码中的所有路径都必须使用绝对路径,通过${__dirname}
获得app的根路径,然后拼接成绝对路径。
- 【Electron】Electron开发入门
- electron入门
- electron入门
- Electron 快速入门
- Electron开发入门
- electron的入门学习
- Electron入门资源
- Electron入门笔记
- electron入门心得
- Electron 快速入门
- (一)Electron入门介绍
- Electron入门笔记:安装篇
- 【Electron】Electron开发入门(一):开发环境搭建
- 【Electron】Electron开发入门(二):创建项目Hello Word
- 【Electron】Electron开发入门(四):操作PC端文件系统
- 【Electron】Electron开发入门(五):项目打包
- Electron
- electron
- 从尾到头打印链表
- Linux:shell-if判断
- linux socket tcp server 解决客户端socket断开后, 服务器端进程退出的问题
- linux使用过程中遇到的问题
- 加解密技术(Cryptography)基本概念
- electron入门
- 退出登录清楚以前的activity
- 责任链模式Swift版
- 通过tmux远程
- Nginx负载均衡概览
- 0x757da832 处有未经处理的异常: Microsoft C++ 异常: 内存位置 0x0052f888 处的 cv::Exception。
- Linux wget详解
- Redis学习笔记之十二:Redis复制(数据同步)
- webpack学习入门(4个核心概念)