[Electron] 學習筆記(1) - Hello World

source code @ GitHub

在這篇教學，要用Electron寫一個簡單的桌面程式，畫面顯示Hello World

首先，到Elecetron的官方Github，這邊會說明怎麼下載，也提供一些其他語言的資源

這篇教學主要是參考官方的文件，裡面的說明已經滿清楚的

直接照著裡面一步一步做就好，之後也可以拿這個版本當作起始模板使用

相關原始碼都放在 basic 這個資料夾下

接下來就用 electron 來寫一個 Hello World

• 最基本的 electron app 資料結構如下

your_app
    |- package.json
    |- main.js
    |- index.html

• 先寫好 package.json，最簡單的版本如下

{
    "name": "basic"
    "version": "0.1.0"
    "main": "main.js"
}

main 這個欄位，主要是讓 electron 知道哪一個檔案是 main process 要執行的。

main process 會創建 application 並且負責 GUI 相關功能

application 會包含 web page，也就是 application 的畫面

而每個 web page 都有獨立的 renderer process 來做處理

這是因為 electron 使用的是 Chromium 的 multi-process 架構

而 main process 會管理所有的 renderer process。

• 用 npm 安裝 electron

npm install electron --save-dev
當然，也可以安裝成 global

npm install electron -g

• 撰寫 main.js(ref link)

• index.html (ref link)

• 執行程式

* local 安裝
./node_modules/.bin/electron .
* global 安裝
electron .

• 執行結果