Electron 应用入门 （参考官方示例）

Electron 应用

1.去官方下案例

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start

# 进入这个仓库
$ cd electron-quick-start

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

2.安装electron-packager

npm install electron-packager --save-dev

package.json

"devDependencies": {
    "electron-packager": "^8.7.2"
}

3.打包—命令打包

electron-packager <项目路径 > <项目名字> <构建平台> <x86 || x64> <版本> <可选>

"build_darwin": "electron-packager ./ 'Hosts' --platform=darwin --arch=x64 --app-version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

- platform 是发布平台
    - win32指windows平台
    - linux
    - darwin
>> arch=ia32 指32位windows 64位的则为x64

4.执行命令

npm run build_darwin

5.打包工具 Pagkages NSIS

    使工具打包减少安装包体积

main.js文件示例：

// var app = require('app');  // 控制应用生命周期的模块。
// var BrowserWindow = require('browser-window');  // 创建原生浏览器窗口的模块

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

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发工具
  mainWindow.openDevTools();

  // 当 window 被关闭，这个事件会被发出
  mainWindow.on('closed', function() {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 但这次不是。
    mainWindow = null;
  });
});