Electron入门随笔

写在前面

这里是写作文苦手,退堂鼓大师,未来秃头码农,图灵新一届的前端小白。翻了翻公众号往期推文,发现前端的师兄师姐们各个身怀绝技,把我肚子里有的写了个遍。这篇推文就给大家介绍一个前端领域很火的小玩具——Electron。

在近期的图灵招新一轮笔试中,大家想在讲台投影剩余考试时间,这使我催生出用前端做出桌面应用的想法。

如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。--官网

可以说,Electron几乎是前端开发桌面应用的唯一途径,很多大厂都使用 Electron 开发自己的原生应用,微软的Visual Studio Code就是Electron的成功开发案例。

下面我就从一个倒计时网页入手,借助Electron制作适用于macOS和Windows系统的桌面软件。

网页准备

使用Vue框架开发倒计时网页的部分就不献丑了,直接贴build出的代码。

https://github.com/LeUKi/Timer    

安装

Electron官方友好地提供了一个测试demo,在此基础上稍作调整,就可以很轻松地完成转换。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install

在demo项目安装包文件的最后会一并安装Electron,如果下载速度很慢可以提前结束进程,使用cnpm install electron -g加速安装Electron。

安装完后可以输入electron .测试,如果能弹出demo应用窗口,则代表安装完成。

调整文件

我们需要把官方demo的网页演示文件,替换为我们自己的网页。

删除electron-quick-start文件夹内的index.htmlrenderer. js,将之前用Vue写好并build出的页面放进去。

再次输入electron .测试,如果能弹出倒计时应用窗口,则代表替换成功了。

打包应用

上述过程的electron相当于一个另类的浏览器,它能让网页脱离系统浏览器,运行在各种系统上。我们希望分发给用户的东西是个完整体,即开即用,无需编译,所以我们还需要打包应用。

electron-packager是Electron开发常用的打包工具,它可以将Electron项目打包为macOS、Windows和Linux上的可执行文件或者安装文件。

cnpm install electron-packager -g

安装完后在项目根目录输入electron-packager . --platform=win32即可完成Windows应用的打包,针对macOS平台把win32改为darwin即可。

在electron-quick-start-darwin-x64和electron-quick-start-win32-x64文件夹中,我们可以找到对应的程序文件,运行效果和使用electron .测试无异。!

写在最后

很可笑的是,就这么一个简单的网页应用,打包完后两个平台的程序体积都能达到百来兆,而原本的网页文件仅有5.7M。把网页和浏览器安装包放在一起都没这么大 XD

总的来说,对于初入前端的老菜鸟,Electron有很大的吸引力,前端可以不用写