用 Electron 写桌面图形程序要比 Python 强多少？

作者 | 州的先生

出品 | 州的先生（ID：zmister2016）

对于 Python 的主力使用者来说，写桌面图形程序，当然还是首选 Python 的框架。比如：PyQt5、Tkinter。

既顺手，也不用学习别的语言框架的语法，毕竟我们都希望「一招鲜吃遍天」。

但是使用 Python 开发桌面图形程序终究不是主流，其开发形态和组件的丰富程度也在某些方面不如主流的桌面图形程序开发框架。

除了 Qt 之外，常用的桌面图形程序开发工具还有WinForm 、 WPF、Electron等。

在这些主流的桌面图形程序开发工具中，Electron 凭借着近几年前端影响力的扩大，获得了很多拥簇，大有成为桌面图形程序开发首选的趋势。

像企业的「微信开发工具」、代码编辑器「VS Code」、密码管理工具「1Password」等软件都是基于 Electron 进行开发的。

为什么 Electron 能够突然崛起，获得诸多开发者的青睐呢？其采用的技术栈是一个重要的因素。

Electron 基于 Chromium 和 Node.JS，可以使用直接使用传统的前端三剑客——HTML/CSS/JS 进行桌面图形程序的开发。

可以说，Electron 直接让广大的 Web 前端程序员具备了开发桌面图形程序的能力。

下面，我们就来初步体验一下 Electron 的桌面图形程序开发。

安装

因为 Electron 基于 Node.JS，所以我们首先得安装 Node.JS，就像我们用 PyQt5 写程序首先得安装好 Python 一样。

Node.JS 安装好之后，首先来初始化一个 NodeJS项目：

npm init

根据提示输入信息即可，末了会在文件夹内生成一个名为package.json的文件，这是应用的描述文件，其内容如下所示：

{
  "name": "first_app",
  "version": "1.0.0",
  "description": "第一个electron程序",
  "main": "main.js",
"scripts": {
    "start": "electron ."


    
  },
  "author": "zmister",
  "license": "ISC",
  "devDependencies": {
    "electron": "^13.2.1"
  }
}

接着借助 npm 工具（类比于 Python 的 pip 工具）来安装 Electron 包：

npm install --save-dev electron

这样，我们使用 Electron 开发桌面程序所需的环境就安装好了。

创建一个页面

在 Electron 的窗口中，显示的内容可以是本地的HTML文件，也可以是外部的URL。

在这里，我们使用 MrDoc 集成的一个 Markdown 编辑器——Vditor 作为演示，在页面中显示一个编辑器。

Vditor 代码下载完成之后，放入项目目录中：

随后在项目目录创建一个名为index.js的文件，用来初始化 Vditor 编辑器：

var editor = new Vditor("editor",{
    "cdn":"./vditor",
    'mode':'sv',
})

然后在项目目录创建一个名为index.html的文件，在其中写入如下内容：


  
     charset="UTF-8"


    
>
     rel="stylesheet" href="./vditor/dist/index.css" />
    
  
  
    
桌面 Markdown 编辑器

    
By Electron + Vditor

    
 id="editor" style="height:400px;">

在这个 HTML 文件里面，我们引入了 Vditor 组件相关的 CSS 和 JS 文件。

这样，我们的窗口页面就创建好了。接下来，我们创建窗口。

创建窗口

在使用npm init命令初始化项目的时候，我们制定了main.js作为程序的入口，所以我们需要新建一个名为main.js的文件，然后在其中进行 Electron 相关的开发和调用。

引入所需模块

首先，我们在main.js文件头部从 Electron 中引入两个必需的模块：

const { app, BrowserWindow } = require('electron')

其中：

app 模块，控制应用程序的事件生命周期。类似于 PyQt5 中的 app = QtWidgets.QApplication()
BrowserWindow 模块，创建和管理应用程序窗口。类似于 PyQt5 的 QtWidgets.QMainWindow

创建窗口

然后，我们新建一个名为createWindow的函数，用来实例化一个 BrowserWindow，并将 index.html 加载进去：

// 创建一个窗口
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

调用窗口

窗口定义好之后并不会显示，在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。

我们可以通过使用 app.whenReady()这个 API 来侦听app 的 ready 事件。在 whenReady() 成功后调用创建窗口的函数：

// 侦听 app 的ready事件



    
app.whenReady().then(() => {
  createWindow()
})

这样，一整个 Electron 程序就完成了。

我们来运行一下。

在命令行终端输入命令：

npm start

Electron 程序将会启动，如下动图所示：

打包

桌面程序写好之后，都要走到打包这一步。在 Python 中，桌面程序的打包只能借助第三方的 PyInstaller 之类的工具。而 Electron 则拥有一个Electron Forge用来对 Electron 编写的桌面程序进行打包。

首先对其进行安装和配置：

npm install --save-dev @electron-forge/cli



    
npx electron-forge import

完成上述命令之后，项目目录下的package.json文件会被更新。

接着，使用如下命令即可打包应用程序：

npm run make

完成之后，项目目录下会生成一个名为out的目录，里面包含了打包后的程序文件夹：

第一个文件夹即为程序的主文件夹：

整个程序一共 193M：

双击启动程序：

最后

一整套流程下来，感觉非常的顺滑。与 Python 相比的话，还是各有千秋。

Electron 的优势

首先的一个优势就是：上手简单。

再一个优势就是：组件丰富。因为 Electron 基于 Web 技术栈，所以前端网站能使用的 UI 组件，在 Electron 也能使用。

最后的一个优势就是，打包简单。安装 Electron Forge 之后，打包非常的顺滑。

Electron 的劣势

那么与 Python 相比的劣势呢？

最主要的劣势在于没有 Python 丰富的生态组件（包括但不限于各类文件处理、图像处理、数据处理、科学计算等）。

当然这个缺点其实是可以以 Python 提供 Web API的形式来克服的。Python 负责后端的数据处理，Electron 负责桌面程序的 UI 展示。

另一个不算是劣势的劣势（对于非 Web 前端使用者），则是对于没有前端基础的朋友来说，还需要重新去学习前端的相关知识，前端各种「剪不断理还乱」的关系和规范相较于 Python 来说，入门相对要困难一点。

重磅！Python交流群已成立

公众号运营至今，离不开小伙伴们的支持。

为了给小伙伴们提供一个互相交流的技术平台，特地开通了 Python交流群。

群里有不少技术大神，不时会分享一些技术要点，更有一些资源收藏爱好者不时分享一些优质的学习资料。（免费，不卖课！）

需要进群的朋友，可长按扫描下方二维码。

▲长按扫码