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

html页面axios使用跨域 html跨平台_c/c++

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 能够在简约和功能之间的微妙平衡中体现出其独有的价值。

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

html页面axios使用跨域 html跨平台_c/c++_02

Main Process 和 Render Process 之间可以通过 IPC 模块或 Remote 模块(RPC)进行通信,实现互相访问资源并进行协调工作。

其他特点

  • 原生对话框(Dialog API)
  • 全局快捷键(Global-Shortcut)
  • 原生应用菜单(Menu)
  • 协议支持(Protocol)
  • 系统托盘(Tray)
  • 等等...