Electron初步【02】--第一個Electron App

時間 2020-01-05

標籤 electron 初步第一個 app 简体版

原文原文鏈接

目錄結構與文件

Electron App的目錄結構以下：html

your-app/
├── package.json
├── main.js
└── index.html

其中的package.json和Node Modules裏表現的同樣，而main.js則是啓動你App的腳本，它將會開啓主進程。package.json的一個例子：node

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注：當package.json裏不存在main時，Electron將會默認使用index.jsgit

main.js應當建立一個窗口並處理系統事件。一個典型的例子以下：github

'use strict';

const electron = require('electron');
const app = electron.app;  // 控制App生命週期的模塊
const BrowserWindow = electron.BrowserWindow;  // 建立原生窗口的模塊

// 保持對窗口對象的全局引用。若是不這麼作的話，JavaScript垃圾回收的時候窗口會自動關閉
var mainWindow = null;

// 當全部的窗口關閉的時候退出應用
app.on('window-all-closed', function() {
  // 在 OS X 系統裏，除非用戶按下Cmd + Q，不然應用和它們的menu bar會保持運行
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 當應用初始化結束後調用這個方法，並渲染瀏覽器窗口
app.on('ready', function() {
  // 建立一個窗口
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加載index.js
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打開 DevTools
  mainWindow.webContents.openDevTools();

  // 窗口關閉時觸發
  mainWindow.on('closed', function() {
    // 若是你的應用容許多個屏幕，那麼能夠把它存在Array裏。
    // 所以刪除的時候能夠在這裏刪掉相應的元素
    mainWindow = null;
  });
});

最後，index.html是你最終要展現的頁面web

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

運行&生成應用

經過`electron-prebuilt`運行

若是你經過npm全局安裝了electron-prebuilt，那麼在App文件目錄下跑這句就能夠運行它：chrome

electron .

若是隻是在當前項目下安裝了，則要跑：npm

./node_modules/.bin/electron .

經過Electron Binary運行

在這兒下載Electron二進制文件json

打開包內的App按照提示操做，或者在該文件夾下運行：瀏覽器

$ ./Electron.app/Contents/MacOS/Electron your-app/

就能夠經過這個包來運行本身的應用了。bash

生成應用

應用寫完之後，能夠參照Application Distribution裏的指導進行打包：

項目文件名應該命名爲app
下載Electron資源文件。就是上一步裏面的Electron二進制文件
把項目目錄放在Electron資源文件夾下

Mac OS X:

electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html

Windows & Linux:

electron/resources/app
├── package.json
├── main.js
└── index.html

以後運行Electron.app就能啓動應用

如今，你的應用名稱爲默認的Electron.app（或Electron.exe），能夠經過以下方式修更名稱：

Windows

直接修改Electron.exe的名稱

OS X

修改應用Electron.app的名稱
修改文件中的CFBundleDisplayName，CFBundleIdentifier，以及CFBundleName字段。它們的所在位置：

Electron.app/Contents/Info.plist
`Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
`

應用打包

使用asar庫來替代你的app文件夾，這樣能夠避免暴露你的源碼。

生成`asar`包

asar能夠把多個文件合併成一個相似於tar的歸檔文件。

install

$ npm install -g asar

打包

切換到含有你項目文件夾的父級文件夾

# dev/your-app
$ cd dev

打包項目

$ asar pack your-app/ app.asar

將生成的app.asar放在：

// OS X
electron/Electron.app/Contents/Resources/
└── app.asar

// Windows & Linux
electron/resources/
└── app.asar

這樣你就能夠沒必要放入app文件夾，並且你的代碼都是封裝壓縮過的。

例子

按照下面步驟來運行官方案例：

# Clone the repository
$ git clone https://github.com/atom/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies and run the app
$ npm install && npm start