web应用打包成桌面可执行程序

介绍如何将Web应用程序打包成桌面应用程序,并生成安装包,解决浏览器兼容性问题,提高用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本教程旨在帮助开发人员把web应用程序打包成一个可执行的桌面应用程序,并生成一个安装包setup.exe,直接安装到本地电脑,方便用户使用。

1、背景

开发web项目时,大多数选择主流的chrome等浏览器作为开发调试工具,但最终用户可能要求兼容IE等不常用的浏览器,此时如果重新开发需要耗费很大的人力、物力。针对此种情况,可以考虑把web应用程序打包成一个桌面应用程序,既方便用户使用,又不用考虑浏览器的兼容问题。

2、名词解释

本文中所用到的名词术语和名词缩写的解释如表1-1所示。

                                                                                               表1-1 名词解释

术语/缩写

定义

nw

node-webkit


3、nw打包web应用

把web应用程序打包成桌面应用程序并最终生成一个安装包exe基本流程为:【使用node-webkit把web应用打包成桌面可执行应用exe】—>【使用reshacker修改exe的版本信息、logo等内容】—>【使用inno把可执行的桌面应用exe程序打包成安装包exe】。

开发人员可以到nw官网下载nw程序,考虑到最终打包的桌面应用程序可能运行在32位机器或者64位机器上,下载nw的32位和64位程序,分别打包32位桌面应用程序和64位桌面应用程序。

下载后解压,其目录结构如下图所示。



nw是作者编译好的nw.exe来启动的,nw根据程序描述文件package.json来启动主页面加载到webkit内核中,默认的解压后没有package.json文件。因此,我们需要创建配置文件package.json来设置我们web应用程序,如下图所示。


其基本内容如下:
{
  "main": "http://www.abc.com",
  "name": "测试",
  "description": "测试",
  "version": "1.0",
  "keywords": [ "abc", "abc" ],
  "window": {
    "title": "测试",
	  "icon": "abc.png",
    "toolbar": true,
    "frame": true, 
    "width": 1300,
    "height": 768,
    "position": "center",
    "min_width": 1200,
    "min_height": 600
  },
  "webkit": {
    "plugin": true
  },
  "chromium-args":"--incognito"
}
其中几个比较重要的属性:
 main: web应用程序的主页面,这里我们配置的是web应用部署服务器的地址,当部署服务器改变时,可以修改此地址。
 name: 应用程序的名称
 window: 主要描述桌面应用程序的窗口信息,title属性描述窗口的名称,nw.exe启动后,右键任务栏中的桌面应用程序可以看到修改后的名称。icon修改桌面应用程序的图标,修改后可以在任务栏中看到修改后的图标。

4、使用reshacker修改nw.exe信息

虽然nw.exe根据配置文件package.json以桌面应用形式来运行web程序,但是程序在任务管理器中的进程名、进程icon、版本信息等都还是nw.exe信息。可以使用reshacker把nw.exe相应的信息修改为web应用程序的信息,例如进程名、进程icon等等,使得生成的桌面应用程序更加专业,其具体操作流程如下。

1、使用reshacker打开nw.exe



2、在图标组中替换exe运行时进程的icon



3、在版本信息中修改exe的版本信息



4、修改完毕点击【另存为】,命名exe应用程序为系统名,例如:test.exe,删除nw.exe。再次运行时任务管理器中的信息、exe属性信息等就都改变了。

3、使用inno打包成安装包exe

完成上面的操作之后,虽然可以以桌面应用程序的方式运行web程序,但是对于用户来说体验还是不好,必须拷贝整个解压后的nw文件夹,然后点击运行新生产的test.exe才能使用。为了方便用户使用,使用inno把修改配置后的test.exe打包成一个安装程序setup.exe,用户直接下载安装包安装到本地电脑上使用。

4、注意事项

使用inno打包生成安装后安装到本地运行,由于登陆页面的密码输入框类型为password,每次登陆之后,webkit内核默认的都会记住用户名、密码。再次打开运行时会自动填充登陆历史记录的用户名及密码,显然这导致用户密码不安全。

解决办法:

修改密码输入框type为text,通过js编程实现对密码输入密文显示。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值