用HTML5+JS开发跨平台的桌面应用

经过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 之上。

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 页面。

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