用HTML5+JS开发跨平台的桌面应用
2015-11-05 10:39
567 查看
通过Node.js和WebKit技术的融合,开发者可以用HTML5技术编写UI,同时又能利用Node.js平台上众多library访问本地OS的能力,最终达到用Web技术就可以编写桌面应用的目的。
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 了,总的来说就是优雅、轻巧、功能丰富、非常不错的轻量级 MVVM 框架,引用官方的介绍:
Vue.js 是一个用于创建 Web 交互界面的库,专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。Vue.js 的 API 设计深受 AngularJS、KnockoutJS、Ractive.js 和 Rivets.js 的影响。尽管有不少相似之处,但 Vue.js 能够在简约和功能之间的微妙平衡中体现出其独有的价值。
官方有中文文档,传送门:Vue.js
Node.js 提供 Node API,有开发 Node.js 程序一致的体验,还可以很方便使用各种包;
Chromium 提供的 Web API,使得开发 GUI 就像开发浏览器页面一样简单。
Main Process 和 Render Process 之间可以通过 IPC 模块或 Remote 模块(RPC)进行通信,实现互相访问资源并进行协调工作。
全局快捷键(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
选择 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
相关文章推荐
- Javascript DOM操作实例
- C_C++_Java_JavaScript_逗号表达式
- 使用js Math.random()函数生成n到m间的随机数字
- js 如何将无限级分类展示出来
- JS 数组的删除与判断是否存在的两个扩展方法
- HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传
- a href="javascript:void(0)" 是什么意思?加不加上有什么区别
- JS实现的新浪微博大厅文字内容滚动效果代码
- javaScript的on方法,动态触发事件
- JavaScript中清空数组的三种方式
- Extjs gridPanel对选中行的操作
- js cookie
- 【Miaov】JS6-作用域
- JS读取XML文件(兼容浏览器)
- JS实现自定义简单网页软键盘效果代码
- javascript中的数组操作
- JavaScript跨域总结与解决办法
- json editor verify online
- JSON.parse()和JSON.stringify()
- JavaScript实现cookie的写入、读取、删除功能