下载node-webkit

点击这里:

https://github.com/rogerwang/node-webkit

找到Downloads这一小节,然后下载对应平台的node-webkit预编译包。(为了介绍起来方便,本文后续内容全部针对windows平台,OSX和linux平台上的操作类似,就不做特意说明了。)

下载完之后解压,可以看到如下内容:

双击nw.exe直接运行,看到如下界面说明一切都ok,在你的机器上可以运行:

Hello nw

老规矩,先来Hello World!

建一个example1.html,内容如下:

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello node-webkit!</h1>
We are using node.js <script>document.write(process.version)</script>.
</body>
</html>

在同一级目录下再建一个package.json,内容如下:

{
"name": "nw-demo",
"main": "example1.html"
}

好了,用你机器上的压缩工具,rar或者7z或者神马神马的,把这两个文件压缩成exampl1.zip,如下图所示:

        注意,用什么工具压缩无所谓,但是一定要压缩成ZIP格式。

把example1.zip拷贝到与nw.exe同级的目录下,如下图:

然后用鼠标把example1.zip拖动到nw.exe上运行(用命令行也可以,不过在windows下还是直接拖比较爽一点),效果如下图:

这样,第一个例子就完成了,然后你自己可以去玩儿了。

按照官方的搞法,example1.zip可改名成example1.nw,这样显得更加高大上一些。不过由于小僧的BIG一向比较低,私认为用.zip作为后缀也没啥不可以。

来点儿JS

第一个例子代码非常简单,你可以自己加点儿你最熟悉的JS代码,比如这样:

<!DOCTYPE html>
<html>
<head>
<title>Example2</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>
<h1>Example2</h1>
<script>
alert("This is example2!");
</script>
</body>
</html>

显然,这里有很多HTML5的习惯写法,那当然是必须的对吧?因为webkit在google的调教之下早已成了HTML5的开路先锋了!

打包和分发

如上图,很显然,要想让我们的应用跑起来,以上这些dll和pak文件是少不了的(至于每个文件是用来干嘛的,请参见官方的描述文档)。

那么,对于我们做的example1这个简单的应用,怎么让我们的用户能运行它呢?当然,让我们的用户自己去下载node-webkit然后解压运行,这也算一种办法,这样的话我们只要把example1.zip文件扔给他就可以了。

不过这样总觉得有点儿奇怪,要是能把所有相关的内容都打包成一个独立的exe文件就好了,比如打包成example1.exe,这样用户拿到之后直接双击就可以运行,这样显然是极好的。

OK,let's go!

首先,我们要合并example1.zip和nw.exe,形成一个新文件,名为example1.exe,这一点我们通过windows的命令行下的copy命令可以实现:

copy /b nw.exe+example1.zip example1.exe

        注意,nw.exe必须放在+号前面。

这样就生成了一个名为example1.exe的文件,双击这个文件,看到的效果和第一个例子相同。很显然,这个example1.exe还是要依 赖那些dll文件才能运行,所以,这时候我们需要一款打包工具来帮助我们把这些example1.exe和dll文件都打包到一起,它就是Enigma Virtual Box,大家可以点击这里下载安装:

http://enigmaprotector.com/assets/files/enigmavb.exe

安装完成之后启动,看到如下界面:

打包过程截图(请按照图中的配置操作):

点击右下角的Process按钮开始打包,最终获得了一个名为example1_boxed.exe的文件。把这个文件拷贝到其它任意目录中双击,如果能顺利运行,说明打包成功!你可以把它分发给你的用户了!

官方的文档上还介绍了其它几种打包分发方式,不过看起来都不是很实用,有兴趣的参见这里:

https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

node-webkit 入门的更多相关文章

  1. Node.js 入门手册:那些最流行的 Web 开发框架

    这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...

  2. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  3. 让我们一起学习《Node.js入门》一书吧!

    Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...

  4. Node.js入门实例程序

    在使用Node.js创建实际“Hello, World!”应用程序之前,让我们看看Node.js的应用程序的部分.Node.js应用程序由以下三个重要组成部分: 导入需要模块: 我们使用require ...

  5. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  6. Node.js 入门资料

    小毛驴的阿凡提的 Node.js 入门笔记 http://www.cnblogs.com/Afanty/category/1007304.html

  7. Node.js 入门 资源

    Node.js 入门 <快速搭建 Node.js 开发环境以及加速 npm> http://fengmk2.com/blog/2014/03/node-env-and-faster-npm ...

  8. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

  9. 极简 Node.js 入门 - Node.js 是什么、性能有优势?

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  10. 极简 Node.js 入门 - 1.2 模块系统

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

随机推荐

  1. MySQL数据库调优技巧

    原文链接:https://m.aliyun.com/bbs/read/300762.html MySQL是一个功能强大的开源数据库.随着越来越多的数据库驱动的应用程序,人们一直在推动MySQL发展到它 ...

  2. Python day13文件的读写

    # 文件操作 f=open("E:\\1.txt",encoding="GBK")#打开文件 print(f.writable())#是否可写 print(f. ...

  3. c语言的左移和右移

    转自:https://www.cnblogs.com/myblesh/articles/2431806.html 先说左移,左移就是把一个数的所有位都向左移动若干位,在C中用<<运算符.例 ...

  4. 《剑指offer》第三_一题(找出数组中重复的数字,可改变数组)

    // 面试题3(一):找出数组中重复的数字 // 题目:在一个长度为n的数组里的所有数字都在0到n-1的范围内.数组中某些数字是重复的,但不知道有几个数字重复了, // 也不知道每个数字重复了几次.请 ...

  5. angular2版本迭代之特性追踪

    一. 2.0.0 升级到 2.4 升级前: 1.确保没有使用extends关键字实现OnInit的继承,以及没有用任何的生命周期中,而是全部改用implements. 2.停止使用deep impor ...

  6. 雷林鹏分享:Ruby 变量

    Ruby 变量 变量是持有可被任何程序使用的任何数据的存储位置. Ruby 支持五种类型的变量.您已经在前面的章节中大概了解了这些变量,本章节将为您详细讲解这五种类型的变量. Ruby 全局变量 全局 ...

  7. English trip V1 - 1.How Do You Feel Now? Teacher:Lamb Key:形容词(Adjectives)

    In this lesson you will learn to describe people, things, and feelings.在本课中,您将学习如何描述人,事和感受. STARTER  ...

  8. Bug in Code CodeForces - 420C (计数,图论)

    大意: 给定$n$结点无向图, 共n条边, 有重边无自环, 求有多少点对(u,v), 满足经过u和v的边数>=p 可以用双指针先求出所有$deg_u+deg_v \ge p$的点对, 但这样会多 ...

  9. POJ-3635 Full Tank? (记忆化广搜)

    Description After going through the receipts from your car trip through Europe this summer, you real ...

  10. getTransaction().commit(),getDBTransaction().commit(),getOADBTransaction().commit之间的区别

    原文: Transaction is an interface which provides base methods for defining database transactions.DBTra ...