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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
微信JS接口大全
Aug 25 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
AngularJS中的promise用法分析
May 19 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
python实现移动木板小游戏
2020/10/09 Python
好的演讲稿开场白
2013/12/30 职场文书
致100米运动员广播稿
2014/02/14 职场文书
单位在职证明书
2014/09/11 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
社区节水倡议书
2015/04/29 职场文书
消费者投诉书范文
2015/07/02 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle