首页 > 其他分享 >使用nw.js打包以后的web项目 发布客户端

使用nw.js打包以后的web项目 发布客户端

时间:2022-11-06 12:13:03浏览次数:75  
标签:node web false js bool 客户端 nw

一、下载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

标签:node,web,false,js,bool,客户端,nw
From: https://www.cnblogs.com/qwer123dsada/p/16862353.html

相关文章

  • js 数据类型 Symbol
    唯一的标识符有两种原始类型可以作为对象的键(key):1、字符串,2、Symbol()。用法:Symbol('描述')创建Symbol类型值Symbol.description获取Symbol描述letid=Symbo......
  • webpack教程
    参考:https://blog.csdn.net/qq_43682422/article/details/124054740官网:https://webpack.js.org/1简介在webpack官网有个图片,形象的展示了webpack的作用  webpac......
  • 复习 - node.js(接口案例)
    其实复习一次的作用真实太大了,真的,自从上次ajax开始其实就开始i有点懵懵懂懂的感觉,一直拖想到了node在去回顾一遍,这一次回去复习,ajax已经很熟练了,node之前搞不懂那些原理也......
  • SQL Server – Work with JSON
    前言JSON是一个很好的格式,array,object就能表达一个表格了.如果想保存一些结构格式,又不想用表格这么大费周章的话,JSON会是很好选择.比如我用它来记入AuditT......
  • EF Core – JSON Column
    前言SQLServer支持JSON,以前写过一篇介绍 SQLServer–WorkwithJSON.但EFCore一直没有支持.直到EFCore7.0才支持. 参考Docs–JSONColumns 配......
  • EFCore使用JSON_VALUE查询json对象的值
    IntroSqlServer从2016开始支持JSON操作,可以使用JSON_VALUE查询JSON对象的某个属性值,更多介绍,现在公司的一些项目主要是使用EFCore,手写sql较少,针对比较简单的......
  • JS中JSON.parse()方法解析失败的问题
    今天在安卓开发(安卓内嵌cordova,页面采用js+html编写)的过程中,出现了一个问题:      result=JSON.parse(result); 该方法抛出异常:JSON解析失败。在对......
  • etherjs调用合约过程
    前言:调用合约成功,虽然是一小步,但总算有进展了,慢慢往前。  //library是providerconst{account,library,active}=useWeb3React();//取消挂单asyncfun......
  • 兼容ie8的Html+Css+Js
    1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="UTF-8">6<metahttp-equiv="X-UA-Compatible"content="IE=edge">7<meta......
  • webpack : 无法加载文件 C:\Users\13573\AppData\Roaming\npm\webpack.ps1,因为
    问题:C:\Users\XXX\AppData\Roaming\npm\webpack.ps1因为在此系统上禁止运行脚本管理员输入  set-ExecutionPolicyRemoteSigned  回车输入A或者Y即可解决 ......