相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
6 likes4,143 views
本文介紹了如何使用 electron.js 開發相容於 node.js 的桌面應用程式，強調其與 npm 包的相容性及便捷性。作者分享了多個範例，以展示電子應用的功能，包括媒體播放、編輯器和自製瀏覽器等，並指出 electron.js 的主程式和渲染程式的架構。最終，作者希望透過這個教學，讓更多人能夠運用 node.js 的技術來開發桌面應用。
相容於node.js的 網頁型桌面程式設計 (使用Electron.js 開發)
- 1. 相容於 node.js 的 網頁型桌面程式設計 ( 使用 Electron.js 開發 ) 陳鍾誠 2017 年 10 月 23 日 程式人《十分鐘系列》程式人《十分鐘系列》 本文衍生自維基百科
- 2. 這年頭 ● 大家的焦點好像都在《 APP 和網 站》，傳統的視窗程式愈來愈少人 關注了 ...
- 5. 不過令人感到困擾的是 ● 傳統微軟的 WinForm 已然過時， 微軟的 WPF 看來也快過時了， 但新的 Xamarin 又前途未卜 ...
- 6. 開放原始碼的 Qt 視窗開發工具 ● 感覺很強大 ● 而且還支援 JavaScript/QML ，甚至可 以在 Android/iOS 上跑 … ● 但很可惜難以支援 Node.js 的 npm 套件 ...
- 7. 對於已經把主力 ●轉到 Node/JavaScript 的我 ●不能使用 npm 套件的 Qt 似乎 沒有足夠的吸引力！
- 12. 簡單的說 ● Electron.js 就是一套可以讓你用 HTML/CSS/JavaScript 等 web 開發技術，來 開發桌面應用的工具 ● 而且 Electron.js 和 node.js 幾乎完全 相容，幾乎可以使用全部的 npm 套件！
- 14. 要使用 electron.js 開發視窗程式 ●您首先必須安裝 node.js –https://nodejs.org/
- 15. 裝好後、使用 npm 指令 ●安裝 electron.js –npm install -g electron
- 17. 問題是 ●怎麼開始寫呢？
- 21. 執行範例後你會看到下列畫面
- 22. 基本上只是個 Hello 程度的專案而已 ● 其檔案列表如下：
- 23. 讓我們詳細看看內容
- 24. 首先看 package.json 這和 node.js 的 package.json 幾乎一模一樣 其中的 main 欄位指出了主程式是 main.js
- 26. 當我們打入 ●electron 《專案路徑》 –例如 : electron . 的時候，就會執行該主程式
- 27. 在主程式 main.js 中 會用 loadURL() 函數載入網頁
- 29. 上述範例的 index.html 如下 注意這裡可以引入像 node.js 一樣的模組 ( 這是和一般 HTML 不一樣的地方 )
- 31. 現在 ●你已經看完第一個範例了
- 32. 但是 ●應該還有很多疑問 ...
- 35. 請使用下列 git 指令取得範例 ● git clone https://github.com/cccnqu/wp106a.git
- 36. 然後、讓我們一個一個範例執行
- 41. 接著是第三個範例 - 電子鐘
- 43. 第四個範例是翻譯系統
- 44. 我們把一個小字典直接寫在程式裡面
- 47. 像是 ● 開關檔案 ● 顯示對跨框選取檔案 ● 印表機與 PDF 列印 ● 抓取畫面並存檔 ● 開很多網頁並互相通訊 …
- 50. 雖然看起來網頁也做得到
- 52. 這是原本瀏覽器所不支援的功能
- 55. 其功能表的程式碼如下
- 58. 接著引入一個稱為 marked 的 npm 模組
- 59. marked 可以用來把 markdown 格式轉為 HTML
- 60. 於是我們寫了一個 markdown 編輯器 利用 marked 將文件轉為 HTML 呈現
- 62. 我們會在程式裡 用 marked 將 markdown 轉為 html
- 65. 從 markdown 編輯器的範例中 ● 您應該可以看到在 electron.js 中 使用 npm 模組是非常容易的事情！
- 66. 接著讓我們再看幾個例子
- 67. 像是自製瀏覽器
- 68. 您可以使用 webview 這個特殊的 HTML 標記
- 69. 然後加上對應的控制程式
- 70. 就能完成 ●一個內嵌瀏覽器了
- 71. 接著是印表功能的範例
- 73. 您也可以儲存為 PDF 後檢視 然後再決定要不要印 ...
- 75. 然後也可以做抓取螢幕畫面的程式
- 76. 主要程式碼片段如下
- 78. 只是程式碼會比較長
- 79. 這樣 ● 我們就看完了不少 Electron.js 的 程式範例了
- 81. Node.js ● 是單行程 Single Process 的架構
- 83. Electron.js ● 其主程式為一個行程 ( 稱為 Main Process) ● 每個 BrowserWindow 載入網頁又是一個行 程 ( 稱為 Render Process)
- 84. Render Process ● 可以透過 remote 物件存取主行程的內容
- 85. 也可以透過 ipc 互相通訊
- 86. 透過 Electron.js ● 我們就可以輕易地寫出《網頁型的 視窗程式》 ● 並且可以任意的存取 node.js 的 npm 套件或程式了。
- 87. 這樣 ● 原本使用 node.js 的朋友們 ● 就可以輕易地寫出桌面程式了！
- 88. 這就是我們今天的 ●十分鐘系列！
- 89. 希望您會喜歡！
- 90. 我們下回見！
- 91. Bye Bye!