利用nw.js将html项目打包成桌面应用

最新推荐文章于 2024-03-17 09:47:16 发布

椒盐大肥猫

最新推荐文章于 2024-03-17 09:47:16 发布

阅读量1.4k

点赞数

分类专栏： nw 文章标签：前端

本文链接：https://blog.csdn.net/qq_42832446/article/details/106237812

版权

nw 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

优点
不需要学习桌面应用开发的语言，只需要掌握web端开发和相关打包技术的技术即可
缺点
nw相关的插件体积过大，导致生成的桌面应用体积过大（可运行的demo体积到达290m左右）

实现步骤：

开发的程序（和web端开发一样）
下载nw的sdk（作用是将html项目当做桌面应用运行）
下载nsi脚本执行工具（该工具最终将项目打包成桌面应用）
编辑打包配置，模板配置文件下载（稍后讲述打包过程需要自主添加配置）
将项目和nw打包成一个可执行文件
利用nsi脚本工具执行配置文件即可完成打包，点击安装打包完成的exe文件即可完成安装

步骤一：开发程序（需要加入一个项目配置文件）

（1）可以创建一个简单的登录页面进行测试（和普通html项目一样可以引入插件）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>可乐加冰</title>
    <link rel="stylesheet" href="js/layui-v2.5.4/layui/css/layui.css">
    <style>略</style>
  </head>

  <body>
    <div class="login-form">
      <div class="layui-form-item margin-right-50">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户名"
                 autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item margin-right-50">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-block">
          <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                 autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="action-btn content-center">
        <button type="button" class="layui-btn" style="width: 120px">登录</button>
      </div>
    </div>
    <!--<a href="http://www.layui.com" class="layui-btn layui-btn-normal">一个可跳转的按钮</a>-->
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="js/layui-v2.5.4/layui/layui.all.js"></script>
  </body>

</html>

（2）加入项目配置文件
在这里插入图片描述

步骤二：下载nw的sdk

在这里插入图片描述
nw的sdk下载后解压即可,解压后大致如下图所示（待用）

接下来讲述一下本地开发时候，普通html项目如何利用nw以桌面应用形式显示：

将刚刚开发的登录页面项目重命名为app.nw
将app.nw文件夹复制到nw解压的sdk包中，将项目拖到nw.exe文件即可执行，操作如下图所示：

执行后效果如下图：

提示：在类似idea这样的编辑器，也可以配置nw来运行html项目（类似配置Tomcat一样），配置后，不需要上述拖拽项目运行那么麻烦，编辑器配置nw自行百度

步骤三：下载nsi脚本执行工具

在这里插入图片描述
下载后，按默认安装即可

步骤四：下载并编辑打包配置文件

下载配置文件后，用编辑器工具将workplus-setup文件里面的workplus全部换成app并保存，workplus-setup文件里面替换的名称要与打包后的文件夹名字一致，如下图所示：
然后将workplus-setup重命名为app-setup

步骤五：将项目和nw打包成一个可执行文件

将登陆页面项目重命名为package.nw的文件夹（package.nw为nw默认检测的文件夹），并且将文件夹放到sdk解压文件夹里面，和nw.exe文件同级目录即可，如下图所示：
在nw.exe目录下打开cmd指令框，并输入指令：copy /b nw.exe app.exe，即可生成一个app.exe文件（可以理解为复制）

步骤六：利用nsi脚本工具执行配置文件即可完成打包

将包含nw sdk解压包和app.exe的app文件和打包配置文件（app-setup.nsi）复制到一个新的目录,如下图：
点击右键步骤四完成的app-setup.nsi配置文件
然后选择Compile NSIS Script选项（确保步骤三完成，否则不会出现该选项），如下图所示：
执行完成后即可完成打包（可以自行安装测试打包完成的安装包）

到此，nw将html项目打包成桌面应用已讲述完成~~

椒盐大肥猫

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
利用nw.js将html项目打包成桌面应用

优点不需要学习桌面应用开发的语言，只需要掌握web端开发的技术即可缺点nw相关的插件体积过大，导致生成的桌面应用体积过大（可运行的demo体积到达290m左右）开发的程序（和web端开发一样）下载nw的sdk（作用是将html项目当做桌面应用运行）下载nsi脚本执行工具（该工具最终将项目打包成桌面应用）编辑打包配置，模板配置文件下载（稍后讲述打包过程需要自主添加配置）将项目和nw打包成一个可执行文件利用nsi脚本工具执行配置文件即可完成打包，点击安装打包完成的exe文件即可完成安装步
复制链接

扫一扫