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 parseInt 函数分析(转)
Mar 21 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
3种js实现string的substring方法
Nov 09 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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
php基础知识:类与对象(5) static
2006/12/13 PHP
php URL验证正则表达式
2011/07/19 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
JQuery index()方法使用代码
2010/06/02 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
Python实现将xml导入至excel
2015/11/20 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
详解Python循环作用域与闭包
2019/03/21 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
《小松树和大松树》教学反思
2014/02/20 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
农行心得体会
2014/09/02 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
家长会欢迎词
2015/01/23 职场文书
小学班主任工作随笔
2015/08/15 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL