使用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文件内容为:

使用Cloudflare Worker加速docker镜像

前言 开发者越来越难了,现在国内的docker镜像也都️了,没有镜像要使用docker太难了,代理又很慢 现在就只剩下自建镜像的办法了 GitHub上有开源项目可以快速搭建自己的镜像库,不过还是有点麻烦,还好Cloudflare暂时还活着‍ 本文记录一下使用 Cloudf

使用C#/.NET解析Wiki百科数据实现获取历史上的今天

创建一个webapi项目做测试使用。 创建新控制器,搭建一个基础框架,包括获取当天日期、wiki的请求地址等 创建一个Http请求帮助类以及方法,用于获取指定URL的信息 使用http请求访问指定url,先运行一下,看看返回的内容。内容如图右边所示,实际上是一个Json数据。我们主要解析 大事记 部

Pybind11和CMake构建python扩展模块环境搭建

使用pybind11的CMake模板来创建拓展环境搭建 从Github上下载cmake_example的模板,切换分支,并升级pybind11子模块到最新版本 拉取pybind11使用cmake构建工具的模板仓库 git clone --recursive https://github.com/mr

说说RabbitMQ延迟队列实现原理?

使用 RabbitMQ 和 RocketMQ 的人是幸运的,因为这两个 MQ 自身提供了延迟队列的实现,不像用 Kafka 的同学那么苦逼,还要自己实现延迟队列。当然,这都是题外话,今天咱们重点来聊聊 RabbitMQ 延迟队列的实现原理,以及 RabbitMQ 实现延迟队列的优缺点有哪些? 很多人

使用FModel提取游戏资产

目录前言FModel简介FModel安装FModel使用初次使用资产预览资产导出附录dumperDumper-7生成usmap文件向游戏中注入dll 前言 这篇文章仅记录我作为初学者使用FModel工具提取某款游戏模型的过程。 FModel简介 FModel是一个开源软件,可以用于查看和提取UE4-

使用GSAP制作动画视频

GSAP 3Blue1Brown给我留下了深刻印象。利用动画制作视频,内容简洁,演示清晰。前两天刚好碰到一件事,我就顺便学习了一下怎么用代码做动画。 以javascrip为例,有两个动画引擎,GSAP和Animajs。由于网速的原因,询问了GPT后,我选择了GSAP来制作我的第一个动画视频。 制作动

使用ML.NET训练一个属于自己的图像分类模型,对图像进行分类就这么简单!

前言 今天大姚给大家分享一个.NET开源、免费、跨平台(支持Windows、Linux、macOS多个操作系统)的机器学习框架:ML.NET。并且本文将会带你快速使用ML.NET训练一个属于自己的图像分类模型,对图像进行分类。 ML.NET框架介绍 ML.NET 允许开发人员在其 .NET 应用程序

使用libzip压缩文件和文件夹

简单说说自己遇到的坑: 分清楚三个组件:zlib、minizip和libzip。zlib是底层和最基础的C库,用于使用Deflate算法压缩和解压缩文件流或者单个文件,但是如果要压缩文件夹就很麻烦,主要是不知道如何归档,在zip内部形成对应的目录。这时就需要用更高级别的库,也就是minizip或li

使用gzexe加密shell脚本

使用 gzexe 加密 shell 脚本是一个相对简单的过程。以下是具体的步骤: 编写你的 shell 脚本:首先,你需要有一个 shell 脚本文件,比如 myscript.sh。 确保脚本可执行:使用 chmod 命令确保你的脚本文件是可执行的: chmod +x myscript.sh 使用