使用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项目并发 ...
随机推荐
- mysql之数据表基本操作-第四篇
在关系型数据库中,数据表是一系列二维数组的集合,用来存储数据和操作数据的逻辑结构. 1.创建表,以创建一个简单的员工表为例: create table employee ( empId INT(11) ...
- SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated
错误提示: SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in ...
- openSUSE 15.4 安装 Deepin Wine QQ
1. 准备: deepin-wine5 deepin-wine-qq deepin-wine-helper 这三个包我是在openSUSE网站上搜索到的,https://software.opensu ...
- Date 对象 定时器
日期对象 Date 概述:date是表示日期时间的对象,主要的方法是获取时间和设置日期时间. date声明 使用new Date声明 有4种方式 1.不设参数 是获取当前的本地时间 var date ...
- 后台http请求
HttpResponse response = HttpContext.Current.Response; response.Buffer = true; response.Clear(); resp ...
- vite+vue3使用unplugin-auto-import 无需手动引入api！
近期了解到unplugin-auto-import这个插件 用途是无需每个组件内重复的引入vue vue-router等内置方法 下面举个例子 <script setup> import ...
- 正向代理和反向代理和spring的动态代理模式有几种?默认是那种?如何切换?
spring的动态代理模式有几种?默认是那种?如何切换? spring的动态的代理模式有两种 JDK动态代理,基于接口(默认代理模式),CGLIB动态代理(若要使用需要进行配置) JDK动态代理是由j ...
- 精通Spring 4.x 企业应用开发实战- 1.6 新特性
- Mxgraph
1. Hello World! Creating an HTML page that links the mxGraph client JavaScript, Creating a container ...
- [Cisco][GNS3]Install IOU device in GNS3
1. 下載並安裝GNS3 下載位置 https://gns3.com/software 安裝 gns3-all-in-one 部屬GNS3 VM至virtualbox 下載並安裝VIX API htt ...