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 相关文章推荐
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 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入门基础之php代码写法
2011/12/30 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
$()JS小技巧
2007/07/21 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
名片管理系统python版
2018/01/11 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
关于python 跨域处理方式详解
2020/03/28 Python
python怎么提高计算速度
2020/06/11 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
用python批量下载apk
2020/12/29 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
毕业生个人求职信范文分享
2014/01/05 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
MySQL 重写查询语句的三种策略
2021/05/10 MySQL