노드 웹킷은 데스크톱 응용 프로그램에 웹 응용 프로그램 패키지에 노드 웹킷 데스크톱 응용 프로그램과 웹 응용 프로그램에 패키지로

노드 웹킷은 데스크톱 응용 프로그램을 웹 응용 프로그램으로 패키지와 함께

노드 웹킷은 우리가 아, 크롬 브라우저와 데스크톱 응용 프로그램에 패키지 Node.js를 웹 애플리케이션뿐만 아니라 크로스 플랫폼을 구축 할 수있는 크롬과 Node.js를의 조합에있다. 노드 웹킷은 여전히 유용하므로, 기존의 데스크톱 HTML5 + CSS3 + JS 웹 애플리케이션 개발을보다 쉽고 효율적으로 특정 지역에서 애플리케이션뿐만 아니라, Node.js를 함수를 사용하여 비교하는 것이 분명하다.

난 여기 (여기에만 Windows 환경) 실행 파일로 패키지 웹 응용 프로그램을 설정하는 방법을 소개하는 간단한 데모입니다

먼저 index.html을 파일을 만들고,이 항목의 데모 페이지로, 우리는 완전한 웹 응용 프로그램 막대로이 페이지를 넣어 보자. 목차 부담 등 뭔가를 쓰기 :

QQ는 20140210135428 스크린 샷

그런 다음 다음과 같이 프로필 package.json을 작성, 읽

QQ는 20140210135428 스크린 샷

직접 데스크톱 응용 프로그램까지로 원격 웹 응용 프로그램의 상당을 넣을 수 있도록 주요 속성 중 하나가 파일 항목을 지정하는 데 사용됩니다,이 속성의 값은 로컬 파일 또는 원격 URL이 될 수 있습니다.

이름과 두 가지 주요 특성뿐만 아니라, 다른 많은 유용한 특성, 구성, 예를 들어, 브라우저 툴바에 표시되지 않은 응용 프로그램 아이콘을 지정, 브라우저 등 특정 구성 매개 변수 문서의 초기 크기를 지정할 수있다 이쪽을 봐 https://github.com/rogerwang/node-webkit/wiki/Manifest-format

 

우리는 이제 두 개의 파일이 있습니다.

QQ는 20140210135428 스크린 샷

 

그런 다음 index.html을하고 우편 압축 가방에 압축이 두 파일 package.json라는 app.zip

QQ는 20140210135428 스크린 샷

 

이제이 압축 된 가방의 내용은 다음과 같이한다 app.zip :

QQ는 20140210135428 스크린 샷

 

그런 다음 파일 확장자 app.zip는 app.nw된다 NW 변경

QQ는 20140210135428 스크린 샷

 

그런 다음 노드 웹킷의 윈도우 버전을 다운로드 폴더를 압축 :

QQ는 20140210135428 스크린 샷

 

之后我们之前得到的app.nw这个文件就可以用nw.exe来执行了,直接把app.nw拖到nw.exe上就可以了。运行结果如下:

QQ는 20140210135428 스크린 샷

跟在chrome中打开index.html这个页面的效果差不多,当然你可以通过配置package.json这个文件,来隐藏浏览器的工具栏或边框,来使它更像是一个桌面软件。

 

因为nw文件的运行需要node-webkit环境的支持,所以我们还需要把app.nw这个文件跟node-webkit的环境文件一起打包成一个可执行文件。

首先打开windows的cmd,然后输入如下命令:

copy /b nw.exe+app.nw app.exe

注意文件路径要根据你的实际情况进行变动,这里假设app.nw放在了node-webkit的主文件夹里,然后输出的app.exe也会在这个文件夹里。

执行命令后我们得到了 app.exe 这个可执行文件。

QQ는 20140210135428 스크린 샷

 

到了这步,我们已经得到了app.exe这个文件,但如果只有app.exe这个文件还是不够的,这个可执行文件的运行还需要几个dll文件的支持。

其中 nw.pak 与 icudt.dll 这个两个文件是必须要的。

ffmpegsumo.dll 文件是媒体支持文件,如果你的html页面中用到了<video>或<audio>或其它与媒体相关的东西,则必须带上这个文件。

libEGL.dll 和 libGLESv2.dll 这个两个文件则是使用webGL或GPU必须要的

 

最后我们得到的就是这样一个文件夹:

QQ는 20140210135428 스크린 샷

执行app.exe就可以运行我们的demo了。

 

但我们大多数人想的是给用户一个exe文件,用户就可以使用了,不用再附带一些其他文件。

嗯,所以我们还可以把app.exe跟其他的文件再打包一次,把上图中的所有文件变成一个可执行文件,用户只要得到这个文件,就能运行我们的应用了。

做这步我们需要一个软件叫Enigma Virtual Box,首先下载和安装这个软件,然后打开它。

然后在Enter Input File Name那里输入我们的app.exe的路径,在Enter Output File Name那里填写我们要把打包出来的可执行文件输出到哪里。最后是把除app.exe外的其它文件拖入到Files那里,遇到提示的话默认就可以了。

QQ는 20140210135428 스크린 샷

 

最后点击右下角的Process按钮,就大功告成了。

QQ는 20140210135428 스크린 샷

 

最后我们得到了一个 app_boxed.exe 的文件,只要把这个文件交给用户,用户就可以运行了。

node-webkit虽然方便,但有个很大的缺点是得到的可执行文件有点大,大家在可以在衡量利弊后决定使不使用。

 
分类:  js

node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦。很显然比起传统的桌面应用,在某些特定领域用html5+css3+js开发的web应用更加简单和高效,而且还可以使用node.js的功能,所以node-webkit还是很有用处的。

下面我通过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件(这里只介绍windows环境)

首先新建一个index.html文件,作为我们这个demo的入口页面,我们暂且就把这个页面当成一个完整的web应用吧。内容随便写点什么,比如:

QQ는 20140210135428 스크린 샷

然后创建配置文件 package.json,内容如下:

QQ는 20140210135428 스크린 샷

其中的main属性就是用来指定入口文件的,这个属性的值可以是本地文件,也可以是远程网址,这样就相当于可以把一个远程的web应用直接变为一个桌面应用了。

除了name与main这两个属性外,还有很多其他有用的属性可以配置,比如指定应用的图标,显不显示浏览器的工具栏,指定浏览器的初始大小等等,具体的配置参数文档可看这里https://github.com/rogerwang/node-webkit/wiki/Manifest-format

 

现在我们有了两个文件了。

QQ는 20140210135428 스크린 샷

 

然后将index.html和package.json这两个文件压缩到一个zip压缩包里,命名为app.zip

QQ는 20140210135428 스크린 샷

 

现在app.zip这个压缩包里的内容应该是这样的:

QQ는 20140210135428 스크린 샷

 

然后把app.zip这个文件的扩展名改为nw,变为 app.nw

QQ는 20140210135428 스크린 샷

 

然后下载一个windows版本的node-webkit,解压后得到一个文件夹:

QQ는 20140210135428 스크린 샷

 

之后我们之前得到的app.nw这个文件就可以用nw.exe来执行了,直接把app.nw拖到nw.exe上就可以了。运行结果如下:

QQ는 20140210135428 스크린 샷

跟在chrome中打开index.html这个页面的效果差不多,当然你可以通过配置package.json这个文件,来隐藏浏览器的工具栏或边框,来使它更像是一个桌面软件。

 

因为nw文件的运行需要node-webkit环境的支持,所以我们还需要把app.nw这个文件跟node-webkit的环境文件一起打包成一个可执行文件。

首先打开windows的cmd,然后输入如下命令:

copy /b nw.exe+app.nw app.exe

注意文件路径要根据你的实际情况进行变动,这里假设app.nw放在了node-webkit的主文件夹里,然后输出的app.exe也会在这个文件夹里。

执行命令后我们得到了 app.exe 这个可执行文件。

QQ는 20140210135428 스크린 샷

 

到了这步,我们已经得到了app.exe这个文件,但如果只有app.exe这个文件还是不够的,这个可执行文件的运行还需要几个dll文件的支持。

其中 nw.pak 与 icudt.dll 这个两个文件是必须要的。

HTML 페이지의 <비디오> 또는 <오디오>에서 사용하거나 관련있는 매체가 다른 것들, 당신은이 문서를 가지고해야하는 경우 ffmpegsumo.dll 파일, 미디어 파일을 지원합니다.

libEGL.dll 및 libGLESv2.dll이 파일은 두 가지를 사용하는 것 또는 WebGL을 GPU는이어야합니다

 

마지막으로 우리가 얻을 이러한 폴더는 다음과 같습니다

QQ는 20140210135428 스크린 샷

App.exe가 실행 데모를 실행할 수 있습니다.

 

그러나 우리가 원하는 대부분의 사용자가 사용할 수있는 사용자에게 EXE 파일을 제공 할 수 없으며, 더 이상 다른 문서의 번호와 함께 제공됩니다.

우리가 App.exe가 실행 파일에 이미지 위에, 다시 한 번 다른 문서에있는 모든 파일을 패키지로 넣을 수 있도록 아, 사용자가이 문서를 얻을 수 있습니다, 우리는 응용 프로그램을 실행할 수 있습니다.

우리는이 단계 불리는 소프트웨어해야 할 수수께끼 가상 상자 , 첫 번째 다운로드 및 소프트웨어를 설치하고 엽니 다.

입력 파일 이름을 입력하고 우리의 App.exe가, 우리가 입력 출력 파일 이름에이 갈 수있는 패키지 실행 파일 출력을 작성하려는 경우 다음 경로를 입력합니다. 마지막으로, 파일 외에 다른 파일을 드래그 후 프롬프트 기본이가 발생 App.exe가.

QQ는 20140210135428 스크린 샷

 

마지막으로, 오른쪽 아래에있는 프로세스 버튼을 클릭하면 완료됩니다.

QQ는 20140210135428 스크린 샷

 

마지막으로, 우리는 한 사용자에게 파일이 사용자가 실행할 수있는, 파일 app_boxed.exe를 얻을.

노드 웹킷은 편리하지만,이 큰 단점은 결과 실행 비트 큰, 그래서 우리는 후 장단점을 무게를 사용하지 않기로 결정할 수 있다는 것입니다.

추천

출처www.cnblogs.com/chargeworld/p/11923199.html