最近,用Electron写了一个桌面应用,是一个比较简单的应用,所以用的东西都是最浅的,做一个总结吧。
Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。
安装
因为是基于nodejs,所以先要安装nodejs,这就不多说了
创建一个项目文件夹,执行
1 | npm init |
之后在安装electron
这里用的淘宝的镜像,所以是
1 | cnpm install -g electron |
大体上,一个 Electron 应用的目录结构如下:
1 | your-app/ |
package.json的格式和 Node 的完全一致,并且那个被 main 字段声明的脚本文件是你的应用的启动脚本,它运行在主进程上。你应用里的 package.json 看起来应该像:
1 | { |
注意:如果 main 字段没有在 package.json 声明,Electron会优先加载 index.js
快速搭建
clone github上的electron-quick-start项目
按照以下流程便可以快速启动了
1 | git clone https://github.com/electron/electron-quick-start |
实现热更新
如果你不改变菜单以及main.js的情况下,你更新了页面的结构和样式,可以使用==Ctrl+R==来刷新页面,但是修改了main.js,你可能需要频频终止,然后再重新启动,有什么方式可以实现这些文件一发生变化就更新呢?
这里使用的是用gulp创建一个任务。
1 | cnpm install gulp -g //全局安装 |
如果安装中间报错了,说缺失什么模块,
那就先cnpm install 该模块,在重新安装即可。
然后在项目目录下新建==gulpfile.js==
1 | var gulp = require('gulp'); |
在主进程main.js里添加
1 | var client = require('electron-connect').client; |
在每一个渲染进程xx.html页面里都添加上
1 | require('electron-connect').client.create(); |
之后直接通过以下来启动即可。
1 | gulp watch:electron |
因为是基于nodejs,还有其他多种热更新的方式,这里不多说啦。
主进程和渲染进程通信
主进程就是main.js运行的进程
渲染进程即是渲染一个个客户端的前端页面中。
主进程和渲染进程之间通信通过Electron ipcRenderer模块,提供了方法,从渲染进程向主进程发送同步或异步消息. 也可以收到主进程的相应的消息。
消息监听
ipcRenderer 模块有下列方法来监听事件:
1 | ipcRenderer.on(channel, listener) |
监听 channel, 当有新消息到达,使用 listener(event, args…) 调用 listener .
1 | ipcRenderer.once(channel, listener) |
为这个事件添加一个一次性 listener 函数.这个 listener 将在下一次有新消息被发送到 channel 的时候被请求调用,之后就被删除了.
发送消息
1 | ipcRenderer 模块有如下方法来发送消息: |
通过 channel 向主进程发送异步消息,也可以发送任意参数.参数会被JSON序列化,之后就不会包含函数或原型链.
主进程通过使用==ipcMain== 模块来监听 channel,从而处理消息.
1 | ipcRenderer.sendSync(channel[, arg1][, arg2][, ...]) |
注意: 发送同步消息将会阻塞整个渲染进程,除非你知道你在做什么,否则就永远不要用它 .
栗子
在main.js中
1 | const ipcMain = require('electron').ipcMain; |
在渲染进程index.html中
1 | const ipcRenderer = require('electron').ipcRenderer; |
BrowserWindow的一些设置
1 | new BrowserWindow([options]) |
- resizable Boolean - 是否可以改变窗口size,默认为 true。
- frame Boolean - 指定 false 来创建一个 无边框 Window. 默认为 true。
- autoHideMenuBar Boolean - 除非点击 Alt,否则隐藏菜单栏.默认为 false
设置菜单
1 | var template = [ |
设置任务栏
想要在电脑右下方有设置任务栏及图标,需要用到Tray模块。
1 | const electron = require('electron'); |