Electron 是一款可以利用 Web 技术 开发跨平台桌面应用的框架，最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell，后更名为 Electron 。Electron 提供了一个能通过 JavaScript 和 HTML 创建桌面应用的平台，同时集成 Node 来授予网页访问底层系统的权限。目前常见的有 NW、heX、Electron，可以打造桌面应用。

Electron

一、环境搭建

它的方式是使用 nodeJs API 调用系统资源，所以第一步就是安装 node.js 环境哟。

1.1、安装 node.js

如果你的机器上还没有 Node.js® 和 npm ，请安装它们。

1.2、全局安装 electron

npm install -g electron-prebuilt

mac 系统需要在管理员权限下安装哟，输好密码就可以开始等他安装了。

sudo npm install -g electron-prebuilt

全局安装后就可以在命令行使用 electron 工具
全局安装之后，就可以通过 electron . 启动应用，当然也可以选择局部安装。

1.3、安装打包工具 electron-packager

npm install -g electron-packager

同样，mac 系统需要在管理员权限下安装哟

sudo npm install -g electron-packager

打包需要注意的点会在后面讲解

二、简单开发

那么，我们 Electron 程序到底是怎么跑起来的呢？先看下一个 Electron 项目的基本框架组成吧。

2.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": "",
    "main": "main.js",
    "author": "Young",
    "scripts": {
        "start": "electron ."
    }
}

• main.js
  这个文件是程序的入口，Electron 的主进程将用它来启动并创建桌面应用。

const {app, BrowserWindow} = require('electron')
let win
function createWindow(){
    win = new BrowserWindow({width:800, height:600})
    win.loadURL(`file://${__dirname}/index.html`)
    win.webContents.openDevTools()//开启调试工具
    win.on('close', () => {
        win = null
    })
    win.on('resize', () => {
        win.reload()
    })
}
app.on('ready', createWindow)
app.on('window-all-cloased', () => {
    if(process.platform !== 'drawin' ){
        app.quit()
    }
})
app.on('activate', () => {
    if(win === null){
        createWindow()
    }
})

app 模块：会控制应用的生命周期（例如， 对应用的 ready 状态做出反应），有点像 Application ，对应有各个生命周期会有不同的状态。

BrowserWindow 模块：为你创建窗口。

win 对象：是你应用的主窗口，被声明成 null ，否则当 JavaScript 垃圾回收掉这个对象时，窗口会被关闭。

当 app 捕获 ready 事件，BrowserWindow 创建一个800*600大小的窗口。浏览器窗口的渲染进程会渲染 index.html 文件。

当 app 捕获 resize 事件，BrowserWindow 会重新加载，以此类推。

• index.html
  这个文件就是我们要呈现出来的网页了。这就需要你自己发挥想象写咯~

2.2、初次开发踩坑记录

• Electron 加载带 jquery 的项目报错
  solution： 详细解答可以查看这里

<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script> 
<script src="scripts/vendor.js"></script> 
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

Benefits
Works for both browser and electron with the same code
Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
Does NOT require node-integration
to be false

• Electrons 使用网络请求
  solution：原来也有很多库提供给我们使用的，使用方式方法也很简单。
  superagent
  superagent 是一个极其简单的 AJAX 库。看过下面例子，相信机智的你已经知道怎么使用了吧。

var request = require( 'superagent' );
request 
.get( 'http://xxx.com' ) 
.end( function ( err, res ) { 
// Do something
});

bluebird
bluebird 是一个 Promise 库。

凡是类似 IO 的操作，必定需要异步。经典的解决方法是回调，然而是时候用 Promise 了！
bluebird 声称拥有无与伦比的速度。其实更实用的功能是它支持能够将一些本身是不支持 Promise 的库转化为支持 Promise 的库。
然而，要配合之前的 superagent，则需要另外一个库 superagent-bluebird-promise。superagent 本身不支持 Promise，从上面的代码来看就是使用回调的方法，这个库就是将 superagent 和 bluebird 融合在一起的“融合卡”。使用的时候只需要：

var Promise = require( 'bluebird' );
var request = require( 'superagent-bluebird-promise' );
request 
.get( 'http://xxxx.com' ) 
.then( function ( res ) { 
// do something when resolved 
}, function ( err ) {
 // do something when rejected 
});

立刻就可以使用上 then了，方便吧。

三、打包

开发搞定后最后就是打包啦！！这里给大家介绍的是在 mac os 环境下用 electron-packager 打包的流程（原谅我刚入门 electron ，目前也只学会了这种方式）。mac 下打包 mas 程序当然是可行的，但是打包 win32 的程序的话，就需要花一点时间配置 Wine 环境了，后面会为大家介绍。

3.1 mac os 环境下打包 mas 安装包

3.1.1 在 package.json 中添加安装包依赖

"devDependencies": {
        "electron-prebuilt": "^1.3.5",
        "electron-packager": "latest"
    }

3.1.2 命令行打包

在你项目工程的文件下，输入以下命令进行打包（为了好说明，我把空格换成换行符了）。

electron-packager 
./          //location of project
cyyDemo   //name of project
--platform=mas 
--arch=x64 
--version=1.3.5 //electron version
--out=dist/ 
--overwrite 
--ignore=node_modules/electron-* 
--ignore=node_modules/.bin 
--ignore=.git 
--ignore=dist --prune

• location of project 是你项目文件夹的位置，
• name of project 定义你的项目名，
• platform 决定要构建的平台（包括 Windows，Mac 和 Linux，all 表示所有平台 ）
• architecture 决定构建哪个构架下（ x86 或 x64 ，all表示两者），
• electron version 让你选择要用的 Electron 版本

命令的选项理解起来都比较简单。为了获得精美的图标，你首先要找一款可以把 png 文件转换到这些格式的工具，把它转换成 .icns 格式（ Mac 用）或者 .ico 格式（ Window 用）。如果在非 Windows 系统给 Windows 平台的应用打包，你需要安装 wine（ Mac 用户用 homebrew，Linux 用户用 apt-get ）。另外，第一次打包用时比较久，因为要下载平台的二进制文件，随后的打包将会快的多。

3.2 mac os 环境下打包 win32 安装包

这个问题比较麻烦的要安装 Wine 环境。假设你设备上拥有 Wine 环境，打包流程可参考打包 mas 安装包的流程，下面主要就介绍下 mac 中如何安装配置 Wine 环境。

3.2.1 安装 homebrew

brew 的安装很简单，使用一条 ruby 命令即可，Mac 系统上已经默认安装了 ruby。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成后，就可以使用 brew 命令了，可以输入命令自检：

brew doctor

也可以参看安装版本：

brew -v

3.2.1 使用 brew 安装 Wine

• 打开终端，输入以下命令行：

brew install wine

出现以下错误，提示我们安装缺失组件，下一步就是安装缺失组件了。

提示安装缺失组件

• 安装缺失组件 Xquartz
  浏览器打开https://xquartz.macosforge.org/landing 下载并安装即可

• 重试安装 Wine

brew install wine

接下来的事就是等待了，我等了一个上午吧~~ that's a really long time

• 使用命令行打包 Win32 安装包

electron-packager ./ cyyDemo --platform=win32 --arch=x64 —version=1.3.5 --out=dist/ --overwrite --ignore=node_modules/electron-* --ignore=node_modules/.bin --ignore=.git --ignore=dist --prune

原创作品，如需转载，请与作者联系，否则将追究法律责任。