使用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项目并发 ...
随机推荐
- React++antd+ProComponents可编辑表格EditableProTable组件实现表单中的可编辑列表组件
需求: 在新增&编辑表单中,共分三个表单模块,第二个模块设计为一个可编辑表格组件,其中可选下拉列表依赖外层第一个模块的某条数据值,提供新增.编辑.删除.按规定条件去重等功能,并在第三个模块中自 ...
- react封装图片上传组件
支持表单受控和非受控使用,基于antd upload 进行的二次封装, 使用场景如下图: 1.组件文件夹 2. index.tsx贴代码 import React, { useEffect, useM ...
- react-signature-canvas 签名功能
基于移动端需要扫码签名的功能,这里记录一下. 1.使用 react-signature-canvas 插件,npm i react-signature-canvas --save 2.此功能签名后生成 ...
- Python+Django(4）——创建其他网页（模板继承）
模板继承: 1,修改主页 父模板:抽取通用元素,在index.html同级目录下新建base.html <p> <a href="{% url 'learning_logs ...
- python——numpy
NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库. import numpy a = num ...
- C++多线程编程之【线程管理】
1.如何启动线程? 构建std::thread对象即可. 直接传函数名(地址) 创建一个类并创建伪函数. 构建对象(实例化),将对象作为参数传入thread对象实例化. 2.为什么要等待线程? 首先必 ...
- 在为 DataGridView 添加数据列时,弹出 将要添加的列 CellType 属性为空 错误提示与说明
事务:为 DataGridView 添加数据列[也可以说是直接操作 DataGridView 数据列...]... 原由:在为 DataGridView 添加列的时候,[至少这是第三次遇到] 弹出 添 ...
- 实践课：i至诚app案例分析---江洁兰
这个作业属于哪个课程 至诚软工实践F班 这个作业要求在哪里 作业要求 这个作业的目标 分析产品软件,找出其中的问题并进行分析,提高对产品软件bug方面的认识 学号 212106715 第一部分 找Bu ...
- SDC细节归纳
能否写出一份严谨的SDC约束文件,决定了芯片tapeout后数字电路能否正常工作,或者少一些bug.所以写好SDC约束文件,是芯片设计的关键一步. 因此,归纳.整理SDC约束的细节要点很重要,有助于减 ...
- SQLyog中创建的数据库在idea找不到
在里面把需要的数据库