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;
  });
});