通过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

用HTML5+JS开发跨平台的桌面应用的更多相关文章

  1. java,swift,oc互相转换,html5 web开发跨平台

    java,swift,oc互相转换,html5 web开发跨平台 写一个java->swift的程序,这个程序是做跨平台系统的核心部分swift和oc到java也在考虑之列Swift->J ...

  2. 使用JavaScript开发跨平台的桌面应用

    任何可以使用JavaScript来编写的应用,最终会由JavaScript编写.--Atwood定律 Atwood's Law是Jeff Atwood在2007年提出的:"any appli ...

  3. 基于Vue.js的uni-app前端框架结合.net core开发跨平台project

    一.由来 最近由于业务需要要开发一套公益的APP项目,因此结合所给出的需求最终采用uni-app这种跨平台前端框架以及.netcore快速搭建我们的项目,并且能做到一套代码跨多个平台. 当然在前期技术 ...

  4. uni-app — 一套前端开发跨平台应用的终极解决方案

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 今天有空就来介绍一下uni-app这个能够跨平台开发, ...

  5. 开发跨平台应用解决方案-uniapp 真心不错,支持一波

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.微信小程序等多个平台. 用了mui,H5+一年多了,感觉dcloud 最近推出的 ...

  6. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  7. heX:用HTML5和Node.JS开发桌面应用

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  8. (转)heX——基于 HTML5 和 Node.JS 开发桌面应用

    本文转载自:http://techblog.youdao.com/?p=685 简介:heX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.是你开发 ...

  9. 使用 video.js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

随机推荐

  1. Java中递归和循环的优劣

    介绍: 你用你手中的钥匙打开一扇门,结果去发现前方还有一扇门,紧接着你又用钥匙打开了这扇门,然后你又看到一扇门......但是当你开到一扇门时,发现前方是一堵墙无路可走了,你选择原路返回--这就是递归 ...

  2. 获取AFP服务信息

    获取AFP服务信息   如果苹果系统开放TCP 548端口,说明其开启了AFP服务.这个时候,可以使用Nmap的afp-serverinfo脚本获取对应的服务信息.获取的信息包括服务名.机器类型.AF ...

  3. 关于文档模式、DCOTYPE声明及严格模式

    1.文档模式 文档模式的概念是由IE5.5引入,通过使用文档类型(DOCTYPE)切换实现的.不同的文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScr ...

  4. Java 之递归遍历目录

    Java 之递归遍历目录 一.内容 输出指定目录(文件夹)下的所有文件(包括目录)的绝对路径 二.源代码:RecursiveListDirectory.java package cn.com.zfc. ...

  5. BZOJ.5404.party(树链剖分 bitset Hall定理)

    题目链接 只有指向父节点的单向道路,所以c个人肯定在LCA处汇合.那么就成了有c条到LCA的路径,求最大的x,满足能从c条路径中各选出x个数,且它们不同. 先要维护一条路径的数的种类数,可以树剖+每条 ...

  6. 洛谷P1144 最短路计数(SPFA)

    To 洛谷.1144 最短路计数 题目描述 给出一个N个顶点M条边的无向无权图,顶点编号为1-N.问从顶点1开始,到其他每个点的最短路有几条. 输入输出格式 输入格式: 输入第一行包含2个正整数N,M ...

  7. BZOJ.4289.PA2012 Tax(思路 Dijkstra)

    题目链接 \(Description\) 给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价 ...

  8. 洛谷.1486.[NOI2004]郁闷的出纳员(Splay)

    题目链接 /* BZOJ1503: 3164kb 792ms/824ms(新建节点) 洛谷 : 3.06mb 320ms/308ms(前一个要慢wtf 其实都差不多,但前者好写) 四种操作: A:所有 ...

  9. socket 远程命令

    # -*- coding: utf-8 -*- # 斌彬电脑 from socket import * import subprocess server = socket(AF_INET, SOCK_ ...

  10. django常用命令

    model 创建表的命令 (1): python manage.py makemigrations (2): python manage.py migrate 创建一个project项目 django ...