node.js 和HTML5开发本地桌面应用程序


Posted in Javascript onDecember 13, 2016

HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优势,同时在智能手机和平板中也是开发利器。

在手机端,有一个非常棒的工具叫做PhoneGap,使用这个快速开发平台,任何人都可以使用HTML5+CSS3+JavaScript开发出安卓,iOS等应用。PhoneGap的最好的一个特点是,你并不需要联网,不需要连接web服务器,你可以从把它当成本地桌面应用。一旦下载到本地,它和本地原生应用一样可以离线使用。

通常我们会感觉网上有很多有趣的HTML应用,但这些应用非要你打开浏览器,输入网址。其实我们更喜欢直接点击桌面的一个图标就启动一个程序的这种体验。用HTML5+js开发的本地桌面应用就是要提高给用户这种体验,除了上面说的PhoneGap,还有一些像Pokki和Chrome Package Apps或Mozilla XUL Runner都是开发HTML5本地桌面应用的框架。

Pokki和Chrome不仅可以用来开发HTML5桌面应用,而且可以把这些应用放到交易市场中出售。

另外一个有趣的工具是Node-Webkit,本文下面内容主要讨论的将是它。

Node-Webkit是一个基于Chromium和Node.js运行平台。它能让你把HTML5应用打包成本地桌面应用或游戏安装到Windows、Linux或Mac系统中。Node-Webkit项目是由英特尔开源技术中心开发,发起人是王文睿。

为什么Node-WebKit是开发HTML5本地桌面应用的最佳选择

  1. Node-WebKit能把你的HTML5应用打包成本地桌面应用,在Windows、Linux或Mac平台上,你不需要其它依赖就可以独立运行你的HTML5应用。
  2. 它支持Node.js。你可以使用Node.js的所有模块来开发你喜欢的app或游戏。不仅你可以使用Node.js原生的模块,而且可以使用第三方的node.js模块。

如何使用Node-Webkit开发HTML5本地桌面应用

这非常简单,像传统的开发你的HTML5应用一样开发它们,完成之后用Node-Webkit打包它。打包的方法是

1.先下载Node-Webkit

2.然后创建一个包文件命名为package.json, 写入下面的代码:

{
 "name": "nw-demo",
 "main": "index.html"
}

这里的“name”是你应用的名称,“main”是你的应用的启动文件,也就是应用启动是第一加载的文件。

3.将你的HTML5应用文件和package.json一起打包成zip

4.重命名zip文件,将其后缀变成 .nw ,比如app.nw

5.现在你就可以用node-webkit runtime来运行你的app了在Linux上的运行命令是

./nw app.nw

在Windows平台上你可以直接把你的app.nw拖拽到 nw.exe 程序上就行了。

6.想让你的应用更容易传播和发布,可以将它和node-webkit封装到一起,也就是将你的HTML5应用 app.nw 和 nw.exe 合成一个可执行文件。在Linux上的做法是

cat /usr/bin/nw app.nw > app && chmod +x app

在Window上的做法是

copy /b nw.exe+app.nw app.exe

你可以看看这个wiki文档,里面有更详细的介绍。希望这篇文章对你有所帮助。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
AngularJS中$apply方法和$watch方法用法总结
Dec 13 #Javascript
vue.js学习之递归组件
Dec 13 #Javascript
AngularJS过滤器filter用法总结
Dec 13 #Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 #Javascript
AngularJS服务service用法总结
Dec 13 #Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 #Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 #Javascript
You might like
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php微信支付之APP支付方法
2015/03/04 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php微信公众号开发模式详解
2016/11/28 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
理解python正则表达式
2016/01/15 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
详解Python 切片语法
2019/06/10 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
详解Python 循环嵌套
2020/07/09 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
大专生的学习自我评价
2013/12/04 职场文书
投资合作协议书范本
2014/04/17 职场文书