給新手的最簡單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,一定能開發出更強大的應用.這就是這篇教程的意義.若是你在開發時遇到一些自覺文檔沒法說起的需求能夠在上文傳送門中提出,我如有空大部分狀況下會爲你作出解決方案,事實上在介紹頁中已列出了不少小例子.