使用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项目并发 ...
随机推荐
- Linux python后台任务
Ubuntu 后台持续运行python服务 一般使用 nohup python -u app.py>t.log 2>&1 & nohup python3 -u app.py ...
- GitLab版本定版
定版指令: git add -Agit commit -m ""git push origin develops:V5.2
- Day12-面向对象初识
面向对象编程 Java的核心思想就是OOP 一.面向过程&面向对象 面向过程思想: 步骤清晰简单,第一步做什么,第二步做什么...... 面对过程适合处理一些较为简单的问题 面向对象思想: 物 ...
- mysql之数据表基本操作-第四篇
在关系型数据库中,数据表是一系列二维数组的集合,用来存储数据和操作数据的逻辑结构. 1.创建表,以创建一个简单的员工表为例: create table employee ( empId INT(11) ...
- go两种数据类型的区别、数据类型和操作符、常量、变量声明
值类型和引用类型 1.值类型:变量直接存储值,内存通常在栈中分配. 基本数据类型int.float.bool.string以及数组和struct. 2.引用类型:变量存储的是一个地址,这个地址存储最终 ...
- 说一说webpack的配置文件
可能有一些友友会奇怪为什么在写webpack的配置文件的时候,我们只能用commonJS导出. 原因:在打包的时候需要运行webpack的配置文件里面的代码,而webpack在打包运行的环境在node ...
- Jquery ajax参数设置(转)
参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 ...
- Docker 环境规划 (Docker安装)
一.环境规划 支持Java.dotNet.Vue项目构建 二.切换系统镜像源 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.rep ...
- Pytorch slp singleLayerPerceptron 单层感知机
单层感知机 \[\begin{aligned} & y = XW + b \\ & y = \sum x_i*w_i+b\\ \end{aligned} \] Derivative \ ...
- 使用 Transformers 在你自己的数据集上训练文本分类模型
最近实在是有点忙,没啥时间写博客了.趁着周末水一文,把最近用 huggingface transformers 训练文本分类模型时遇到的一个小问题说下. 背景 之前只闻 transformers 超厉 ...