electron基础
条评论electron使创建桌面端应用变得很简单,如果你可以建一个网站,你就可以用同样的技术建一个桌面应用程序。从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。(备注:electron网站访问需要梯子。)
入门例子
1 | # 克隆这仓库 |
我在这个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 | //在渲染器进程 (网页) 中。 |
附录
- 新一代的桌面开发软件是tauri,它将以更好的性能,更小的体积取代electron。
FAQ
- 安装时总是卡在安装electron怎么办?
答:可能是墙的原因,国内淘宝官方做出了相关镜像:
在根目录新建文件.npmrc
,填入:1
2
3
4registry=https://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=http://npm.taobao.org/mirrors/phantomjs
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/