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 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
JS求解两数之和算法详解
Apr 28 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
8个必备的PHP功能开发
2015/10/02 PHP
Joomla开启SEF的方法
2016/05/04 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
使用正则替换变量
2007/05/05 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
js模块加载方式浅析
2017/08/12 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python 判断一个进程是否存在
2009/04/09 Python
python基础教程之类class定义使用方法
2014/02/20 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
transform python环境快速配置方法
2018/09/27 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python3获取cookie常用三种方案
2020/10/05 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
周年庆促销方案
2014/03/15 职场文书
中标通知书格式
2015/04/17 职场文书
《确定位置》教学反思
2016/02/18 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android