你知道的electron

electron简介

其实这篇文章是我很久之前写的一篇分享，不过没发表出来。最近太忙，没时间写，又不想违背了自己立下的一个月一篇学习笔记的想法，所以，炒炒冷饭咯～

如果你能够写一个网页应用，那么你就能写出一个本地应用，而可以帮助你实现这件事的框架之一就是electron。electron是一个利用web技术（javascript,html,css）来创建本地应用的框架。Electron 框架的前身是 Atom Shell，它是基于node.js 和 Chromium 开源项目，并用于在 Atom 编辑器中。Electron 是开源的，由 GitHub 维护，有一个活跃的社区。

以下操作都是确保你已经安装好了node.js的前提下进行的。

安装electron

在做所有事情之前，我们先修改一下electron的镜像，因为墙的原因，使用淘宝源会比较顺利一些。

export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

使用npm安装

# 全局安装electron
npm install electron -g

# 只在项目里边安装electron
# npm install electron --save-dev

查看当前安装好的electron版本。

electron -v

当然，建议是使用electron官网提供的electron-quick-start，electron-quick-start是一个非常简单的electron应用，我们可以在它的基础上开发我们自己的应用。

下载electron-quick-start

# 克隆quick start远程库
$ git clone https://github.com/electron/electron-quick-start

# 进入库
$ cd electron-quick-start

# 安装依赖以及运行
$ npm install && npm start

electron-quick-start文件结构

下面我们来看看electron-quick-start的文件结构，并简单的介绍一下一些重要且必须的文件的用处，以便大家更轻松的开发。

-- node_modules/
-- .gitignore
-- index.html
-- LICENSE.md
-- main.js
-- package.json
-- README.md

node_modules

node_modules是用来存放我们需要的node依赖的插件包。

package.json

npm命令运行时会读取当前目录的package.json文件和解释这个文件。在这个文件里边可以定义项目的名称，版本，描述，以及npm命令等等（比如说刚才运行的npm start）。
其中要特别注意的是main对应的内容，这里应该填写的是electron入口的js文件（如main.js）。

"main": "main.js",

main.js

electron程序的入口文件，我们在这个文件里边使用electron创建窗口，打开调试器等等。

var app = require('app');
var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});

  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

主要我们要修改的是ready之后的配置函数。

mainWindow = new BrowserWindow({width: 800, height: 600});

上边的代码，我们创建了一个宽为800,高度为600的窗口。事实上，我们还可以配置这个窗口的更多内容，详细的可以去查看BrowserWindow文档。下面我只讲一些比较常用的属性：

width

整型，窗口的默认宽度。默认为800。

height

整型，窗口的默认高度。默认为600。

minWidth

整型，窗口的最小宽度。默认为0。

minHeight

整型，窗口的最小高度。默认为0。

resizable

布尔值，false时，窗口不可拉伸，默认为true。

title

字符串，窗口的标题。默认为Electron。

然后遗憾的是，一些在其他平台能够实现的配置，在ubuntu上却并不能实现，例如icon等等。

创建好窗口之后，接着加载应用的入口页面文件index.html。

mainWindow.loadUrl('file://' + __dirname + '/index.html');

下面这段代码，为我们打开了调试器，当我们完成开发时，不再需要调试器了，就可以选择注释或者删除该段代码。

mainWindow.webContents.openDevTools();

index.html

接下来就是在这个文件里使用html、css、JavaScript来编写本地应用了。不过需要注意的是:

my-app-title

如果html里边设置了title标签，electron窗口设置的title就会被覆盖掉。

启动应用

npm start 

or

electron .

打包应用

最后，为了写好的应用能够方便的给更多人使用，我们需要将项目打包好（package)。下边是两种常见的打包的方法：

使用`electron-packager`进行打包

安装electron-packager:

# 只在项目里安装
npm install electron-packager --save-dev

# 全局安装
npm install electron-packager -g

使用electron-packager:

electron-packager   --platform= --arch= [optional flags...]

dir: 需要打包的文件夹
appname: APP名称
platform: 平台（linux）
arch: 操作系统的位数（x86/x86_64）
- --out: 打包后输出的文件位置
- --version: 应用版本
- --icon: 应用icon（ubuntu下无效）

gulp打包

安装electron-packager依赖

npm install electron-packager --save-dev

编写gulp task

var electronPackager = require('electron-packager');

gulp.task('package', function() {
  var options = {
    // 打包设置
  };

  electronPackager(options);
});

options的内容如下：

{
  dir: 'my-app',
  out: 'out',
  version: '1.0.0',
  platform: 'Linux',
  arch: 'x86_64'
}