一、环境搭建
1、安装node.js
如果你的机器上还没有Node.js和npm ，请安装它们。
2、安装electron
windows系统下直接在命令行输入
npm install -g electron-prebuilt
mac 系统需要在管理员权限下安装，输好密码就可以开始等他安装了
sudo npm install -g electron-prebuilt
全局安装后就可以在命令行使用 electron 工具，也可以通过 electron启动应用，当然也可以选择局部安装。
3、安装electron-packager
windows系统下：
npm install -g electron-packager
同样，mac系统需要在管理员权限下安装
sudo npm install -g electron-packager
4、安装vscode
推荐一款比较常用的编辑器：vscode
5、使用淘宝 NPM镜像
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install [name]
二、简单开发
1、项目框架
参看官方的 demo ，一个 Electron 应用的目录结构大体如下：
app/
├── package.json
├── main.js
└── index.html
- package.json
可以理解为 android 里面的 mainfest 文件，里面声明了程序的名称、简介、版本等信息；设置 Electron主进程运行的脚本（main.js），即设置程序的入口；设置快捷键，在你的 CLI（命令行）中可以用 electron . 方便地启动应用。可以看下面例子：
{
"name": "channel",
"version": "1.0.0",
"description": "This is a demo",
"main": "main.js",
"author": "leoleo",
"scripts":
{
"start":"electron ."
}
}- main.js
这个文件是程序的入口，Electron 的主进程将用它来启动并创建桌面应用。
- index.html
这个文件就是我们要呈现出来的网页了。既可以使用本地的html，也可以使用远程的html。
2、踩坑记录
- Electron 加载带 jquery的项目报错
solution： 详细解答可以查看这里
- Electron使用网络请求
solution：原来也有很多库（superagent、bluebird）提供给我们使用的，使用方式方法也很简单。
三、打包发布
1、命令打包
electron-packager的打包基本命令是：
electron-packager <location of project> <name ofproject> <platform> <architecture> <electron version><optional options>
命令说明：
* location of project：项目所在路径
* name of project：打包的项目名字
* platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
* architecture：决定了使用 x86 还是 x64还是两个架构都用
* electron version：electron 的版本
* optional options：可选选项
命令比较长，每次要是都用这个命令来打包会很烦，可以使用第二种方法；
2、脚本打包
首先在项目根目录下面的 package.json 里添加代码，
"packager": "electron-packager ./app HelloWorld--all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"
PS：这里要注意，字段里的 项目名字，version，icon路径要改成自己的；
然后，再使用命令 npm run-script packager
四、electron调用C++动态链接库（dll）
1、Foreign Function Interface（FFI）
FFI的全称是Foreign FunctionInterface，该项目生来就是解决NodeJS的本地调用问题的，其流程就相当于Windows下的LoadLibrary()和GetProcAddress()，亦可以理解为NodeJS下的平台调用。有了它，本地调用变得异常简单，因为它在NodeJS环境中为JavaScript提供了一套强大的工具集用来调用动态链接库。
- 环境配置
1）安装node-gyp
npm install -g node-gyp
装之前要安装python 2.7，而node-gyp不支持python 3.x，所以安装了多个版本python 的读者得留意一下自己当前的python 版本了。
2）安装ffi
npm install ffi
- 简单开发
var FFI = require('ffi');
var user32 = new FFI.Library('user32', {
'MessageBoxA':[ 'int32', [ 'int32', 'string', 'string', 'int32' ]]
});
var retCode = user32.MessageBoxW( 0, 'Node.JS!', 'Hello, World!', 1);Library需要传入两个参数，第一个表示动态链接库的路径，不需要后缀；第二个参数是json，每个元素表示一个函数签名，依次为函数名、函数返回值，函数参数，可以同时加载多个函数，即对应多个元素。这两个参数可以用来指定加载哪个文件中的哪些函数。
注：ffi只能调用C风格的模块。即：ffi只能调用采用C导出的动态链接库。
2、C/C++ Addons
- 环境配置
1）安装编译工具
npm install -g --production windows-build-tools
2）安装node-gyp
npm install -g node-gyp
- 编写cc文件
1) 在cc文件中调用C++代码，在C++代码中调用dll
略。
2) 直接在cc文件中调用dll
HINSTANCE hDLL;
hDLL=LoadLibrary("dlldemo.dll");//加载动态链接库dlldemo.dll文件；
typedef int(*pMax)(int a,int b);//函数指针
pMax Max=NULL;
Max=(pMax)GetProcAddress(hDLL,"Max");
if (Max)
{
int ret=Max(99,100);
}其中dlldemo.dll 里有个 Max 函数，求两个 int 整数的最大值。
- 构建
1）编写binding.gyp文件
当源代码已被编写，它必须被编译成二进制 addon.node 文件。要做到这点，需在项目的顶层(和package.json同一级)创建一个名为 binding.gyp 的文件，它使用一个类似 JSON 的格式来描述模块的构建配置。 该文件会被 node-gyp（一个用于编译 Node.js 插件的工具）使用。
{
"targets": [
{
"target_name": "addon",
"sources": [ "hello.cc" ]
}
]
}2）node-gyp configure
当binding.gyp 文件已被创建，使用 node-gyp configure 为当前平台生成相应的项目构建文件。 这会在 build/ 目录下生成一个 Makefile 文件（Unix平台）或 vcxproj 文件（Windows平台）。
3）node-gyp build
调用 node-gyp build 命令生成编译后的 addon.node 的文件。 它会被放进 build/Release/ 目录。
Build的时候可能会出现一个奇怪的错误提示The system cannot find message text for message number 0x%1 in the message file for %2你就不能直接告诉我Wrong Architecture么……Don't panic,你需要重新编译一下：
node-gyp rebuild-target=1.4.13 -arch=ia32 -dist-url=https://atom.io/download/atom-shell (1.4.13是你用的 Electron版本号)
五、写在后面
Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的 API（如打开文件窗口、通知、图标等）。
- Chromium：Google创造的一个开源库，并用于 Google 的浏览器 Chrome。
- Node.js（Node）：一个用于在服务器运行 JavaScript的运行时（runtime），它拥有文件系统和网络的权限（你的电脑也可以是一台服务器！）。
Electron 应用就像 Node应用，它也依赖一个 package.json 文件。该文件定义了哪个文件作为主进程，并因此让 Electron 知道从何启动你的应用。然后主进程能创建渲染进程，并能使用 IPC让两者间进行消息传递。
Electron 的一个缺点是：即使你的应用是一个简单的时钟，但它也不得不包含完整的基础设施（如 Chromium、Node等）。因此，一般情况，打包后的程序至少会达到几十兆（根据系统类型进行浮动）。当你的应用越复杂，就越可以忽略这部分了。
众所周知，页面的渲染难免会导致『白屏』，而且这里采用了 Vue框架，情况就更加糟糕了。另外，Electron应用也避免不了『先打开浏览器，再渲染页面』的步骤。下面提供几种方法来减轻这种情况，以让程序更贴近原生应用。
1. 指定BrowserWindow的背景颜色；
2. 先隐藏窗口，直到页面加载后再显示；
3. 保存窗口的尺寸和位置，以让程序下次被打开时，依然保留的同样大小和出现在同样的位置上。
对于第一点，若程序的背景不是纯白（#fff）的，那么可指定窗口的背景颜色与其一致，以避免突变。
mainWindow = new BrowserWindow({
title: 'Vanish',
backgroundColor: '#f5f5f5',};对于第二点，由于 Electron本质是一个浏览器，需要加载非网页部分的资源。因此，我们可以先隐藏窗口。
var mainWindow = new BrowserWindow({
title: 'ElectronApp',
show: false,};等到渲染进程开始渲染页面的那一刻，在 ready-to-show 的回调函数中显示窗口。
mainWindow.on('ready-to-show',
function(){
mainWindow.show();
mainWindow.focus();
});
对于第三点，其实现方式，可参考《4 must-know tips for building cross platform Electron apps》。