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

使用,nw,js,打包,以后,web,项目,发布,客户端 · 浏览次数 : 306

小编点评

**步骤一:下载并安装 NW.js** 1. 从 NW.js 网站(https://nwjs.io/downloads/)中下载最新版本。 2. 将下载的 NW.js 文件安装到任何你想要使用 NW.js 创建客户端的目录中。 **步骤二:创建一个新文件并配置 NW.js** 1. 新建一个文件夹并命名为 `nwtest`。 2. 在 `nwtest` 文件夹中创建一个文件名为 `index.html`。 3. 将以下内容在 `index.html` 中编辑: ```html ``` **步骤三:修改 `package.json` 文件** 1. 在 `package.json` 文件中添加以下代码: ```json { "main": "index.html", "name": "测试客户端", "description": "demo app of node-webkit", "version": "0.1.0", "keywords": [ "demo", "node-webkit" ], "nodejs": true, "single-instance": true, "window": { "title": "demo", "icon": "main_tab_info_pressed.png" } } ``` **步骤四:修改图标** 1. 在 `nwtest` 文件夹中创建一个 `main_tab_info_pressed.png` 文件。 2. 修改 `package.json` 文件的 `icon` 属性值: ```json { ... "icon": "main_tab_info_pressed.png" } ``` **步骤五:重新打包并运行客户端** 1. 在 `nwtest` 文件夹中执行以下命令: ``` npm install node index.js ``` **步骤六:运行客户端** 1. 将 `nwtest.zip` 压缩为 `nwtext.nw`。 2. 在 `nw.js` 文件中执行以下命令: ``` copy /b nw.exe+nwtext.nw test.exe ``` **注意:** * `main_tab_info_pressed.png` 应该位于与 `nwtest.nw` 文件相同的目录中。 * `node-webkit` 必须已安装。 * 你可以根据需要修改 `index.html` 和 `package.json` 中的代码。

正文

一、下载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打包以后的web项目 发布客户端

一、下载nw.js 直接前往官网下载即可 https://nwjs.io/downloads/ 二、封装最简单的客户端 nw.js下载完成后,在任意位置新建文件夹,例如nwtest,然后在文件夹中新建两个文件:index.html和package.json。 index.html文件内容为:

使用EF 连接 数据库 SQLserver、MySql 实现 CodeFirst

1.新建项目,下载Nuget安装包 创建项目需要注意几点,如果是基于 .net framework 的项目 需要选择 相应版本的 EF, 如果是跨平台则选择EF Core版本。 我这里选择的是 .net framework 版本。红框里面是 实现EF Code First 需要的包。 对应的版本:

使用explain优化慢查询的业务场景分析

问:你最害怕的事情是什么? 答:搓澡 问:为什么? 答:因为有些人一旦错过,就不在了 Explain 这个词在不同的上下文中有不同的含义。在数据库查询优化的上下文中,"EXPLAIN" 是一个常用的 SQL 命令,用于显示 SQL 查询的执行计划。执行计划是数据库如何执行查询的一个详细描述,包括它将

使用Github Action来辅助项目管理

Github action 是一个Github官方提供的非常流行且速度集成 持续集成和持续交付(CI/CD)的工具。它允许你在GitHub仓库中自动化、定制和执行你的软件开发工作流。你可以发现、创建和分享用于执行任何你想要的工作的操作,包括CI/CD,并在完全定制的工作流中组合操作。 持续集成需要做

使用 GPU 进行 Lightmap 烘焙 - 简单 demo

作者:i_dovelemon 日期:2024-06-16 主题:Lightmap, PathTracer, Compute Shader 引言 一直以来,我都对离线 bake lightmap 操作很着迷。一方面,这个方案历久弥新,虽然很古老,但是一直在实际项目中都有使用;另一方面,它能够产生非常高

使用 Spring 实现控制反转和依赖注入

使用 Spring 实现控制反转和依赖注入 概述 在本文中,我们将介绍IoC(控制反转)和DI(依赖注入)的概念,以及如何在Spring框架中实现它们。 什么是控制反转? 控制反转是软件工程中的一个原则,它将对象或程序的某些部分的控制权转移给容器或框架。我们最常在面向对象编程的上下文中使用它。 与传

使用Kubesec检查YAML文件安全

使用Kubesec检查YAML文件安全,YAML文件是Kubernetes配置的主要载体,因此,检查YAML文件的安全性对于确保Kubernetes集群的安全至关重要,Kubesec简介,使用Kubesec检查YAML文件安全,kubesec scan podyamlsafe.yaml

使用Microsoft.SemanticKernel基于本地运行的Ollama大语言模型实现Agent调用函数

大语言模型的发展日新月异,记得在去年这个时候,函数调用还是gpt-4的专属。到今年本地运行的大模型无论是推理能力还是文本的输出质量都已经非常接近gpt-4了。而在去年gpt-4尚未发布函数调用时,智能体框架的开发者们依赖构建精巧的提示词实现了gpt-3.5的函数调用。目前在本机运行的大模型,基于这一

使用 TensorRT C++ API 调用GPU加速部署 YOLOv10 实现 500FPS 推理速度——快到飞起!!

NVIDIA ® TensorRT ™ 是一款用于高性能深度学习推理的 SDK,包含深度学习推理优化器和运行时,可为推理应用程序提供低延迟和高吞吐量。YOLOv10是清华大学研究人员近期提出的一种实时目标检测方法,通过消除NMS、优化模型架构和引入创新模块等策略,在保持高精度的同时显著降低了计算开销...

Flutter 借助SearchDelegate实现搜索页面,实现搜索建议、搜索结果,解决IOS拼音问题

使用Flutter自带的SearchDelegate组件实现搜索界面,通过魔改实现如下效果:搜素建议、搜索结果,支持刷新和加载更多,解决IOS中文输入拼音问题。