文档章节

用HTML5打造本地桌面应用

lotozhou
 lotozhou
发布于 2015/12/11 15:41
字数 854
阅读 692
收藏 15

    HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优势,同时在智能手机和平板中也是开发利器。

    在手机端,有一个非常棒的工具叫做PhoneGap,使用这个快速开发平台,任何人都可以使用HTML5+CSS3+JavaScript开发出安卓,iOS等应用。PhoneGap的最好的一个特点是,你并不需要联网,不需要连接web服务器,你可以从把它当成本地桌面应用。一旦下载到本地,它和本地原生应用一样可以离线使用。

phonegap

    通常我们会感觉网上有很多有趣的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




© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
迈向HTML5的路上,苹果扯了一下Google的蛋

如果可以有一家公司在移动互联网领域击败苹果,那么应该只有Google! 苹果对本地应用的死忠正是web之王Google的矛头所指。一份分析指出,web和html5将在接下来的四年里面将苹果的经营利润削掉...

鉴客
2011/09/18
6.6K
14
关于HTML5应用现状与前景的思考

现在的 HTML5 就像当年崭露头角时的 Ajax,有人在做,但不知道叫它什么。最近,苹果在 HTML5 上大做文章,而著名的 Web 设计师 Eric Meyer 则提出了 Web Stacks 的概念。Alex Kessinger 是 ...

红薯
2010/06/20
749
1
W3C发布HTML5官方Logo

W3C(World-Wide Web Consortium,万维网联盟)在今天放出了HTML5的官方新Logo,并对最近的网络开发技术做出了新的解释。HTML5在过去一年左右的时间里 成为大家争论的焦点。在Google的支持以...

mallon
2011/01/19
748
3
微软、谷歌、Twitter对HTML5地位问题的争论

HTML5是制作下一代Web应用程序的圣杯吗?开发人员应该抛弃浏览器支持在iPhone和安卓等具体设备上运行的客户应用程序吗? 这些问题都是微软、谷歌和Twitter等公司的Web和应用程序设计人员上周四...

红薯
2011/06/28
1K
12
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1

没有更多内容

加载失败,请刷新页面

加载更多

微信开发-正式号的配置

1、设置相关 业务域名的设置(不设置的话,相关页面会显示防欺诈盗号信息提示) JS接口安全域名设置 网页授权域名设置 注意:以上三个设置中都有下载文件的提示,此文件内容一样,下载一个即可...

Code辉
7分钟前
0
0
微服务之Eureka服务发现

当调用API或者发起网络通信的时候,无论如何我们都要知道被调用方的IP和服务端口,大部分情况是通过域名和服务端口,事实上基于DNS的服务发现,因为DNS缓存、无法自治和其他不利因素的存在,...

架构师springboot
7分钟前
0
0
spring boot2 admin login

版本: admin server 配置 admin client 配置 参考资料

showlike
10分钟前
0
0
NIO、Netty(Netty基础)

一、概述 Netty是一个Java的开源框架。提供异步的、事件驱动的网络应用程序框架和工具,用以快速开发高性能、高可靠性的网络服务器和客户端程序。 Netty是一个NIO客户端,服务端框架。允许快...

这很耳东先生
15分钟前
0
0
Spring boot 读文件

每次都忘, 找起来太费事, 因为太乱. 简单说, 就是不打成jar包的时候, 可以返回File, 打成jar包只能返回InputStream. -- 要是把返回File那个方法去掉多好.就不用tmd本地ok, 发布的时候懵逼了....

园领T
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部