本教程旨在帮助开发人员把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位桌面应用程序。
下载后解压,其目录结构如下图所示。
{
"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信息
1、使用reshacker打开nw.exe
2、在图标组中替换exe运行时进程的icon
3、在版本信息中修改exe的版本信息
4、修改完毕点击【另存为】,命名exe应用程序为系统名,例如:test.exe,删除nw.exe。再次运行时任务管理器中的信息、exe属性信息等就都改变了。
3、使用inno打包成安装包exe
4、注意事项
使用inno打包生成安装后安装到本地运行,由于登陆页面的密码输入框类型为password,每次登陆之后,webkit内核默认的都会记住用户名、密码。再次打开运行时会自动填充登陆历史记录的用户名及密码,显然这导致用户密码不安全。
解决办法:
修改密码输入框type为text,通过js编程实现对密码输入密文显示。