Electron从零开始——介绍 - 知乎

baacloud免费翻墙vpn注册使用

来源: Electron从零开始——介绍 – 知乎

其实在 Electron 出现之前,如果你问我做桌面应用需要什么,我的第一个想法是 CC++C#Java 以及微软的 Visual Basic 等等语言(Sorry 我不是个苹果党,第一时间想不起 Object-C),外加体积巨大的 IDE(比如我到今天依然不喜欢的 Visual Studio 和曾经为了玩 Minecraft Mod 开发装的 Eclipse 等等),当然也还有各种编辑器 + 编译器的组合,比如 Notepad++  GCC……

我认识 Electron 项目应该是比较晚的了,是因为突然有一天微软发布了 Visual Studio Code 这个跨平台、开源、免费的编辑器,然后在浏览这个应用的文档时,我突然发现这个东东居然用的是 TypeScript + Electron 开发出来的,而 TypeScript 其实就是 JavaScript 的超集……这个冲击了我的世界观,要知道直接使用 JavaScript 开发桌面应用以前不是没有过,但是能够提供像是 VS Code 这么好用且顺滑的感觉,在之前是不敢想象的,甚至为了一个小小的工具,我都要在 VS 里面先做窗口界面,然后用 C# 在那里搞来搞去,可能是对桌面端应用的不熟悉,我做这种工具总是没有很顺手的感觉(对,这方面我的确很渣);而 Electron 的出现,让我有了可以使用自己熟悉的语言以及简单的编辑工具,就可以做出一个小桌面应用的希望。

当然认真学了一阵时间之后,我发现它其实就是把 V8 引擎单独包装起来,使之成为可以在桌面运行的类浏览器平台,从而使得我们写的 SPA 独立运行在系统桌面段;又因为它其实是基于 SPA 的,所以跨平台就成为了其最基础的能力,除了在调用系统功能和最终打包的时候需要考虑到不同平台的差异,其他方面完全不用考虑,使得同一版本的应用在不同系统上也可以保持一致功能,而不需要重新开发一个不同内核、不同细节项、不同技术栈的应用了,对于个人开发者,小团队乃至大型团队的中小型项目,都是个非常非常棒的特性。

我的作品本身其实也很渣,技术层面并没有什么特别的地方,甚至最初的两个小应用,还是用了 JQuery 作为 DOM 操作技术栈,其中一个基本没有在 Github 上面更新过,就单纯的是写出来玩的,一个读书应用(这个就不截图了,太渣自己看了都不好意思);另一个有持续更新一段时间,但是也没有完成,因为最近在大改,从 JQuery 改为 Vue,所以可以看看以前的样子:


这是一个投资理财的辅助分析工具,包括了三个小模块:股票、指数基金以及可转债,因为是辅助分析,所以有些部分是需要自己已经了解理论才能一眼看懂的,其界面如下(没做菜单,因为按钮对于不是很了解电脑的人更直观)。

主界面:

股票模块主界面(图表这里就不截图了,因为在修改,目前不太好看):

股票模块——白马组合(以防有人说我荐股,这里把股票名称和代码隐藏了):

股票模块——便宜组合(关键信息已隐藏):

股票模块——券商股:

指数基金模块(这里主要是行业指数的博格公式,长投温度考虑到可以很容易的获取,所以没有做进来):

点击查看博格公式,可以看到计算结果:

因为上述这些都是共有的信息,而且无论是否明白博格公式,我们也不可能参照旧数据来进行投资,所以这里没有隐藏;这里应用做的事情,其实就是简单的把需要手工计算的东西自动计算并汇总,所以没什么技术含量的。

可转债模块——可转债组合(关键信息已隐藏):

行情简表和待发转债按钮会直接打开集思录:

关于界面:

以上就是我这个简单的小工具的演示,当然或许做成移动端更好,毕竟现在使用电脑进行投资的人不多了,不过在实际使用的过程中,我学习到的投资理财工具有很多地方还是需要计算和分析,使用电脑明显优于移动端的体验,所以第一步先做了桌面端的应用;外加我现在算是转了行,而且最近正在培训阶段,精力也不太好分配,所以改动技术栈还是需要很久的(一天可能就只剩下了2个小时左右的闲暇,我还要更新喜马拉雅上面的有声小说,所以只有周末是比较好的空暇时间了),这样我打算和这个专栏一样,慢慢的来,正好可以重新梳理自己对 Electron 的理解,并且让自己的应用“升级”为正式版。

好了,这篇文章少见的扯了一大堆废话,接下来先好好的了解一下 Electron 究竟是个什么东东。


就像我上面提到过的,Electron 可以让我们使用纯 JavaScript 调用丰富的原生 API 来创建桌面应用;可以把它看作是专注于桌面应用而不是 web 服务器的 io.js 的一个变体。

当然这不意味着 Electron 是绑定了 GUI 库的 JavaScript;相反,Electron 使用 web 页面作为它的 GUI,所以可以把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器——从这个角度来理解,我们就明白了,所有和系统的交互功能,Electron 这个平台已经搞定了,我们所需要的就是创建一个自己喜欢的界面,一个或多个核心的功能,以及调用它提供给我们的 API 就好。

因为 Electron 本身其实也是 Node.js 的一个第三方项目,所以在开发的时候,我们首先需要已经安装了 Node.js,以及包管理器 NPM,外加一个顺手的编辑器:我个人用 VS Code 很顺手,当然如果喜欢用别的编辑器也没问题,比如前文提到的 Notepad++,或者著名的 Sublime TextAtom(话说这个也是 Electron 做的)、Komodo Edit……等等等等,都可以;基本准备就完成了。

接下来,用 NPM 在本地安装一个 Electron 的副本即可,可以选择全局安装或者针对项目单独安装:

npm i -g electron

# 或者
npm i --save-dev electron
当然我这里因为已经安装过,所以相当于升了个级

一个基础的 Electron 项目结果如下:

my-electron-app/
├── package.json
├── main.js
└── index.html

因为 Node.js 对项目结构以及命名还是有点要求的,所以我个人推荐用一些 Electron Cli 工具来进行项目启动和初始化,这样会相对省一些事,比如我之前使用过的 electron-forge,或者直接搭配 Vue 来建立的 electron-vue 都可以;具体的 cli 工具我们可以按照自己的喜好选择,如果更倾向用原生 JS 或者想要自己指定框架的,electron-forge 是个好选择:

我们也可以注意到,因为它是用了很多比较老的第三方库,所以有不少警告信息

这里稍稍演示一下通过 electron-forge 来建立新项目的过程,其实很简单,只要新建一个文件夹,定位到文件夹之后通过 init 命令指定当前文件夹为新项目:

electron-forge init

此时 electron-forge 会自动检查当前环境,并安装对应的模块:

这里要留意,如果 NPM 的映像是指向淘宝的话,整个过程会快很多。

完成后,初始配置就结束了:

此时,我们就可以打开 src 目录下的 index.js 来查看初始代码了:

import { app, BrowserWindow } from 'electron';

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

这样我们就可以在这些初始代码上面,进行自己想要的修改了,当然我们下一章节会开始看看,这些基础的代码究竟是个什么意思;不过目前来看,应该已经很清晰了,毕竟 electron-forge 生成的初始代码,已经有了详尽的注释帮助我们理解了。

其实这个初始代码已经可以运行了,只要运行如下命令:

electron-forge start

可以看到,初始的界面是包括了菜单栏、主界面以及控制台的,而控制台的出现就分明体现了它本质上是个浏览器的特点,这也使得我们在本地及时的进行调整、修复和新功能测试变得非常简单。





赞(0) 打赏
分享到: 更多 (0)

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

支付宝扫一扫打赏

微信扫一扫打赏