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 相关文章推荐
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jquery队列函数用法实例
Dec 16 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
vue使用element-ui实现表单验证
Dec 13 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
用PHP读取RSS feed的代码
2008/08/01 PHP
php 安全过滤函数代码
2011/05/07 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
详解Python time库的使用
2019/10/10 Python
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
opencv实现图像几何变换
2021/03/24 Python
中文系师范生自荐信
2013/10/01 职场文书
四年大学自我鉴定
2014/02/17 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
python热力图实现的完整实例
2022/06/25 Python