electron使创建桌面端应用变得很简单，如果你可以建一个网站，你就可以用同样的技术建一个桌面应用程序。从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。(备注：electron网站访问需要梯子。)

入门例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 克隆这仓库
git clone https://github.com/electron/electron-quick-start
# 进入仓库
cd electron-quick-start

# 特别注意，由于国内网络问题，需要配置使用国内镜像才能正常安装（阿里巴巴镜像）
# 创建文件 .npmrc 并添加以下内容：
# PS:运行electron时会出现 Alibaba PC Safe service进程，作用不明。
registry=https://registry.npmmirror.com
sass_binary_site=https://npmmirror.com/mirrors/node-sass/
phantomjs_cdnurl=http://npmmirror.com/mirrors/phantomjs
ELECTRON_MIRROR=http://npmmirror.com/mirrors/electron/

# 安装依赖库
npm install
# 运行应用
npm start

# 打包构建成exe文件
npm run package

 我在这个electron-quick-start基础上，直接修改代码，实现demo2所有功能（不包含数据库），完整代码可在项目代码里的/demo2/electron-quick-start找到。

构建打包

 对于很多客户来说，一个exe桌面应用才算得上真正的客户端，可以通过构建打包做出exe应用。exe文件运行效果：

 可在百度网盘下载demo2-electron-app-win32-x64，在自己电脑上运行一下。
 现在官方文档的构建步骤（Windows)是需要安装Visual Studio 2017的，心想我电脑硬盘只剩下个几十G不一定能装得下来，同时记得以前不是这样的，所以搜索了一下，可以使用
electron-builde或electron-packager，前者功能更强但我折腾了半天没成功（神秘的力量导致某些依赖包下载不成功），后者一下就搞定了。

实现demo2功能

 demo2是基于express框架构建出来的，一开始我想移植过去后来寻找方案时看大家的交流才发现，其实已经不再需要express框架。demo2里，客户端是浏览器，服务器端是express框架，浏览器可能是这里打开，服务器端有可能部署在云服务器，两者是分开使用的，所以两者之间是通过HTTP与websocket进行数据通信。而在electron里，两者是绝对在一起的，所以并不需要通过HTTP与websocket进行通信。
 首先是将相关文件移植过来，包括index.html、mongodb.js、tcp-client.js、tcp-server.js，以及图片、前端所引用到的JS文件。
 index.html修改如下：将引用CDN的JS文件以及样式都下载到本地。因为 Electron 在运行环境中引入了 Node.js，所以在 DOM 中有一些额外的变量，比如 module、exports 和require。 这导致 了许多库不能正常运行，因为它们也需要将同名的变量加入运行环境中，按文档进行变量重命名，以保证第三方JS库正常使用。

1
2
3
4
5
6
7
8
9
10
11
<!-- 使Jquery正常使用 -->
<script>
    window.nodeRequire = require;
    delete window.require;
    delete window.exports;
    delete window.module;
</script>
<link rel="stylesheet" href="./stylesheets/style.css">
<script src="./javascripts/jquery.min.js"></script>
<link href="./stylesheets/bootstrap.min.css" rel="stylesheet">
<script src="./javascripts/bootstrap.min.js"></script>

 在index.js里要引用nodejs相关的模块时，就要使用nodeRequire(...)而不再是require(...)，比如：const { ipcRenderer } = nodeRequire('electron')

 electron是分主进程与渲染进程，index.html所引用的index.js是渲染进程，而根目录main.js是主进程。在主进程里，我们开启了tcp-server，并通过ipc通信使两者传输数据。ipcMain模块是EventEmitter类的一个实例。 当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息。 从渲染器进程发送的消息将被发送到该模块。官方文档例程：

1
2
3
4
5
6
7
8
9
10
11
12
// 在主进程中.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.sender.send('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})

1
2
3
4
5
6
7
8
//在渲染器进程 (网页) 中。
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

附录

  • 新一代的桌面开发软件是tauri，它将以更好的性能，更小的体积取代electron。

FAQ

  1. 安装时总是卡在安装electron怎么办？
    答：可能是墙的原因，国内淘宝官方做出了相关镜像：
    在根目录新建文件.npmrc，填入：
    1
    2
    3
    4
    registry=https://registry.npmmirror.com
    sass_binary_site=https://npmmirror.com/mirrors/node-sass/
    phantomjs_cdnurl=http://npmmirror.com/mirrors/phantomjs
    ELECTRON_MIRROR=http://npmmirror.com/mirrors/electron/