经过 InnoSetup 美化安装界面

在 github 仓库里的 经过 InnoSetup 美化安装界面 提供持续更新

InnoSetup 的美化相应的帖子也比较多，可是代码不是很全。。。因此我专门出了这篇文章来记录下这个美化过程。
废话很少说，先上个成果：

前端er们能够直接下载 vue-nw-seed 这个分支，一键 build就出效果了。

1、InnoSetup 加强版

这个部分很重要，是实现自定义界面的绝对前置步骤。
完成这个任务也很简单，能够本身下载安装就搞定。
固然，找资源的过程比较麻烦，因此直接提供了一个，并用 node-innosetup-compiler 包裹了一下，使之能够直接在 Node.js 下应用，最终的加强版在 deps/innosetup 这里能够看到。
注意
InnoSetup 自己是开源免费的，但愿你们在用的过程当中注意一下做者的 LICENSE 。

2、iss 配置文件

这个部分无需赘述，对于新手来讲比较复杂的一个事儿，给个文档 What is Inno Setup? 先。

一、Setup Script Sections

能够直接双击 deps/innosetup/bin/Compil32.exe 打开一个可视化的配置窗口，按照引导能够直接生成一个通用流程中简单的安装配置，会生成一个相似 setup-simple.iss 这种的 iss 配置文件。
固然，一个扁平漂亮的界面，确定不是这种简单的配置能知足的。。。
因此，看我提供的一个 setup.iss ，其包含完整的流程控制和界面的控制。
这里的代码太长了，加上注释 455 行，就不贴过来了，戳连接进去看吧。

二、Pascal Script

在那 455 行代码中主要就是 [code] 块下面的 Pascal Script ，经过它来控制安装流程和界面的美化。

• 控制安装流程的原理是 InnoSetup 经过 Pascal Scripting: Event Functions 这种事件机制，把流程节点的控制交给 Pascal Script ，使其能够控制上一步、下一步等等的操做。

• 界面的美化，主要是调用两个美化插件动态库：botva2.dll 和 InnoCallback.dll。用其来控制贴图的位置和样式，和给按钮绑定相应的事件等等的。

详细的控制方式参见 setup.iss 文件中的注释，此处再也不详细解释啦。。。解释起来太多了。

三、setup resources

这个部分就是用来存放贴图资源和美化插件动态库的地方。
我默认放在示例项目的 /build/setup_resources 这个位置。
若是你去看过上文 setup.iss 这个文件的话，就会发现里面的资源文件路径的配置被搞成相似这个样子

#define LicenseFilePath "_resourcesPath_\license.txt"
#define SetupIconFilePath "_resourcesPath_\logo.ico"
#define ResourcesPath "_resourcesPath_\*"

这是由于各个项目要求的打包配置和路径可能不一致，特地作了一个处理，详见build-win-setup.js

// rewrite name, version to iss
fs.readFile(issPath, null, function(err, text) {
  if (err) return reject(err)

  let str = iconv.decode(text, 'gbk')
    .replace(/_name_/g, name)
    .replace(/_appName_/g, appName)
    .replace(/_version_/g, version)
    .replace(/_outputPath_/g, outputPath)
    .replace(/_outputFileName_/g, getOutputName(outputFileName, { name, version, platform }))
    .replace(/_filesPath_/g, files)
    .replace(/_resourcesPath_/g, resourcesPath)
    .replace(/_appPublisher_/g, appPublisher)
    .replace(/_appURL_/g, appURL)
    .replace(/_appId_/g, appId)


  fs.writeFile(tmpIssPath, iconv.encode(str, 'gbk'), null, function(err) {
    if (err) return reject(err)

    // inno setup start
    innosetupCompiler(tmpIssPath, { gui: false, verbose: true }, function(err) {
      fs.unlinkSync(tmpIssPath)
      if (err) return reject(err)
      resolve(opt)
    })
  })
})

若是仅仅想单纯的用 InnoSetup 打包安装美观的界面，能够自直接换一下相应的配路径置。

3、Q & A

须要单独说一下几个踩到的坑。。。
一、iss 文件须要什么特定的编码格式吗？
中文的话，须要 ansi 编码，否则用其余编码，打包出来在界面上的中文会乱码！
这也是我直接用文字贴图来代替 label 以确保界面中的文字显示万无一失的缘由。

二、这个 InnoSetup 加强版 和和普通的有啥区别？
说实在的，我也没太搞明白，InnoSetup 自己就是开源和免费的，能够本身修改并编译。如今我用的这个版本应该是国内某前辈搜集的一些脚本等东西集合出来单独打包出来的一个加强版。

三、为啥不单独搞个 InnoSetup 美化的项目？
一方面不肯定 InnoSetup 加强版 这个版权协议，另外一方面不肯定你们的需求咋样，暂时这样，让你们能够经过 源码 + 详细的注释 习得这部分的技能。若是确实这部分需求很强大，请私信我，或者发 issue 讨论下这个项目该咋整吧。

4、参考资料

• 互联网软件的安装包界面设计-Inno setup

• INNOSETUP 仿有道云安装包界面

• Pascal 入门

• InnoSetup docs: Event Functions