（一）Electron入门介绍

Electron介绍

在PC端混合app开发中，nwjs和electron都是可选的方案，它们都是基于Chromium和Node的结合体, 而electron相对而言是更好的选择方案，它的社区相对比较活跃，bug比较少，文档先对利索简洁。

现在electron支持window 7和之上版本,osx 10.9之后,linux等等，各个平台大部分都是一致的，有部分细节稍有不同。

我们先还是已electron的一个sample开始，先安装git以及node,然后把sample clone 下来。

实例

git clone https://github.com/atom/electron-quick-start cd electron-quick-start
npm i //安装依赖包
npm start

—————————————————-

tips

如果npm i 不能顺利下载electron的二进制文件，就到淘宝的镜像去下载，然后解压到一个文件夹



然后设置package.json

—————————————————-

运行结果如下：



那我们看看main.js的代码:

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

electron是一个全局模块。app代表一个进程，BrowserWindow代表一个窗口。

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

这几个是app的常用事件，ready事件会在app初始化一些信息之后调用，一般程序的入口在ready事件之后调用，如：createWindow.

window-all-closed是所有 窗口close之后触发的消息，activate是针对osx的消息，当窗口激活的时候调用。

function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
}

new BrowserWindow 创建一个窗口，详细参数课参考electron官网。

mainWindow.loadURL 加载一个url,可以是本地文件或者是远程url.

mainWindow.webContents.openDevTools();开启调试窗口。

几种运行方式

1.

electron . or electron app/

运行一个目录，这个目录必须符合Node 模块规范。

2.

electron app.js

直接已一个js文件为入口。

3.

electron

没有参数的时候默认是运行当前的resources/app目录或者resources/app.asar(.asar是一种压缩文件，详情参考官网),这两个都不存在的时候运行resources/default_app.