使用node-webkit(v0.35.5)和innosetup(3.6.1)打包将web程序打包为桌面客户端(安装包)

最新推荐文章于 2023-09-21 11:24:20 发布

weixin_30564785

最新推荐文章于 2023-09-21 11:24:20 发布

阅读量292

点赞数 1

文章标签： json 操作系统 php

原文链接：http://www.cnblogs.com/wanggang2016/p/10316213.html

版权

这边主要是有一个客户，需要在电视机上安装一个客户端，含有视频直播功能；刚开始我们采用的webapp打包成apk安装在电视机上，发现摄像头监控画面根本无法播放(apk在手机上可以正常播放视频)；排除一些原因之后，初步判断是电视机的内置浏览器内核是阉割版，不支持视频的播放，必须切换内核才行，但是webapp是不支持切换内核的，只能开发原生apk，使用qq x5内核，成本太大了，综合考虑之下，将电视机主板换成windows微主机，将web地址伪装成桌面客户端，暂时采用这种方式实现，好了，废话不多说，参照以下步骤进行：

1、下载和安装node-webkit

进入官网后（https://nwjs.io/downloads/），点击下载，为了兼容性考虑，我这里选择是win32版本(32位程序可在64位下运行，反之不行)

2、解压(nwjs-v0.35.5-win-ia32.zip)

3、准备website

如果只是访问服务器上的url地址的话，直接建立一个package.json文件即可，文件内容格式如下：

{
  "main":"http://www.baidu.com",
  "name": "baidu",
  "window": {
    "title": "baidu",
    "icon": "image/logo.png",
    "toolbar": false,
    "width": 1280,
    "height": 800,
    "min_width": 400,
    "min_height": 200
  },
  "webkit": {
    "plugin": true,
    "java": false,
    "page-cache": false
  }
}

若不需要显示任何导航栏(打开记录全屏显示)：

{
　　"name":"SLYJ",//文件名 不可以存在空格
　　"main":"http://192.168.10.148:8001/index.html",//node-webkit启动的时候默认打开的页面,地址最好使用绝对路径。
　　"window":{//控制主窗口的显示风格
　　　　"fullscreen":true, bool 值。是否全屏显示。
　　　　"frame": false,
　　　　"show_in_taskbar":true, //是否在任务栏显示图标。
　　　　"icon":""  //软件图标
　　}
}

main这个参数直接写上一个网址(如何是需要将单独一个web程序打包，指向起始页url地址即可)

window.icon这个参数可以配置这个exe在windows的底部任务栏上的图标

toolbar最好设置为true，这样子你的应用程序上面会有类似于浏览器的工具栏，如果你的程序类似于一个音乐播放器之类的东西，那么你可能需要设置为false

关键package.json的语法请参考：

https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields

4、生成可执行exe

①将package.json压缩，直接选中右键压缩，必须保证package.json文件在压缩包的第一级目录

②将压缩包package.zip修改后缀名，改为:app.nw，后缀必须为nw，名称随意

③将app.nw拷贝到nwjs-v0.35.5-win-ia32.zip的解压目录下：

④在地址栏输入cmd，执行命令：

copy /b nw.exe+app.nw app.exe

可以看到，该目录下生成了一个exe程序

双击运行该app.exe，可以看到打开了一个类似于客户端一样的页面，其实相当于一个浏览器了

仅仅这样就完了么？当然不是，总不能每次拷贝这个文件夹，然后让别人点击app.exe来运行吧，所有我们这里将它打包为一个安装程序，跟所有的桌面级客户端一样，只要安装了就可以点击桌面上的图标进行访问，废话不多说，看看怎么来打包：

1、下载Inno Setup工具(下载地址：http://www.jrsoftware.org/isdl.php)，这里我下载的是5.6.1版本：innosetup-5.6.1.exe

2、安装，安装过程不多说了，下一步下一步，和一般的软件安装过程一样，安装完之后，新建(菜单操作：File--New)

这些内容会显示在安装程序中，按实际来填写即可

选择app.exe，并将app.exe运行所需要的文件全部加入(除了app.exe，其他文件我全部加入了，防止报错，我试了一下删除那几个较大的dll或者bin文件，删除之后安装包无法正常运行，所以全部加上吧)

locales文件夹也必须加上，里面全部是依赖运行的组件；因为locales文件夹下没有子文件夹，这里选择是或者否都行

下面的可以不填，直接下一步按默认选中即可

选择保存路径和exe文件的图标和名字

下一步到最后，会生成一大堆执行脚本，直接执行的话，可以生成安装包文件，但是无法启动，因为直接打包的话，安装时会将app.exe运行依赖的文件全部放在和app.exe同层目录，运行时会找不到locales下的文件，必须按照同样的文件夹结构摆放所有文件：

可以试下，直接生成安装程序，然后安装

安装完，启动报错了：

然后查看安装的路径文件，所有文件全部在同一级目录：

这里我们需要修改以下脚本，安装后的文件，按照原文件夹摆放：

将

Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\locales\*"; DestDir: "{app}"; Flags: ignoreversion

修改为：

Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\locales\*"; DestDir: "{app}\locales";Flags: ignoreversion

另外，需要更改安装在桌面的上图标的话，需要将：

Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon

更改为：

Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;IconFilename: "C:\Users\WD\Desktop\lims_tv.ico"

完整脚本如下：

; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

#define MyAppName "安然"
#define MyAppVersion "1.0"
#define MyAppPublisher "安然打包, Inc."
#define MyAppURL "http://www.example.com/"
#define MyAppExeName "app.exe"

[Setup]
; NOTE: The value of AppId uniquely identifies this application.
; Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={{8E3E8A75-E008-40BE-90CF-9A4830A47B42}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DisableProgramGroupPage=yes
OutputDir=E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32
OutputBaseFilename=test_setup
SetupIconFile=C:\Users\WD\Desktop\Pig.ico
Compression=lzma
SolidCompression=yes

[Languages]
Name: "english"; MessagesFile: "compiler:Default.isl"

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked

[Files]
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\app.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\app.nw"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\credits.html"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\d3dcompiler_47.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\ffmpeg.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\icudtl.dat"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\libEGL.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\libGLESv2.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\natives_blob.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\node.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\notification_helper.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw_100_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw_200_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\nw_elf.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\resources.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\v8_context_snapshot.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "E:\nwjs-v0.35.5-win-ia32\nwjs-v0.35.5-win-ia32\locales\*"; DestDir: "{app}\locales";Flags: ignoreversion
; NOTE: Don't use "Flags: ignoreversion" on any shared system files

[Icons]
Name: "{commonprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;IconFilename: "C:\Users\WD\Desktop\lims_tv.ico"

[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent

更改完脚本之后，运行脚本，即可重新生成安装包，然后安装 test_setup.exe(和正常软件一样，直接下一步)，安装完之后，桌面会出现一个图标，这是我选择的图标文件：lims_tv.ico

我的最终完整脚本如下：

; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

#define MyAppName "XXXX"
#define MyAppVersion "1.0"
#define MyAppPublisher "XXXX, Inc."
#define MyAppURL "http://www.XXXX.com/"
#define MyAppExeName "app.exe"


[Setup]
; NOTE: The value of AppId uniquely identifies this application.
; Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={{0354EFDC-6AB8-4C90-B574-95A890A10DDD}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DisableProgramGroupPage=yes
OutputDir=C:\Users\WD\Desktop\1212
OutputBaseFilename=limstv_setup
SetupIconFile=C:\Users\WD\Desktop\Pig.ico
Compression=lzma
SolidCompression=yes

[Languages]
Name: "english"; MessagesFile: "compiler:Default.isl"

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked

[Files]
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\app.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\app.nw"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\ffmpeg.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\icudtl.dat"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\libEGL.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\libGLESv2.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\natives_blob.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\node.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\notification_helper.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw_100_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw_200_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\nw_elf.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\resources.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\lims_tv.ico"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\v8_context_snapshot.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Users\WD\Desktop\1212\nwjs-v0.35.5-win-ia32\locales\*"; DestDir: "{app}\locales";Flags: ignoreversion
; NOTE: Don't use "Flags: ignoreversion" on any shared system files

[Icons]
Name: "{commonprograms}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon;IconFilename: "{app}\xxxx.ico"

[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent

转载于:https://www.cnblogs.com/wanggang2016/p/10316213.html

weixin_30564785

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用node-webkit(v0.35.5)和innosetup(3.6.1)打包将web程序打包为桌面客户端(安装包)

这边主要是有一个客户，需要在电视机上安装一个客户端，含有视频直播功能；刚开始我们采用的webapp打包成apk安装在电视机上，发现摄像头监控画面根本无法播放(apk在手机上可以正常播放视频)；排除一些原因之后，初步判断是电视机的内置浏览器内核是阉割版，不支持视频的播放，必须切换内核才行，但是webapp是不支持切换内核的，只能开发原生apk，使用qq x5内核，成本太大了...
复制链接

扫一扫