用node-webkit(NW.js)创建桌面程序

以往写windows桌面程序需要用MFC、C#之类的技术,那么如果你只会web开发技术呢?或者说你有一个网站,但是你想把你的网站打包成一个桌面应用程序,该如何做呢?

答案就是用node-webkit这个开源框架,他封装了webkit内核和node.js,让你可以用web技术来开发windows/linux/OSX程序等。指的一提的是目前node-webkit已经改名为NW.js,下面是在github上的此框架站点:

https://github.com/nwjs/nw.js

 

本文讲述了如何使用该工具打包成windows桌面程序的一个简单例子,同时给出了如何降低打包出来的程序的size的一个方式(用node-webkit打包出来的桌面程序size通常会比较大),更多的技术细节请参考上述站点。

 

需求


首先我们的需求很简单,做一个windows桌面程序(exe),里面载入百度的首页,用户可以就像用浏览器一样使用。以此类推,由于是封装了webkit,当然你便可以使用web技术开发一个windows桌面软件。

 

下载和安装node-webkit


进入官网后(http://nwjs.io/),点击下载,我这里使用的是win8.1的64位计算机,即下载win64版本

 

下载出来后解压,文件夹中即为Node-webkit的主文件夹:

 

这里的nw.exe即该框架原先提供的一个已经封装了webkit等的exe,这个是你构建自己的exe的基础,你自己创建的web程序其实都是需要这个东西来运行,因为它提供了runtime环境。

 

修改icon


这里有一点需要提的是,默认情况下你创建出来的你的应用程序(exe)会和nw.exe的图标一样,当然这个不是你所想要的。所以你可以通过resource hacker这个工具来修改nw.exe的图标成你所想要的,比如可以参考:

http://keenwon.com/1311.html

 

撰写WEB应用


到这里我们就可以开始撰写web应用了,因为本例子很简单就是打开一个网址,所以应用的目录大致如下:

我们主要来看package.json这个配置文件,这个是每个用node-webkit进行打包时候必须要的一个配置文件,内容大致如下:

{// "main": "index.html","main":"http://www.baidu.com/","name": "baidu","window": {"title": "baidu","icon": "assest/img/logo.png","toolbar": true,"width": 1280,"height": 800,"min_width": 400,"min_height": 200},"webkit": {"plugin": true,"java": false,"page-cache": false}
}

由于我们仅仅是打开一个网页,所以main这个参数里面的值并不是index.html,而直接写上一个网址就好

window.icon这个参数可以配置这个exe在windows的底部任务栏上的图标

toolbar最好设置为true,这样子你的应用程序上面会有类似于浏览器的工具栏,如果你的程序类似于一个音乐播放器之类的东西,那么你可能需要设置为false

关键package.json的语法请参考:

https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields

 

打包


下面我们可以开始打包了。

首先将你的所有的应用程序全选,添加压缩文件后并改名为app.nw(名字无所谓,但是扩展名一定要修改为nw),要确保package.json在根目录。即你打开压缩后的zip应该是这样的

 

随后,将你的app.nw拷贝到node-webkit的和nw.exe同一目录,进入windows cmd后运行这个命令:

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

 

这个时候你发现生成了app.exe,这个时候即成功将你的web应用打包成了一位windows桌面程序,直接双击它即可运行:

 

是不是看起来像是一个浏览器?其实他真的就是一个浏览器,因为他封装了webkit!

 

发布


这个时候你希望把exe发布出去,但是要注意的是你不能独立的运行这个app.exe,因为它需要依赖一些dll,官网上推荐用Enigma Virtual Box这个软件来将app.exe和依赖的dll打包成一个exe后发布,但是这里有个严重问题,那就是这个最后生成的yourapp.exe的size太大,至少70MB以上!

原因很简单,这个是因为app.exe本身就很大,已经有几十mb,而他其实也是基于我们刚解压出来node-webkit后那个nw.exe而生成的,而那个nw.exe本身已经50+mb了,所以我们的app.exe能小的起来吗?

 

这里推荐另一个打包方式,就是用Inno Setup来打包成安装程序,即将你的一开始的web应用源文件和node-webkit的nw.exe和一些以来dll直接压缩成一个安装文件,我们并不需要上述中间那先打包成app.exe的步骤。用户在使用你的exe后会出现setup wizard把程序安装到Program Files目录中,其实等于解压缩了,将nw.exe和dll还有你的web应用释放出来,这个时候所生成的安装文件其实size会小很多。

 

我们通过这个站点来下载Inno Setup工具

http://www.jrsoftware.org/isdl.php

 

下载安装运行后点击File->New即进入傻瓜式的创建步骤

 

下一步,填写你的发布应用的公司信息

 

继续下一步直到走到Application Files,这一步是添加你的应用程序的打包文件:

 

上面的“Application main executable file”指向node-webkit的nw.exe,下面的Other application files,通过add file(s)来添加nw.pak和dll依赖文件,通过add folder来添加你的web应用文件

继续点击下一步,后面还可以选择用户安装的时候可以选择的语言:(默认是没有中文的,中文包请在这里下载http://www.jrsoftware.org/files/istrans/)

 

下一步,可以还可以选择分发的exe的icon

 

继续后面的操作的,即可生成一个只有20多mb的setup.exe安装文件了,以供分发

 

转载于:https://www.cnblogs.com/soaringEveryday/p/4950088.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/256462.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一头扎进Node系列 - 目录

前言 本系列是属于初级教程。博主我也还只是一个node的新兵蛋子,想通过学习官网的API文档,慢慢的打好Node基础。当然后期这系列文档会慢慢完善,并且会添加一些项目实战中遇到的一些问题以及解决方案!如果你也是初学者,…

ANSYS——“There is at least 1 small equation solver pivot term”问题的解决办法

目录 问题出现的原因 问题解决办法 1、根据提示对节点进行约束的添加

JAVA中几个常用的方法

类Object是类层次结构的根类&#xff0c;每一个类都使用Object作为超类&#xff0c;所有对象&#xff08;包括数组&#xff09;都实现这个类的方法。jdk1.5中&#xff0c;描述了该类中的11个方法 1.getClass public final Class<? extends Object> getClass() 返回一个对…

ANSYS——载荷的方向

目录 一、压力的方向(FORCE) 1、为正的情况 2、为负的情况 二、压强的方向(PRESSURE)

kindeditor用法简单介绍(转)

1&#xff0c;首先去官网下载http://www.kindsoft.net/ 2&#xff0c;解压之后如图所示&#xff1a; 由于本人做的是用的是JSP&#xff0c;所以ASP,PHP什么的就用不上了&#xff0c;直接把那些去掉然后将整个文件夹扔进Myeclipse&#xff0c;如图&#xff1a; 里面有个报错&am…

hadoop 分片与分块,map task和reduce task的理解

分块&#xff1a;Block HDFS存储系统中&#xff0c;引入了文件系统的分块概念&#xff08;block&#xff09;&#xff0c;块是存储的最小单位&#xff0c;HDFS定义其大小为64MB。与单磁盘文件系统相似&#xff0c;存储在 HDFS上的文件均存储为多个块&#xff0c;不同的是&#…

SOLIDWORKS——参数化建模

https://www.sohu.com/a/259742200_100042821 知识点&#xff1a;投影曲线、曲面填充、扫描、外观设置 建模步骤 1.先在工具——方程式里输入一个直径的变量A120 。 2.在前视基准面上草绘圆&#xff0c;画一条直径。直径等于变量A。 3.旋转&#xff0c;选择粉色区域。 4.上视…

Arch 常用工具

一、网络浏览pacman -S firefox firefox-i18n注&#xff1a;该命令中的前者为 Firefox 主程序,后者为语言包。pacman -S opera二、图像编辑pacman -S gimp #图像编辑软件首选 GIMPpacman -S inkscape #矢量图形编辑软件Inkscapepacman -S scrot #…

Androd安全——反编译技术完全解析

0&#xff0e;前言单纯从技术角度上来讲&#xff0c;掌握反编译功能确实是一项非常有用的技能。另外既然别人可以反编译程序&#xff0c;我们当然有理由应该对程序进行一定的保护&#xff0c;因此代码混淆也是我们必须要掌握的一项技术。看完此篇如果对代码混淆也感兴趣&#x…

python——shape 与reshape

转载自:https://blog.csdn.net/u010916338/article/details/84066369 shape()和reshape()都是数组array中的方法 numpy中reshape函数的三种常见相关用法 numpy.arange(n).reshape(a, b) 依次生成n个自然数&#xff0c;并且以a行b列的数组形式显示np.arange(16).reshape(2,…

误删了microsoft visual c++后如何正常运行matlab

误删了microsoft visual c后如何正常运行matlab 本人在卸载visual studio2013的时候&#xff0c;因为这个软件卸载的过程中出现一些问题&#xff0c;误将visual c当成VS的组件一同删除了。但是在打开matlab 时发现出错&#xff0c;matlab打开后会出现下面的界面。 出现这个问题…

iScreenLocker 3.1.8 安卓锁屏通知--苹果一样的体验

*软件介绍:苹果锁屏通知(iScreenLocker)是一款android上ios风格的锁屏软件。它颠覆安智通知设计&#xff0c;将原来状态栏的通知搬到锁屏界面上来&#xff0c;能够在桌面轻松收发短信,微博,微信等消息。它独有的消息唤醒功能。能使手机从待机界面唤醒而消耗非常少的电量。手指轻…

JSP慕课网阶段用户登录小例子(不用数据库)

getAttribute和setAttribute一起使用&#xff0c;而getParameter用于取得如request传来的参数。 Web是请求/响应架构的使用&#xff0c;而request和response就是在服务器端生成的相应的两个对象&#xff0c;request能够获取客户端传递的参数及相关的一些信息&#xff0c;而resp…

机器学习python——python基础

目录 1、常用库 2、shape与reshape&#xff0c;dtype 3、range、arange、linspace、logspace 4、数组的计算、切片 5、绘图基本设置 6.三维绘图 1、常用库 numpy、scipy、matplotlib、math 2、shape与reshape&#xff0c;dtype https://blog.csdn.net/qq_45769063/arti…

win10环境下如何给visual studio 2013永久配置opencv3.1.0环境

win10环境下如何给visual studio 2013永久配置opencv3.1.0环境 本人在给visual studio 2013配置opencv 环境下遇到过一些问题&#xff0c;比如配置不成功或者不能永久配置opencv环境。先将自己的配置经验分享于此&#xff0c;希望同道中的好友可以用上。 首先自行下载Visual s…

属性名、变量名与 内部关键字 重名 加

procedure TForm4.btn3Click(Sender: TObject); varMyQj: TQJson;MyPrinter: TPrinter; beginMyQj : TQJson.Create;tryMyPrinter.name : A号打印机;MyPrinter.status : enabled;MyPrinter.&type : yes;MyQj.FromRecord<TPrinter>(MyPrinter);Memo1.Lines.Add(MyQj.A…

机器学习——支持向量机SVM之线性模型

目录 一、没有免费的午餐定理 二、支持向量机SVM&#xff08;support vector machine&#xff09; 1、线性模型和非线性模型 2、如何在线性模型中画出一条直线&#xff08;优化过程——vplink&#xff09; 1&#xff09;多少条&#xff1f; 2&#xff09;如何画出最好的直…

Oauth2.0和1.0区别

1.0的授权分3步, A)客户端到授权服务器请求一个授权令牌(request token&secret) B)引导用户到授权服务器请求授权 C)用访问令牌到授权服务器换取访问令牌(access token&secret) D)用访问令牌去访问得到授权的资源 2.0的用户授权过程有2步&#xff0c; A)引导用户到授权…

选导师,定方向

选导师&#xff0c;定方向。 看文献看到9.40&#xff0c;实在是看不下去&#xff0c;索性写一些自己这近两年来的研究生生涯的一些感悟&#xff0c;希望对还在迷茫中的你们有一点点的启示&#xff08;如果谈不上启示&#xff0c;那就当给你们一点安慰&#xff09;。 ** 选导师…

在apache中设置访问目录后进入的默认页面为index.php

找到apache的配置文件httpd.conf后找到 DirectoryIndex index.html index.php 在其中添加index.php, 转载于:https://www.cnblogs.com/itdi/p/5844517.html