electron 构建跨平台桌面应用

昨日(2016.09.13)本文发表后,获得了一定的阅读和转发量,但经部分网友反馈和仔细审核后发现,在与 NW.js 对比的环节,言辞欠妥,且数据的真实性有待考究,特此将争议部分删除,同时借此诚挚地向 NW.js 的作者以及各位读者反馈表示感谢,期待更多深入的交流和分享,修订后的版本如下:

Stack Overflow 联合创始人 Jeff Wood 曾说过,任何一个能用 JavaScript 编写的应用系统,最终都必将使用 JavaScript 实现。

简介

Electron 是一款可以通过 Web前端技术 构建跨平台桌面应用的框架。其原名为 Atom Shell, 是 Github 社区原本为 Atom 编辑器设计的一个跨平台应用外壳,它将 Chromium 和 Node.js 的事件循环整合在一起,并提供了一些与原生系统交互的 API。

简单地说,通过 Electron,我们可以使用自己所熟悉的前端技术轻松构建出一款能运行在Windows, Linux 和 Mac 上的桌面级应用程序。

现阶段已有许多优秀的桌面应用都是基于 Electron 开发,其中如 Atom 编辑器,VS Code 和 Postman 等等都是我们所熟知的,下面列出这当中的部分应用,是不是看到了许多熟悉的图标呢?

Hello World

案例运行

使用下面三步即可构建最简单的 Hello World 桌面程序。

1. 克隆官方的例子
$ git clone https://github.com/electron/electron-quick-start

2. 进入项目目录
$ cd electron-quick-start

3. 安装项目依赖后执行该程序
$ npm install && npm start

运行效果如下:

案例分析

察看目录结构如下:

.
├── .gitignore    
├── index.html
├── LICENSE.md
├── main.js
├── package.json
├── README.md
└── renderer.js

主要分为三个部分:

  • package.json: 定义了项目的依赖以及程序的主入口文件 main.js。
  • main.js: 负责创建应用窗口,并赋予其与当前操作系统的原生GUI交互的功能。
  • index.html: 定义了页面的渲染内容,即 “Hello World” 字符串。

Electron 程序启动时,会产生两条进程,分别是主进程和渲染进程,main.js 脚本执行的环境就是主进程,负责管理和维护着渲染进程的生命周期,拥有绝大部分 node模块 的调用能力;而在 main.js 中创建的每一个窗体则对应着一个渲染进程,它们之间相互独立,且都具备部分 Node模块 的功能。

主进程与渲染进程的关系如下图所示,它们之间通过 IPC 模块进行消息交互,关于 IPC 模块的使用,下面会提到。

功能模块

这个部分将介绍 Electron 里面常用到的几个功能模块。

IPC

上面提到,Electron 中包含了主进程和渲染进程,事实上主进程就是一个后台进程,掌控着渲染进程的创建与销毁动作,且官方提供的绝大部分模块也只能在该进程中调用。

主进程与渲染进程之间的通信通过 IPC(进程间通信)模块完成,IPC模块可划分为 ipcMain 和 ipcRenderer 两个部分,其中 ipcMain 对应 主进程中的 IPC模块,而 ipcRenderer 则是在渲染进程中使用,下面直接看个例子:

main.js:

// 引入 ipcMain 模块
const ipcMain = require('electron').ipcMain;
// 监听 ‘blabla’ 通道,收到消息后输出,并向 'blibli' 通道发送消息
ipcMain.on('blabla', function(event, arg) {
    console.log(arg);
    event.sender.send('blibli', 'hello client!');
})

index.html:

// 引入 ipcRenderer 模块
const ipcRenderer = require('electron').ipcRenderer;  
// 向 'blabla' 通道发送消息
ipcRenderer.send('blabla', 'hello server!');
// 监听 ‘blibli’ 通道, 收到消息后输出
ipcRenderer.on('blibli', function(event,arg) {
  console.log(arg);
});

输出效果正如你所期望那样:

main.js:

hello server!

index.html:

hello client!

remote

上面提到了大部分模块只能在主进程中调用,为了突破这种限制,Electron 官方还提供了 remote 模块以简化进程间的通讯。

通过 remote 模块,渲染进程可以方便地引用主进程中的模块和全局变量等。

main.js:

global.person = {
  name: 'boxizen',
  sex : 'male',
  age : 24
}

index.html:

// 引用 remote 模块
const remote = require('electron').remote;
// 输出 main.js 中定义的 person 全局对象的 age 属性值
console.log(remote.getGlobal('person').age);

输出效果(index.html):

24

webview

webview 是个比较有趣的标签,可以将线上的页面嵌入进 Electron app 中,与 iframe 不同的是,webview 和应用运行的是不同的进程,不拥有渲染进程的权限。

下面将演示如何将微信网页版嵌入进 Electron 应用里,只需要简单的两步:

index.html:

<webview autosize="on" src="https://wx.qq.com/" style="display:inline-flex; width:1000px; height:764px"></webview>

main.js:

mainWindow = new BrowserWindow({width: 1000, height: 764, resizable: false})

效果图:

这样一个PC版的微信就大功告成了,实际上就是利用 webview 标签加载微信网页版的在线地址,再在main.js中调整窗体大小以适配网页版的微信,是不是很简单呢。

webview 对象中包含 insertCSS()executeJavaScript() 两个方法,表示可以插入样式代码和执行 js 脚本,这样我们就可以对加载页面中的样式及交互逻辑进行修改。默认的 webview 没有 node 功能,而如果设置了 nodeintegration 属性,它将整合node,拥有可以使用系统底层的资源。

此外 webview 中的 preload 属性允许在页面的脚本执行前预加载一个指定的脚本,下面我们利用该属性和 executeJavaScript() 方法实现 electron 版微信的未读消息角标展示。

index.html:

// 这里使用 preload 属性预加载了 badge.js 脚本
<webview id="foo" autosize="on" preload="badge.js" src="https://wx.qq.com/" style="display:inline-flex; width:1000px; height:764px"></webview>

var webview = document.getElementById("foo");      
  webview.addEventListener('dom-ready', function () {             
  webview.executeJavaScript('badge.get()');
});

badge.js:

// 引入 IPC 模块
const ipcRenderer = require('electron').ipcRenderer;

badge = {
  get: function () {  
      // 监听微信左侧面板节点变化
    $(".panel").bind('DOMSubtreeModified', function() {          
      var count = 0;       
      // 累加所有未读消息   
      $(".icon.web_wechat_reddot_middle").each(function () {
        count += parseInt(this.textContent);
      });
      // 通过 IPC 发送给主进程
      if (count > 0) {
        ipcRenderer.send('badge-changed', count.toString());
      } else {
        ipcRenderer.send('badge-changed', '');
      }
    })
  }
}

main.js:

const electron = require('electron');
const ipcMain = electron.ipcMain;
const app = electron.app

exports.init = function() {
    // 监听角标通道消息
    ipcMain.on('badge-changed', function (event, num) {
      app.dock.setBadge(num);
    });
}

效果图如下,可以发现 Electron 的 dock 角标显示的未读消息数(11)跟微信中面板中未读消息数量一致:

其他

当然 Electron 中还有许多实用的模块,如作为桌面应用必不可少的 MenuTray 模块、拥有调用当前操作系统功能的 Shell 模块、NW.js 中不具备的自动更新功能 - autoUpdater 模块、自动提交奔溃报告的 crashReporter 模块和全局快捷键模块 global-shortcut 等等,此处不做过多介绍。

打包构建

Electron 打包的方式有很多种,常见的有 electron-builder、electron-packager 和 asar几种,在这里我使用的是 electron-packager 作为应用的打包工具。

首先还是得先安装 electron-packager:

npm install electron-packager --save-dev 

然后在 package.json 中编写构建命令,下面生成了分别在 Windows 和 Mac 下的两条构建命令:

"scripts": {
    "start": "electron .",
    "build-win": "electron-packager . doubanFM --platform=win32 --arch=x64 --version=1.2.6 --icon=./fm.ico --overwrite",
    "build-mac": "electron-packager . doubanFM --platform=darwin --arch=x64 --version=1.2.6 --icon=./fm.icns --overwrite"
  },

执行构建命令, done!

npm run build-mac

最后贴一张最近利用 Electron 构建的桌面版豆瓣FM的截图:

参考资料:

原文发布于微信公众号 - QQ音乐技术团队(gh_287053a877e6)

原文发表时间:2016-09-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端人人

React多页面应用4(webpack自动化生成多入口页面)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包...

5945
来自专栏沈唁志

WordPress基于腾讯云COS存储站点图片及跨域解决方法

7483
来自专栏腾讯NEXT学位

JavaScript全栈开发-工具篇(下)

? 文章目录 ? 四、测试工具 1. 单元测试 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。常见的单元测试工具有: * ...

1252
来自专栏静默虚空的博客

Webpack 代码分离

Webpack 代码分离 ? 提示: 1、版本问题 本文基于 webpack 2.x 版本。webpack 2.x 相比 webpack 1.x 有重大...

2957
来自专栏DT乱“码”

myeclipse去除jsp校验错误

选择你的工程右击菜单 >> 点击MyEclipse菜单项的Exclude From Validation,如果你的工程里还 有其它需要它检验其合法性建议可以针对...

2555
来自专栏ionic3+

ionic cordova resources问题说明

ionic cordova resources是用于一键打包生成各分辨率icon和splash的命令,在使用过程中可能会遇到以下问题:

1292
来自专栏linux驱动个人学习

高通调试 SPI 屏的 bug

3362
来自专栏V站

WordPress丨如何利用.htaccess文件进行缓存?

将以上代码一字不漏的扔进website中的 .htaccess文件,规律是以秒计算,自行修改!

3124
来自专栏小特工作室

Navi.Soft31.WebMVC框架(含示例地址)

1概述 1.1应用场景 互联网高速发展,互联网软件也随之越来越多,Web程序越来越被广泛使用.它部署简单,维护方便,深得众多软件公司使用 Bootstrap前端...

2237
来自专栏张戈的专栏

WordPress静态缓存三剑客,强力推荐!

之前一直用的 wp-super-cache,效果确实非常不错!网络不出问题的话,页面基本秒开。可惜,这款插件有时候会缓存我的手机主题,导致在电脑上浏览时,呈现的...

4635

扫码关注云+社区

领取腾讯云代金券