使用nw.js打包以后的web项目 发布客户端
一、下载nw.js
直接前往官网下载即可 https://nwjs.io/downloads/
二、封装最简单的客户端
nw.js下载完成后，在任意位置新建文件夹，例如nwtest，然后在文件夹中新建两个文件：index.html和package.json。
index.html文件内容为：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
// 以下方式直接跳转
window.location.href='https://www.xxxx.com/';
</script>
</body>
</html>
package.json文件内容为：
{
"main": "index.html",
"name": "测试客户端"
}
字段解释：
{
/**指定程序的起始页面。*/
"main": "index.html",
/**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
"name": "demo",
/**程序描述*/
"description": "demo app of node-webkit",
/**程序版本号*/
"version": "0.1.0",
/**关键字*/
"keywords": ["demo","node-webkit"],
/**bool值，如果设置为false，将禁用webkit的node支持。*/
"nodejs": true,
/**
* 指定一个node.js文件，当程序启动时，该文件会被运行，启动时间要早于node-webkit加载html的时间。
* 它在node上下文中运行，可以用它来实现类似后台线程的功能。
* （不需要可注释不用）
*/
//"node-main": "js/node.js",
/**
* bool值。默认情况下，如果将node-webkit程序打包发布，那么只能启动一个该应用的实例。
* 如果你希望允许同时启动多个实例，将该值设置为false。
*/
"single-instance": true,
/**窗口属性设置 */
"window": {
/**字符串，设置默认title。*/
"title": "demo",
/**窗口的icon。*/
"icon": "link.png",
/**bool值。是否显示导航栏。*/
"toolbar": false,
/**bool值。是否允许调整窗口大小。*/
"resizable": true,
/**是否全屏*/
"fullscreen": false,
/**是否在win任务栏显示图标*/
"show_in_taskbar": true,
/**bool值。如果设置为false，程序将无边框显示。*/
"frame": true,
/**字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。*/
"position": "center",
/**主窗口的的宽度。*/
"width": 800,
/**主窗口的的高度。*/
"height": 670,
/**窗口的最小宽度。*/
"min_width": 400,
/**窗口的最小高度。*/
"min_height": 335,
/**窗口显示的最大宽度，可不设。*/
"max_width": 800,
/**窗口显示的最大高度，可不设。*/
"max_height": 670,
/**bool值，如果设置为false，启动时窗口不可见。*/
"show": true,
/**是否在任务栏显示图标。*/
"show_in_taskbar":true,
/**
* bool值。是否使用kiosk模式。如果使用kiosk模式，
* 应用程序将全屏显示，并且阻止用户离开应用。
* */
"kiosk": false
},
/**webkit设置*/
"webkit": {
/**bool值，是否加载插件，如flash，默认值为false。*/
"plugin": true,
/**bool值，是否加载Java applets，默认为false。*/
"java": false,
/**bool值，是否启用页面缓存，默认为false。*/
"page-cache": false
}
}
其中链接、name等可根据实际情况修改。
编辑完成后，将nwtest 文件夹整体拖动到nw.js文件夹中的nw.exe上，即可看到客户端打开的效果。
测试完成后，将nwtest下的文件压缩成一个zip，例如nwtest.zip，再修改后缀名nw，改成nwtext.nw，复制到nw.js文件夹下，然后在nw.js文件夹执行命令行：
copy /b nw.exe+nwtest.nw test.exe
即可在同一个路径下得到一个test.exe，就是我们最终得到的客户端文件，一个最简易的封装工作就完成了。
三、修改图标
客户端封装完成后，一个最常见的需求便是修改客户端的图标，我们只需将图标文件（png格式）加到nwtest文件夹下，然后修改package.json文件，在icon字段配置图标文件名，再重新打包即可：
{
"main": "index.html",
"name": "智能工作台",
"description": "智能工作台",
"window":{
"title": "智能工作台",
"icon":"main_tab_info_pressed.png"
}
}
值得一提的是，这个配置只能修改客户端打开时标题栏和电脑任务栏中显示的icon，exe文件本身的图标修改还要借助resource Hacker之类工具。具体方法可参考：https://jingyan.baidu.com/article/e75057f203892febc91a8916.html。
http://events.jianshu.io/p/203b30c0847b
NW.js和Electron优缺点综合对比：https://blog.csdn.net/LIangell/article/details/122055029
使用nw.js打包以后的web项目 发布客户端的更多相关文章
- NW js 打包入门教程
NW js 打包入门教程 NW.JS的安装与打包_u013288292的博客-CSDN博客_nwjs打包
- Java Web项目发布及使用自定义域名
详细讲解的网址: http://wenku.baidu.com/link?url=-ACZxKUcfrbhrMRUP3Ov-Q_c-Q9JPrA9D1fzHjHuJsWwZfRsVDVQ2qBtoY7 ...
- Django+Vue.js框架快速搭建web项目
一.vue环境搭建1.下载安装node.js.2.安装淘宝镜像cnpm,在命令窗口输入: npm install -g cnpm --registry=https://registry.npm.tao ...
- 体验NW.js打包一个桌面应用
1.安装nw,(也可在官网下载然后配置变量) npm install nw -g 一个最最简单的nw应用,只需要有index.html和package.json文件即可 2.项目准备,目录结构 app ...
- 使用cmd命令创建maven(web)项目+项目转换成IDEA项目+项目打包+Jetty运行Web项目
3条件:配置好环境 配置环境教程:https://www.cnblogs.com/weibanggang/p/9623705.html 第一步:查看版本信息,在cmd输入mvn –version,如果 ...
- 【转】MyEclipse开发Web项目发布到Tomcat下的Root目录
通常情况下,Web项目是发布到Tomcat下的webapps文件目录下的 .以至于我们访问的时候: 例如:Web应用项目名称为:webManager,则部署到tomcat后,是部署在tomcat/we ...
- MyEclipse 开发 Web项目发布到 Tomcat 下的Root 目录
通常情况下,Web项目是发布到Tomcat下的webapps文件目录下的 . 例如:Web应用项目名称为:stock,则部署到tomcat后,是部署在tomcat/webapps/stock中,网址为 ...
- MyEclipse开发Web项目发布到Tomcat下的Root目录
通常情况下,Web项目是发布到Tomcat下的webapps文件目录下的 .以至于我们访问的时候: 例如:Web应用项目名称为:webManager,则部署到tomcat后,是部署在tomcat/we ...
- 全网最详细的IDEA、Eclipse和MyEclipse之间于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】（图文详解）
不多说,直接上干货! IDEA [适合公司业务]全网最详细的IDEA里如何正确新建[普通或者Maven]的Java web项目并发布到Tomcat上运行成功[博主强烈推荐](类似eclipse里同一个 ...
- 全网最详细的Eclipse和MyEclipse里对于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】（图文详解）
不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 全网最详细的MyEclipse里如何正确新建普通的Java web项目并发 ...
随机推荐
- 打包python文件为exe程序 vscode
一.项目下虚拟环境下载pyinstaller.exe 打包 1.检查是否下载 pyinstaller: 如果没有在vscode终端输入:pip3 install pyinstaller 安装成功后下 ...
- Xcode常用&开发常用
p.p1 { margin: 0; font: 12px "Helvetica Neue" } p.p2 { margin: 0; font: 12px "Helveti ...
- win7下MongoDB安装配置
之前看windows下安装MongoDB操作很是简单,今天在自己笔记本上安装一次,各种小问题.参照网上各大神帖子,再记录下个简单流程以便以后记得. 1.MongoDB官网上下载安装包 2.运行安装包, ...
- php后端遇到的问题
1.用文件记录日志,会有并发问题
- P77 3.12
#P77 3.12 #一年365天,初始水平值为1.0,每工作一天水平增加N, #不工作时水平不下降,一周连续工作4天,请编写程序运算 #结果并填写表格 n = 1.0 for j in range ...
- IDEA中maven项目右侧maven图标不见了
右侧maven图标没有了 解决方法:双击shift(或者点击help-->Find Action) 打开搜索功能 ---> 搜素Maven Project--->选择Add Mave ...
- linux查看所有的用户和组信息
1.cat /etc/passwd 查看所有用户 2.cat /etc/passwd|grep 用户名,用于查找某个用户 3.cat /etc/group查看所有组信息 4.cat /etc/g ...
- 龙中华著《Spring Boot实战派》读书笔记之基础篇
第四章 Spring Boot 基础 4.1 了解Spring Boot 项目结构 src/main/java //入口类,等 src/main/resources //静态文件和配置文件 src/t ...
- Linux系列(8)-添加用户并设置密码
#添加用户[root@iZm5ehnt0e8indgne1hibuZ ~]# useradd -m linsiyu #设置用户密码[root@iZm5ehnt0e8indgne1hibuZ ~]# p ...
- TiSpark 初级应用
目前正在使用tispark 进行离线计算,简单记录一下操作过程 一.技术验证 场景:计算每次充电过程中单体最高电压的变化速率 解决方案: 使用tispark 直接访问tidb的数据,采用sp ...