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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
js实现select下拉框选择
Jan 11 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学习笔记 类的声明与对象实例化
2011/06/13 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP类的封装与继承详解
2015/09/29 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
three.js 入门案例详解
2018/01/23 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
建筑学推荐信
2013/11/03 职场文书
机械专业求职信范文
2014/07/15 职场文书
员工工作及收入证明
2014/10/28 职场文书
出生公证书
2015/01/23 职场文书