Electron初步【02】--第一个Electron App
目錄結構與文件
Electron App的目錄結構如下：
your-app/ ├── package.json ├── main.js └── index.html其中的package.json和Node Modules里表現的一樣，而main.js則是啟動你App的腳本，它將會開啟主進程。package.json的一個例子：
{"name" : "your-app","version" : "0.1.0","main" : "main.js" }注：當package.json里不存在main時，Electron將會默認使用index.js
main.js應當創建一個窗口并處理系統事件。一個典型的例子如下：
'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.jsmainWindow.loadURL('file://' + __dirname + '/index.html');// 打開 DevToolsmainWindow.webContents.openDevTools();// 窗口關閉時觸發mainWindow.on('closed', function() {// 如果你的應用允許多個屏幕，那么可以把它存在Array里。// 因此刪除的時候可以在這里刪掉相應的元素mainWindow = null;}); });最后，index.html是你最終要展示的頁面
<!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文件目錄下跑這句就可以運行它：
electron .如果只是在當前項目下安裝了，則要跑：
./node_modules/.bin/electron .通過Electron Binary運行
在這兒下載Electron二進制文件
打開包內的App按照提示操作，或者在該文件夾下運行：
$ ./Electron.app/Contents/MacOS/Electron your-app/就可以通過這個包來運行自己的應用了。
生成應用
應用寫完以后，可以參照Application Distribution里的指導進行打包：
項目文件名應該命名為app
下載Electron資源文件。就是上一步里面的Electron二進制文件
把項目目錄放在Electron資源文件夾下
Mac OS X:
electron/Electron.app/Contents/Resources/app/ ├── package.json ├── main.js └── index.htmlWindows & 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
打包
切換到含有你項目文件夾的父級文件夾
# 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總結
以上是生活随笔為你收集整理的Electron初步【02】--第一个Electron App的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 应用程序开发入门
- 下一篇： ExtJs之Ext.view.View