More than code
Welcome to the website

使用electron构建跨平台Node.js桌面应用

1. 前言

很久没有玩electron,工作中又不上,只能自己默默搞搞,那么今天来看一下,如何构建一个基本的electron桌面应用

2. 如何使用electron把基本的开发环境给跑起来

首先,electron官方提供了一个名为“electron-quick-start”的示例项目,地址为:https://github.com/electron/electron-quick-start

把资源搞下来,如果你是下载Zip包解压的,则资源默认都会放在一个名为“electron-quick-start-master”的文件夹中,把“electron-quick-start-master”改成你项目的名字,当然你不改也没关系。

克隆git仓储

# Clone this repository
git clone https://github.com/electron/electron-quick-start

切换到项目根目录

# Go into the repository
cd electron-quick-start

通过npm安装

# Install dependencies
npm install

启动程序

# Run the app
npm start

环境就这么跑起来了。Ctrl + R就可以刷新。

一旦环境跑起来,接下来的工作就跟做一个网页几乎就没什么区别,加载点CSS,图片,JS什么的,就可以了。因为本质上,electron就是给你搞了一个Chrome浏览器的壳子,只是比传统网页多了一个访问桌面文件的功能。

当然,具体操作并不可能像嘴皮子动的那么简单,前期还是需要了解一些基础知识。

index.html是打开的窗口加载的页面,可以看成是入口页面,就是一个普通的静态页面,没什么特殊的。

renderer.js默认里面就一堆注释,用来放业务相关JS的,和网页JS的区别在于,这里的JS不仅可以访问DOM,还能使用Node.js所有的API。能前能后,想怎么玩都行。

main.js 用于创建窗口和处理系统时间。

3. electron开发好的应用该如何发布

electron桌面在自己的开发环境下跑起来了,跑通了,如让其他小伙伴也能方便快捷地使用呢?我们的目标是windows系统下直接点击个.exe文件,Mac OS X直接点击.app文件就可以跑起来

我们需要使用专门的打包工具,我是使用的electron-packager,首先全局安装一下:

npm install electron-packager -g

然后就可以执行打包了,例如:

electron-packager . point --out ../electron

这段语句表示的意思是把当前文件目录下的资源(.)命名为point打包到父级的electron文件夹。

此时electron-packager就会自动判别当前的操作系统打包对应的文件,例如windows系统下就会打包成.exe格式。

运行里面的.exe即可启动应用

如果你想一次性把所有的操作系统都打包一遍,可以在上面打包语句后面加上-all

由于打包的时候会把浏览器内核完整打包进去,所以就算你的项目开发就几百k的资源,但最终的打包文件估计有40到50M。

 

3. electron发布好的桌面应用如何有效升级?

我们平常的桌面软件要升级的话,一般都需要下载完整的安装包。electron作为桌面应用,似乎也逃脱不了这种宿命,但实际上,在绝大部分场景下,我们根本就无需要下载完整的安装包,因为electron-packager打包的其实是浏览器内核和主线程控制脚本,具体的业务代码全部都是独立在app文件夹下的,也就是说,只要我们的桌面应用主线程逻辑不变,什么UI样式调整,什么交互效果改变,什么业务逻辑变更,我们都只要更新app文件夹下的这资源就可以了。当然,我们的桌面应用可以做成自动检测是否有版本更新以及在线升级,升级的内容就是CSS,HTML,image或者JS这些静态资源。

4. 结束语

有了electron,理论上所有基于的Node.js的工具都可以桌面化,例如,小图标合并,图片压缩等等。后续将制作实用小工具发布在http://works.lishuaishuai.com/

赞(0) 打赏
未经允许不得转载:李帅帅空间 » 使用electron构建跨平台Node.js桌面应用

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏