給新手的最簡單electron使用教程

我花了兩個月閑暇翻譯完了文檔,大概是目前最完整最實時的中文文檔了,有需要可以去看看學學:github傳送門,大多數的需求閱讀文檔即可解決,實際上,翻譯文檔正是我入門一項未知事物時的最簡單常用的法子.

electron其實很方便,不過對於剛接觸的前端而言學起來可能比較麻煩,因為不少都需要命令行來.
這是篇簡單的入門教程,省略了諸多步驟,只純粹了解win下的electron使用前提,安裝方法,使用教程,打包四個環節.

---

Electron安裝方法:
由於上文中傳送門里的文檔已經非常簡便的闡明安裝方法,極其之簡單,這里不再重復.需要的同學可前往閱讀.

---

線上打包:
很多朋友都是web站好了再利用electron做個殼子給客戶,這樣就免了啟動瀏覽器.
想法是好的,但思路是不太應該的.
因為它本身帶的api還是很不錯的,你應該按着electron構建你的web,這樣才是更聰明的辦法.
偏偏明知不聰明,我們就有這樣的需求時:

打開c:/electron-quick-start/,我們只要這幾個文件,其余刪了.
    .git
    node_modules
    .gitignore
    main.js
    package.json
    找到createWindow()修改成以下:

function createWindow () {
  mainWindow = new BrowserWindow({width: 1200, height: 800,frame: false })
  mainWindow.loadURL('http://www.baidu.com')
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

---

進行打包:

打包之前,運行cmd,輸入npm install -g electron-packager
cd c:/electron-quick-start
c:/electron-quick-start/>electron-packager ./ --platform=win32 --arch=ia32
這樣c:/electron-quick-start下就多了個程序目錄,修改圖標和程序名就是你的第一個exe應用了.

對於新手而言,就這么簡單的進行了一次嘗試.接下來你只要專心學習它的API,必定能開發出更強大的應用.這就是這篇教程的意義.如果你在開發時遇到一些自覺文檔無法提及的需求可以在上文傳送門中提出,我若有空大部分情況下會為你做出解決方案,事實上在介紹頁中已列出了很多小例子.