一、环境搭建

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》。