Electron初步【02】--第一个Electron App
目錄結(jié)構(gòu)與文件
Electron App的目錄結(jié)構(gòu)如下：
your-app/ ├── package.json ├── main.js └── index.html其中的package.json和Node Modules里表現(xiàn)的一樣，而main.js則是啟動(dòng)你App的腳本，它將會(huì)開啟主進(jìn)程。package.json的一個(gè)例子：
{"name" : "your-app","version" : "0.1.0","main" : "main.js" }注：當(dāng)package.json里不存在main時(shí)，Electron將會(huì)默認(rèn)使用index.js
main.js應(yīng)當(dāng)創(chuàng)建一個(gè)窗口并處理系統(tǒng)事件。一個(gè)典型的例子如下：
'use strict';const electron = require('electron'); const app = electron.app; // 控制App生命周期的模塊 const BrowserWindow = electron.BrowserWindow; // 創(chuàng)建原生窗口的模塊// 保持對(duì)窗口對(duì)象的全局引用。如果不這么做的話，JavaScript垃圾回收的時(shí)候窗口會(huì)自動(dòng)關(guān)閉 var mainWindow = null;// 當(dāng)所有的窗口關(guān)閉的時(shí)候退出應(yīng)用 app.on('window-all-closed', function() {// 在 OS X 系統(tǒng)里，除非用戶按下Cmd + Q，否則應(yīng)用和它們的menu bar會(huì)保持運(yùn)行if (process.platform != 'darwin') {app.quit();} });// 當(dāng)應(yīng)用初始化結(jié)束后調(diào)用這個(gè)方法，并渲染瀏覽器窗口 app.on('ready', function() {// 創(chuàng)建一個(gè)窗口mainWindow = new BrowserWindow({width: 800, height: 600});// 加載index.jsmainWindow.loadURL('file://' + __dirname + '/index.html');// 打開 DevToolsmainWindow.webContents.openDevTools();// 窗口關(guān)閉時(shí)觸發(fā)mainWindow.on('closed', function() {// 如果你的應(yīng)用允許多個(gè)屏幕，那么可以把它存在Array里。// 因此刪除的時(shí)候可以在這里刪掉相應(yīng)的元素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>運(yùn)行&生成應(yīng)用
通過electron-prebuilt運(yùn)行
如果你通過npm全局安裝了electron-prebuilt，那么在App文件目錄下跑這句就可以運(yùn)行它：
electron .如果只是在當(dāng)前項(xiàng)目下安裝了，則要跑：
./node_modules/.bin/electron .通過Electron Binary運(yùn)行
在這兒下載Electron二進(jìn)制文件
打開包內(nèi)的App按照提示操作，或者在該文件夾下運(yùn)行：
$ ./Electron.app/Contents/MacOS/Electron your-app/就可以通過這個(gè)包來運(yùn)行自己的應(yīng)用了。
生成應(yīng)用
應(yīng)用寫完以后，可以參照Application Distribution里的指導(dǎo)進(jìn)行打包：
項(xiàng)目文件名應(yīng)該命名為app
下載Electron資源文件。就是上一步里面的Electron二進(jìn)制文件
把項(xiàng)目目錄放在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之后運(yùn)行Electron.app就能啟動(dòng)應(yīng)用
現(xiàn)在，你的應(yīng)用名稱為默認(rèn)的Electron.app（或Electron.exe），可以通過如下方式修改名稱：
Windows
直接修改Electron.exe的名稱
OS X
修改應(yīng)用Electron.app的名稱
修改文件中的CFBundleDisplayName，CFBundleIdentifier，以及CFBundleName字段。它們的所在位置：
Electron.app/Contents/Info.plist
`Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
`
應(yīng)用打包
使用asar庫來替代你的app文件夾，這樣可以避免暴露你的源碼。
生成asar包
asar可以把多個(gè)文件合并成一個(gè)類似于tar的歸檔文件。
install
打包
切換到含有你項(xiàng)目文件夾的父級(jí)文件夾
# dev/your-app $ cd dev打包項(xiàng)目
$ asar pack your-app/ app.asar將生成的app.asar放在：
// OS X electron/Electron.app/Contents/Resources/ └── app.asar// Windows & Linux electron/resources/ └── app.asar這樣你就可以不必放入app文件夾，而且你的代碼都是封裝壓縮過的。
例子
按照下面步驟來運(yùn)行官方案例：
# 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總結(jié)
以上是生活随笔為你收集整理的Electron初步【02】--第一个Electron App的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 应用程序开发入门
- 下一篇： ExtJs之Ext.view.View