本文將通過hello word案例收苏，來記錄學習electron的過程。
注:我的環(huán)境是 macOS Sierra,不涉及windows平臺,請確保已安裝node.js

electron 簡介

electron是一款可以使用JavaScript,HTML,CSS來構建跨平臺app的開源框架谎亩。

electron 官方入門demo

如果你想嘗試一下electron,那么使用electron-quick-start是一個很好的選擇歧匈。

# Clone the Quick Start repository  克隆項目到本地
git clone https://github.com/electron/electron-quick-start

# Go into the repository 進入項目根目錄
cd electron-quick-start

# Install the dependencies and run 安裝依賴并運行
npm install && npm start

如果你以為這樣就成功了，那你好天真啊纸泄，但是事情不可能如此簡單...

錯誤一

卡住了ing...

解決過程

運行到node install.js卡住了基公，長時間沒有反應，該怎么辦呢宋欺？我們應該找找原因轰豆。

• 首先執(zhí)行rm -rf node_modules,將node_modules文件夾刪除
• 執(zhí)行npm install -verbose胰伍，在安裝依賴過程中顯示的信息將更為詳細
  
  詳細信息

現在知道原因了，因為網速太慢了!!! (我當前有使用VPN酸休，如果網速快骂租，也很快就可以安裝完依賴；但是VPN速度不穩(wěn)定斑司，這個放在最下面講...)
大家知道由于某些原因渗饮，網絡是被墻掉的，而electron的源地址是在國外宿刮，所以建議使用淘寶鏡像互站。

• 執(zhí)行npm install -g cnpm --registry=https://registry.npm.taobao.org ,安裝cnpm工具
• 執(zhí)行cnpm install，要記得先刪除node_modules文件夾

淘寶鏡像

• 最后執(zhí)行npm start,app將自行啟動
  我的執(zhí)行結果如下僵缺，

命令窗口

啟動成功ing

這里可能會有一個小問題

如果出現如下錯誤提示胡桃，表明找不到electron命令，只要全局安裝electron即可磕潮，命令npm install electron -g

找不到electron命令ing

項目結構分析

electron項目主要由3部分組成：

• main.js
• index.html
• package.json

package.json

其中main.js的名稱不是固定的翠胰，你可以任意定義，但是千萬記得在package.json中寫相同的名字自脯，否則無法啟動app之景。

  "main": "main.js"   

如果main字段沒有聲明，則會優(yōu)先加載index.js

main.js

main.js用于創(chuàng)建窗口和處理系統(tǒng)事件膏潮。

// 引用electron依賴
const electron = require('electron')
// Module to control application life.  創(chuàng)建應用實例
const app = electron.app
// Module to create native browser window.      引用原生瀏覽器窗口锻狗，用于創(chuàng)建和控制瀏覽器窗口
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
// 保存一個對于window對象的全局引用，如果你不這樣做戏罢，當JavaScript對象被垃圾回收屋谭，window對象將關閉。
let mainWindow

function createWindow () {
  // Create the browser window.  創(chuàng)建瀏覽器窗口龟糕，并設置寬高 
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.    加載應用的index.html
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.   打開開發(fā)者工具  
  mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.      當窗口被關閉時桐磁，觸發(fā)這個事件
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows     
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.

    // 取消引用window對象，如果你的應用支持多窗口的話讲岁，通常
    //  會把多個window對象存放在一個數組里面我擂，與此同時，你應該刪除相應的元素缓艳。
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.

// electron會在初始化后校摩，準備創(chuàng)建瀏覽器窗口時調用這個函數，
// 部分API在 ready事件出發(fā)后才能使用
app.on('ready', createWindow)

// Quit when all windows are closed.   當所有窗口關閉時推出  
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.

  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

該文件是需要展示的內容阶淘。

自己寫hello word

在了解了以上內容之后衙吩，相信大家對electron已經有了一些了解，下面我們來動手寫一個hello word.

新建項目

# 新建文件夾  
mkdir hello_electron  
# 項目初始化  
npm init  

配置package.json

在package.json中添加main字段溪窒，用于指定electron app的入口文件

"main": 'index.js'

添加script命令 ,用于啟動electron app

"scripts": {
    "start": "electron ."
  },

安裝electron

# 進入項目根目錄
cd hello_electron
#安裝electron
npm install electron --save 
# 網絡有問題的同學請使用淘寶鏡像
cnpm install electron --save

建立index.html

和普通的html一樣坤塞，我們寫個簡單的標簽

<h1>hello world</h1>

建立index.js

先寫一個簡化版的例子冯勉。

// 引入electron模塊  
const electron = require('electron');

// 用來控制應用的生命周期  
const app = electron.app;

// 用來創(chuàng)建瀏覽器窗口  
const BrowserWindow = electron.BrowserWindow;

// 創(chuàng)建一個全局變量，名字任意摹芙，相當于普通網頁的window對象  
let mainWindow;

// 創(chuàng)建瀏覽器窗口函數
function createWindow() {
   // 創(chuàng)建瀏覽器窗口
  mainWindow = new BrowserWindow({
    width:500,
    height:800
  })
//加載項目目錄下的index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 當窗口被關閉時調用
mainWindow.on('closed', function () {
  // 取消引用window對象灼狰，如果你的應用支持多窗口的話，通常
  //  會把多個window對象存放在一個數組里面浮禾，與此同時交胚，你應該刪除相應的元素。
   mainWindow = null
 })
}
// 當應用觸發(fā) ready 事件后盈电，創(chuàng)建瀏覽器窗口
app.on('ready',function(){
 createWindow();
})

此時蝴簇，執(zhí)行npm start,將會打開hellow_electron。

到這里挣轨，已經算是小功告成了军熏；但是你會發(fā)現當關閉app后，直接退出了卷扮，dock欄里面的electron圖標也不見了荡澎。想要再次打開，還要去命令行跑一次晤锹。

因為現在的index.js是最簡易的摩幔，只是創(chuàng)建了一個窗口。現在添加如下代碼

 // 當點擊關閉時鞭铆，在dock中保留electron
  app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
// 點擊dock中的electron圖標的時候或衡，再次創(chuàng)建窗口
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

再次運行，你會發(fā)現當關閉窗口時车遂，dock中還保留著electron的icon,并且點擊可以再次打開封断。

打包

• 安裝electron-package

npm install electron-packager --save-dev

• 添加scrip命令 ,用于打包electron app。

  這里只配置的平臺為darwin舶担，即OSX系統(tǒng)坡疼；arch為x64。

"scripts": {
    "start": "electron ."衣陶，
    "build": "electron-packager .  hello_electron --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
  },

electron-packager命令格式

electron-packager 項目目錄 app名稱 --platform=平臺 --arch=架構 --ignore=要忽略的目錄或文件

• arch
  ia32 柄瑰， x64 ， armv7l 剪况， all

• plateform
  linux 教沾， win32 ， darwin 译断， mas 授翻， all

  OS X (also known as darwin)
  Mac App Store (also known as mas)

執(zhí)行命令npm run build,將得到如下結果

安裝過程中會下載相關的平臺依賴，所以請耐心等待...

npm run build

項目文件目錄

helle_electron就是打包后生成的electron app。
這里有個不起眼的問題堪唐，hello_electron-darwin-x64這個文件夾無法使用鼠標刪除隆箩，每次移到廢紙簍之前都會讓輸入用戶密碼，但是輸完密碼又不會移到廢紙簍羔杨。可使用命令rm -rf hello_electron-darwin-x64進行強制刪除杨蛋，如果提示文件件不是空目錄兜材，就先刪掉文件夾里面的文件。

壓縮源碼

雖然生成app了逞力，但是源碼仍然是暴露的曙寡，當用戶打開app的包內容，進入目錄hellow_electron/Contents/Resources/app寇荧，將看到源代碼文件举庶。

顯示包內容

源代碼

為避免源代碼泄露，可對源碼進行壓縮揩抡。

• 安裝electron-asar

npm install electron-asar --save-dev

• 添加scrip命令 ,用于壓縮源代碼户侥。

"scripts": {
    "start": "electron ."，
    "build": "electron-packager .  hello_electron --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
    "package":"asar pack hello_electron-darwin-x64/hello_electron.app/Contents/Resources/app hello_electron-darwin-x64/hello_electron.app/Contents/Resources/app.asar"
  },

asar 命令格式

asar pack <dir> <output>

執(zhí)行npm run package將得到app.asar文件峦嗤，此時可將app文件刪除蕊唐。

asar文件

參考

• electron 中文文檔
• electron-packager
• 打包electron應用 - 金絲猴的博客
• electron-packager API
• electron-asar

如果喜歡，請點個贊^_