[原创] 嵌入式浏览器 使用 nw.js 打包windows 版的嵌入式浏览器 移动桌面应用

嵌入式浏览器调研

• CEF (Chromium Embedded Framework) : https://bitbucket.org/chromiumembedded/cef
• nw.js(Chromium/Node.js) https://github.com/nwjs/nw.js
• HEX(CEF) https://github.com/netease-youdao/hex
• electron: https://github.com/electron

最后选用的方案是 nw.js, 其实也没有调研其他的解决方案. electron 之前了解过, 需要 node.js 环境支持, 觉得麻烦一些. 其实 nw.js 也不省事.

安装前准备

nw.js 从版本 0.14开始兼容 XP 系统, 但最新版本并不兼容 xp. 所以使用0.15.

• nwjs: http://nwjs.io
  
  • http://dl.nwjs.io/v0.15.0/nwjs-v0.15.0-win-ia32.zip (32 bit)
  • http://dl.nwjs.io/v0.15.0/nwjs-v0.15.0-win-x64.zip (64 bit)
• ResourceHacker (替换 ico. company info): http://www.angusj.com/resourcehacker/#download
• Inno Setup (打包工具): http://www.jrsoftware.org/isdl.php
• Inno Setup 中文语言包 (可以不用, 使用默认英文即可): http://www.jrsoftware.org/files/istrans/

步骤:

1. 列准备两张 logo 图片, facvion.png, facvion.ico . 放到和 nw.exe 用一文件夹中 ( ico 不能修改 facvion.png 后缀, 否则打包时会报错)
2. 使用 ResourceHacker 替换 nw.exe 中的 ico, 并且可以替换版本号信息中的公司信息. 点保存即可保存. (原文件会被备份 origin_nw.exe)
3. 将 package.json 添加到 nw.exe 同目录中
4. 这里不使用Inno setup 的引导创建任务. 使用模版文件即可, 打开 zhipeng_demo_x64_setup.iss. 点击运行, 即可编译生成安装包到 Output 文件夹中.

使用 ResourceHacker 替换图标, 选中对用 ico 后, action - replace, 添加 facvion.png 即可替换.
使用 ResourceHacker 替换公司信息, 在 version 中选中, 右侧进行编辑. 编辑完之后点击▶️运行.
使用 Inno setup 引导添加文件时, 如需要添加文件夹和文件夹中的所有文件, 需要单独设置.

[Files]
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\locales\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\locales\en-US.pak"; DestDir: "{app}\locales"; Flags: ignoreversion

package.json 示例

{
    "name": "zhipeng website",
    "main": "https://www.zhangzhipeng2023.cn",
    "description": "zhipeng website tool 64bit",
    "version": "3.0",
    "window": {
        "title": "zhipeng",
        "icon": "favicon.png",
        "width": 1024,
        "height": 768,
        "min_width": 400,
        "min_height": 300,
        "position": "center",
        "show_in_taskbar":true
    }
}

这里设置的默认宽高为 1024/768, 最小宽高 400/300, 居中显示

下面是 x64的配置文件. 另存为 zhipeng_demo_x64_setup.iss.

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

#define MyAppName "Zhipeng 64bit"
#define MyAppVersion "3.0"
#define MyAppPublisher "ZHIPENG, Inc."
#define MyAppURL "http://www.zhangzhipeng2023.cn/"
#define MyAppExeName "nw.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={{D93898D6-2977-4E2A-9163-527031564B11}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DisableProgramGroupPage=yes
OutputBaseFilename=setup-64
SetupIconFile=C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\favicon.ico
Compression=lzma
SolidCompression=yes

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

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked
Name: "quicklaunchicon"; Description: "{cm:CreateQuickLaunchIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: unchecked; OnlyBelowVersion: 0,6.1

[Files]
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\nw.exe"; DestDir: "{app}"; Flags: ignoreversion    
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\locales\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\locales\en-US.pak"; DestDir: "{app}\locales"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\nw_200_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\nw_elf.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\nw_material_100_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\nw_material_200_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\package.json"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\resources.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\snapshot_blob.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\ffmpeg.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\icudtl.dat"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\libEGL.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\libGLESv2.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\natives_blob.bin"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\node.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\nw.dll"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\nw_100_percent.pak"; DestDir: "{app}"; Flags: ignoreversion
Source: "C:\Documents and Settings\Administrator\桌面\nwjs-v0.15.0-win-x64\d3dcompiler_47.dll"; DestDir: "{app}"; 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: "{userappdata}\Microsoft\Internet Explorer\Quick Launch\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: quicklaunchicon

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

参考文献

Electron： HTML + Javascript 开发桌面应用程序 - http://blog.csdn.net/yjwx0018/article/details/52431716
NW.js - https://nwjs.io/
NW.js文档适用0.13及以后版本 - https://nwjs-cn.readthedocs.io/zh_CN/latest/index.html
Inno Setup安装打包教程 - https://item.congci.com/-/content/inno-setup-anzhuang-dabao-jiaocheng-ji-yingyong-zhongwen-yuyanbao-new
Inno Setup - http://www.jrsoftware.org/isinfo.php
ResourceHacker - http://www.angusj.com/resourcehacker/