用HTML5+JS開發跨平臺的桌面應用

稻草人.Net發表於2015-11-05
HTMLJS

通過Node.js和WebKit技術的融合，開發者可以用HTML5技術編寫UI，同時又能利用Node.js平臺上眾多library訪問本地OS的能力，最終達到用Web技術就可以編寫桌面應用的目的。

 

選擇 Electron 和 Vue.js

Electron

我們想要快速的開發一款體驗友好的跨平臺應用，網上逛了一圈，對 Electron 和 NW.js 產生的興趣多點，而最後選擇了 Electron，總結有以下幾點：

  • Java、C# 等技術，開發成本高、耗時；
  • RubyMotion 等技術：
    • 相對於第一點好很多，但還是不夠，除非應用需要原生級別的效能需求；
    • 而且 RubyMotion 暫時不支援 Windows 和 Linux；
  • 我是前端小工匠，上手 Electron 非常快，學習成本低；
  • JavaScript/Node.js 的效能很不錯，足夠用了；
  • Electron 比 NW.js 更接近 Node.js 執行時，API 也更加底層。

Electron（原名 Atom-Shell）是 GitHub 隨 Atom 一起開源的跨平臺的利用 Web 技術（Node.js、JavaScript、HTML 和 CSS）開發桌面應用的框架。Atom 即構建在 Electron 之上。

#Logo

Electron 為用純 JavaScript 建立跨平臺桌面應用提供了執行時，它通過整合的 Node.js 執行 Main 檔案建立一個主程式從而啟動一個應用程式，主程式呼叫一個叫 BrowserWindow 的模組建立應用視窗並賦予它系統原生的 GUI 互動功能，每個應用視窗會執行自己的渲染程式，渲染程式會在視窗中渲染出 Web 頁面，Web 頁面由 Chromium 渲染，跨平臺相容性相當不錯。

Vue.js

起初只是衝著 Vue.js 的優雅輕巧想學習瞭解一下，把官方的教程快速過了一遍，然後就做開發了，對於之前有接觸過 AngularJS 這類 MVVM 前端框架的同學來說，上手學習成本非常低，初嘗感覺不錯，現在打算在下一個大專案繼續嘗試之。

在這我就不多介紹 Vue.js 了，總的來說就是優雅、輕巧、功能豐富、非常不錯的輕量級 MVVM 框架，引用官方的介紹：

Vue.js 是一個用於建立 Web 互動介面的庫，專注於 MVVM 模型的 ViewModel 層。它通過雙向資料繫結把 View 層和 Model 層連線了起來。實際的 DOM 封裝和輸出格式都被抽象為了 Directives 和 Filters。Vue.js 的 API 設計深受 AngularJS、KnockoutJS、Ractive.js 和 Rivets.js 的影響。儘管有不少相似之處，但 Vue.js 能夠在簡約和功能之間的微妙平衡中體現出其獨有的價值。

官方有中文文件，傳送門：Vue.js

Electron 相關特點

程式入口

Electron 的程式入口是一個 JavaScript 指令碼（package.json 指定），由 Node.js 來執行，你需要手動建立應用視窗，並通過相應的 API 載入 HTML 檔案或 URL，你同時需要監聽應用視窗事件以便決定何時退出應用。

API

  • Electron API，提供與系統互動的相關介面，方便直接使用 JavaScript 呼叫；
  • Node.js 提供 Node API，有開發 Node.js 程式一致的體驗，還可以很方便使用各種包；
  • Chromium 提供的 Web API，使得開發 GUI 就像開發瀏覽器頁面一樣簡單。

Main Process、Render Process 和程式間通訊

Main Process 和 Render Process 是 Electron 中兩個分開的概念，彼此是隔離的。開發者的 Main 檔案執行環境就是 Main Process，而每個 BrowserWindow 例項則是一個個 Render Process。Main Process 建立並管理所有的 Render Process，每個 Render Process 都是獨立的，只關心所執行的 Web 頁面。

#Process

Main Process 和 Render Process 之間可以通過 IPC 模組或 Remote 模組（RPC）進行通訊，實現互相訪問資源並進行協調工作。

其他特點

  • 原生對話方塊（Dialog API）
  • 全域性快捷鍵（Global-Shortcut）
  • 原生應用選單（Menu）
  • 協議支援（Protocol）
  • 系統托盤（Tray）
  • 等等...

其他的大家看看官方文件，傳送門：Electron

 

相關資料：

http://www.zhihu.com/question/36644309

https://youhaosuda.com/blog/31

http://get.ftqq.com/7870.get

http://hex.youdao.com/zh-cn/index.html

http://www.tuicool.com/articles/aAFZzmi 

http://nwjs.io/

https://github.com/nwjs/nw.js/wiki/How-to-package-and-distribute-your-apps

http://zhuanlan.zhihu.com/FrontendMagazine/20070166

http://www.baidufe.com/item/1fd388d6246c29c1368c.html

http://damoqiongqiu.iteye.com/blog/2010720

http://www.cnblogs.com/2050/p/3543011.html

相關文章