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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
限制文本字节数js代码
Mar 06 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
浅谈js中对象的使用
Aug 11 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
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
Sony CFR 320 修复改造
2020/03/14 无线电
PHP4中实现动态代理
2006/10/09 PHP
透析PHP的配置文件php.ini
2006/10/09 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
js停止输出代码
2008/07/20 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
python 全局变量的import机制介绍
2017/09/07 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
django实现用户注册实例讲解
2019/10/30 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
教师推荐信范文
2013/11/24 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
党员承诺书范文
2014/05/19 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
紫日观后感
2015/06/05 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Python基础知识学习之类的继承
2021/05/31 Python