Download as PDF, PPTX
Uploaded by鍾誠 陳鍾誠
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
本文介紹了如何使用 electron.js 開發相容於 node.js 的桌面應用程式，強調其與 npm 包的相容性及便捷性。作者分享了多個範例，以展示電子應用的功能，包括媒體播放、編輯器和自製瀏覽器等，並指出 electron.js 的主程式和渲染程式的架構。最終，作者希望透過這個教學，讓更多人能夠運用 node.js 的技術來開發桌面應用。
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
- 1. 相容於 node.js 的 網頁型桌面程式設計 (使用 Electron.js 開發 ) 陳鍾誠 2017 年 10 月 23 日 程式人《十分鐘系列》程式人《十分鐘系列》 本文衍生自維基百科
- 2. 這年頭 ● 大家的焦點好像都在《 APP和網 站》，傳統的視窗程式愈來愈少人 關注了 ...
- 3.
- 4.
- 5. 不過令人感到困擾的是 ● 傳統微軟的 WinForm已然過時， 微軟的 WPF 看來也快過時了， 但新的 Xamarin 又前途未卜 ...
- 6. 開放原始碼的 Qt 視窗開發工具 ●感覺很強大 ● 而且還支援 JavaScript/QML ，甚至可 以在 Android/iOS 上跑 … ● 但很可惜難以支援 Node.js 的 npm 套件 ...
- 7. 對於已經把主力 ●轉到 Node/JavaScript 的我 ●不能使用npm 套件的 Qt 似乎 沒有足夠的吸引力！
- 8.
- 9.
- 10.
- 11.
- 12. 簡單的說 ● Electron.js 就是一套可以讓你用 HTML/CSS/JavaScript等 web 開發技術，來 開發桌面應用的工具 ● 而且 Electron.js 和 node.js 幾乎完全 相容，幾乎可以使用全部的 npm 套件！
- 13.
- 14. 要使用 electron.js 開發視窗程式 ●您首先必須安裝node.js –https://nodejs.org/
- 15. 裝好後、使用 npm 指令 ●安裝electron.js –npm install -g electron
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. 基本上只是個 Hello 程度的專案而已 ●其檔案列表如下：
- 23.
- 24. 首先看 package.json 這和 node.js的 package.json 幾乎一模一樣 其中的 main 欄位指出了主程式是 main.js
- 25.
- 26. 當我們打入 ●electron 《專案路徑》 –例如 :electron . 的時候，就會執行該主程式
- 27. 在主程式 main.js 中 會用loadURL() 函數載入網頁
- 28.
- 29. 上述範例的 index.html 如下 注意這裡可以引入像 node.js一樣的模組 ( 這是和一般 HTML 不一樣的地方 )
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. 請使用下列 git 指令取得範例 ●git clone https://github.com/cccnqu/wp106a.git
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47. 像是 ● 開關檔案 ● 顯示對跨框選取檔案 ●印表機與 PDF 列印 ● 抓取畫面並存檔 ● 開很多網頁並互相通訊 …
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. 接著引入一個稱為 marked 的npm 模組
- 59. marked 可以用來把 markdown格式轉為 HTML
- 60. 於是我們寫了一個 markdown 編輯器 利用marked 將文件轉為 HTML 呈現
- 61.
- 62. 我們會在程式裡 用 marked 將markdown 轉為 html
- 63.
- 64.
- 65. 從 markdown 編輯器的範例中 ●您應該可以看到在 electron.js 中 使用 npm 模組是非常容易的事情！
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79. 這樣 ● 我們就看完了不少 Electron.js的 程式範例了
- 80.
- 81. Node.js ● 是單行程 SingleProcess 的架構
- 82.
- 83. Electron.js ● 其主程式為一個行程 (稱為 Main Process) ● 每個 BrowserWindow 載入網頁又是一個行 程 ( 稱為 Render Process)
- 84. Render Process ● 可以透過remote 物件存取主行程的內容
- 85.
- 86. 透過 Electron.js ● 我們就可以輕易地寫出《網頁型的 視窗程式》 ●並且可以任意的存取 node.js 的 npm 套件或程式了。
- 87. 這樣 ● 原本使用 node.js的朋友們 ● 就可以輕易地寫出桌面程式了！
- 88.
- 89.
- 90.
- 91.