前言

很早以前就听过electron， 只是一直没有开始使用，近期公司层面准备用来做一点开发工作。能开发桌面应用的工具很多，但目前技术体系里，能抽人开发的，electron的技术再合适不过了。

开始

像所有开发一样，首先是准备开发环境。说实话，官网文档真的好零散，没有一个循序渐进的过程，不过那已经不重要了，毕竟不是第一天写代码了。 有胜于无吧，而且看起来还挺全的样子，由于是入门系统，可能好多的功能都不会涉及。

• 开发环境准备

  为什么说前端开发就可以进入这个坑呢，因为，你要为electron开发环境准备的，只是nodejs的环境。所以只要安装LTS的nodejs新版即可，相应的，使用对应版本的npm即可。 我的开发环境是windows 10,所以这篇文章也是以该操作系统为基础。 由于我本地已经具备了相应的条件，开发环境就算是准备好了。

• 初始化一个项目

  像以往的nodejs应用一样，首先使用npm（我为什么要使用yarn）初始化。创建一个文件夹apps，进入到apps，使用下面方法初始化。

    npm init
  

  一系列问题完成，我们已经得到了一个项目。

• 我们的目标

  我们使用html、css、js开发一个桌面简单计算器，这个计算器非常简单，以至于它只可以计算整数加减乘除。够简单吧，虽然没有任何意义。

• 开始工作

  开始工作之前，我们还是明确一个定义，在electron里，有两个东西：主进程和渲染进程，主进程有且只有一个，而渲染进程则是使用Chromium 渲染页面的BrowserWindow. 而且在主进程和渲染进程间可以同时使用electron和nodejs的API，这将是一个重要的功能。由于渲染进程使用了Chromium，而且版本比较新，所以我们的JS可以使用新的ES6语法， 并且不需要额外的pollyfill支持。同样的，我们可以使用大量的第三方nodejs模块。既然是开发nodejs应用，我们使用vscode，真心好用的IDE。

• 撸码

  我们的项目下目前仅有一个package.json文件，啥都没有，首先我们来安装一下electron.

    npm i electron -D
  

  好了，我们来修改一下package.json。创建一点脚本。另外，我们使用了第三方的打包工具，electron-builder。好啦，我们的package.json看起来好像是下面的样子。

    {
      "name": "electron-calc",
      "version": "1.0.0",
      "description": "",
      "main": "src/main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "electron .",
        "pack": "electron-builder --dir",
        "dist": "electron-builder"
      },
      "build": {
        "appId": "electron.calc",
        "mac": {
          "category": "electron.calc"
        }
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "electron": "^4.1.1"
      }
    }
  

  由于我们的项目简单，就不考虑那么多项目代码组织的问题。我们在应用下创建一个src目录，存放我们的main.js等文件。在src下建立app目录，作为存放html、css、js 等文件的目录。在app下分别建立index.html,index.js,index.css三个文件，我们的应用就算够了。 app下实现计算器的代码就不在本文里了，本文主要是与electron有关的开发，也就是main.js.因为我们的应用足够简单。

    const { app, BrowserWindow } = require('electron');
    const path = require('path');
  
    /** 
     * browserWindow实例
     */
    let win = null;
  
    const createWindow = () => {
      win = new BrowserWindow({
        width: 480,
        height: 640
      });
  
      /** 
       * 加载计算器
       */
      win.loadFile(path.join(__dirname, 'app/index.html'));
  
      win.on('closed', () => {
        win = null;
      });
    };
  
    app.on('ready', createWindow);
  

  在项目根下执行npm start, 将会自动打开一个应用，这个应用就是我们的计算器。

  至此，一个简单的electron应用就创建好了，我们可以下面的命令进行打包，最后找到exe安装就可以了。

    npm run dist
  

尾巴

一个入门的应用非常简单，但作为一个应用，这远远不够，还需要跟操作系统、文件、网络、存储等等进行很多管理，公司里的应用比这个要完整的多。

下一篇博客将进行一点个性化的设置操作，让应用看起更不像webapp。