electronjs实战聚诊客户端

前言

瑞富让我写一个能够读取本地文件的客户端,我问他用啥技术栈。他说随便,于是我对比了一些,还是选择了electronjs技术。
官网首页上面说明了,这是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用的一个平台。
Electron 基于 Chromium 和 Node.js, 使用 HTML, CSS 和 JavaScript 构建你的应用。它的成功作品也有很多,比如vsc,Slack等等。

实战步骤

官方提供了一个quick-start,我基于此进行了聚诊客户端桌面版的开发。

克隆这仓库

$ git clone https://github.com/electron/electron-quick-start

进入仓库

$ cd electron-quick-start

安装依赖库

$ npm install

运行应用

$ npm start

代码分析

简单的来说就是main.js负责窗口啥的,主要线程。renderer.js
是渲染线程,负责窗口里面的显示。

结束

发现张鑫旭大大已经写过一篇了。我就不重复了,地址在这里。我这里只把他没有写的压缩问题记录一下。
首先使用electron-packager打包之后,即使把node_module目录删掉也会有130M+。所以更好的建议是使用electron-builder,electron-builder是基于electron-packager,可以直接打包成setup.exe,只有30M左右。有利于分发。部分截图如下:
1、package.json文件

2、render部分代码

3、electron-packager打包功能

4、electron-builder打包功能

5、聚诊桌面端部分功能