资讯专栏INFORMATION COLUMN

一口气完成electron的入门学习

Ethan815 / 637人阅读

摘要:目前类似的工具有,等。在渲染进程中,直接调用原生的接口是十分危险的。这里介绍一种,通过和对象,以消息的方式进行通信。主进程获得消息后,通过返回信息。另外,还提供了一种同步的消息传递方式。打包完成功能代码后,我们需要将代码打成可运行的包。

介绍

目前,使用前端技术开发桌面应用已经越来越成熟,这使得前端同学也可以参与桌面应用的开发。目前类似的工具有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.htmlmain.js,下面来讲下这两个文件的细节。
index.html是应用的展示界面,代码如下:



  
    
    Hello World!
  
  
    

Hello World!

We are using node , Chrome , and Electron .

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中,主进程与渲染进程的通信存在多种方法。这里介绍一种,通过ipcMainipcRenderer对象,以消息的方式进行通信。
先来看下主进程如何向渲染进程发信息。
首先,渲染进程通过接口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 --platform= --arch= [optional flags...]。 其中platform可以取darwin, linux, mas, win324个值;arch可以取ia32, x64两个值。
需要注意,打包后,代码中的所有路径都必须使用绝对路径,通过${__dirname}获得app的根路径,然后拼接成绝对路径。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91650.html

相关文章

  • Electron,从玩玩具心态开始,到打造出一款越来越优秀桌面客户端产品

    摘要:首发于酷家乐前端博客标题是我以第一视角基于开发客户端产品的体验,我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触到去开发客户端产品,最后随着业务和功能的复杂度提升再不断地优化客户端。 首发于酷家乐前端博客 标题是我以第一视角基于 Electron 开发客户端产品的体验,我将在之后分一系列文章向有兴趣的朋友一步一步介绍我是怎么从玩玩具的心态开始接触 Ele...

    Markxu 评论0 收藏0
  • Electron指南 - 快速入门

    摘要:快速入门提供了丰富的本地操作系统的,使你能够使用纯来创建桌面应用程序。这并不意味着是一个绑定图形用户界面的库。每个页面在里是运行在自己的进程里,这些进程被称为渲染进程。有些只能在该事件发生后才能被使用。 快速入门 Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面...

    SQC 评论0 收藏0
  • Electron入门介绍

    摘要:本文主要讲解的入门。可以帮助我们管理包的下载依赖部署发布等。可以认为是中的。后续使用中,全部替换为即可。命令根据它,自动下载所需模块用于创建窗口和处理系统事件安装包的位置。 Electron是什么 可以认为Electron是一种运行环境库,我们可以基于此,用HTML、JS和CSS写桌面应用。PC端的UI交互,主要有web应用和桌面应用。具体采用哪种方式,主要看系统的应用场景,哪个更合适...

    wing324 评论0 收藏0
  • Electron写桌面应用入门

    摘要:本节目标你可以在分钟内开始运行一个最简单。是一个能帮你用来写桌面程序的项目。原先是为打造的,后来直接演化成兄弟项目。现在已经有很多大厂也开始使用来写桌面了。全局安装,因为我们要用到它的命令行。完美天才第一步,达成 本节目标:你可以在10分钟内开始运行一个最简单electron app。不要考虑太多的概念,直接复制粘贴开始吧。 Electron是一个能帮你用JS来写桌面程序的node项目...

    lixiang 评论0 收藏0
  • Electron 快速入门

    摘要:当一个实例被销毁后,相应的渲染进程也会被终止。之所以命名为,主要是为了与主进程这个概念对应。部分在事件触发后才能使用。当全部窗口关闭时退出。主进程接收到消息并处理之后,会返回处理结果。 简介 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron,我们可以使用纯 JavaScript 来调用丰...

    Drummor 评论0 收藏0

发表评论

0条评论

Ethan815

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<