零、Electron 介绍

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node.js 的变体，而不是 Web 服务器。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

Github：https://github.com/electron/electron

一、安装 Node.js

Electron 是基于 Node.js 的，同时 Node.js 也可以用来完成 web 程序无法完成的事情：控制窗体和与系统打交道。

Node.js地址：https://nodejs.org/en/

我们进入 Node.js 主页，点击 Download 下载并执行安装程序，可以直接一直按 Next：

安装结束后，我们可以通过按下键盘 win+R 组合打开 Windows 的运行窗口，在里面输入 cmd 打开命令提示符：

我们可以在命令提示符中输入

npm

来测试 Node.js 是否安装成功：

没有出现错误就说明安装完成了。

二、安装 Electron

有了 Node.js，接下来我们就可以安装 Electron 了：

Electron 主页：https://electronjs.org/

我们点击 Download for Windows 按钮，来下载它：

下载后运行，稍等片刻会出现 API 文档：

此时就说明安装完成了。

三、了解 Electron

下载官方的 Demo：

Github 地址：https://github.com/electron/electron-quick-start

解压、打开，目录结构如下：

接着，我们来运行一下该 Demo：

重启命令提示符（win+R 后输入 cmd）

输入：

 cd /d 你的工程路径

来使命令提示符切换到工程目录内。

输入：

npm start

来运行 Demo。

Hello world 以及熟悉的 Chrome Inspector 映入眼帘，接下来我们就来了解下该 Demo 的构成：

package.json 文件

存储了工程配置信息的 json。例如 "version": "1.0.0" 规定了工程的版本号。

值得注意的几点是：

"main" 规定了工程的入口 js，即通过哪个文件来启动窗体。

main.js 文件

启动时创建窗体的 js，该文件可在 package.json 内指定。

该文件内已经有详尽的注释，在此不再赘述。

值得注意的是，其中：

mainWindow.webContents.openDevTools() 行是启动 Chrome Inspector 的，如果不想启动直接删除该行即可。

index.html 文件

窗体所加载的 HTML 页面，该文件可在 main.js 内指定。

你可以在此文件中尽情地书写 HTML + CSS + JavaScript 了。

四、打包 Electron

制作好属于自己的 Electron 工程后，我们需要将它打包为可执行程序才可以分享给好友，使好友们双击它就可以运行你的作品。

在命令提示符内输入以下内容来安装打包工具：

npm i electron-builder

安装完成后，配置工程的 package.json，在最后一个花括号（}）前添加：

    ,"build": {
      "appId": "your.id",
      "mac": {
        "category": "your.app.category.type"
      }
    }

接下来，我们开始打包：

再次重启命令提示符（win+R 后输入 cmd）

将命令提示符切换到工程目录内：

cd /d 你的工程路径

开始编译：

build --win --ia32

（含义：打包为适用于 windows 系统、32位元的可执行程序。了解更多：Options · electron-userland/electron-builder Wiki · GitHub）

耐心等待打包完成，在 dist\win-ia32-unpacked 目录下就是你所想要的程序了。

五、使用 jquery

jquery 是一个非常方便的 JavaScript 库，但在 Electron 中却可能出现无法使用的状况。

可以尝试在引入 jquery 后插入下面的代码：

    <script>
        if (typeof module === 'object') {
        window.jQuery = window.$ = module.exports;
        };
    </script>

这样 jquery 就可以正常使用了。

六、Electron 文档

文档地址：https://electronjs.org/docs