码迷,mamicode.com
首页 > Web开发 > 详细

node-webkit 入门

时间:2017-04-11 13:44:46      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:https   ref   file   box   例子   type   about   分发   文档   

下载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 入门

标签:https   ref   file   box   例子   type   about   分发   文档   

原文地址:http://www.cnblogs.com/Mvloveyouforever/p/6692783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!