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来编写本地应用了。不过需要注意的是:
<title>my-app-title</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 <dir> <appname> --platform=<platform> --arch=<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'
}
网友评论