經過 InnoSetup 美化安裝界面

時間 2019-11-05

原文原文鏈接

在 github 倉庫裏的經過 InnoSetup 美化安裝界面提供持續更新 javascript

InnoSetup 的美化相應的帖子也比較多，可是代碼不是很全。。。因此我專門出了這篇文章來記錄下這個美化過程。
廢話很少說，先上個成果：
前端

前端er們能夠直接下載 vue-nw-seed 這個分支，一鍵 build就出效果了。vue

1、InnoSetup 加強版

這個部分很重要，是實現自定義界面的絕對前置步驟。
完成這個任務也很簡單，能夠本身下載安裝就搞定。
固然，找資源的過程比較麻煩，因此直接提供了一個，並用 node-innosetup-compiler 包裹了一下，使之能夠直接在 Node.js 下應用，最終的加強版在 deps/innosetup 這裏能夠看到。
注意
InnoSetup 自己是開源免費的，但願你們在用的過程當中注意一下做者的 LICENSE 。java

2、iss 配置文件

這個部分無需贅述，對於新手來講比較複雜的一個事兒，給個文檔 What is Inno Setup? 先。node

一、Setup Script Sections

能夠直接雙擊 deps/innosetup/bin/Compil32.exe 打開一個可視化的配置窗口，按照引導能夠直接生成一個通用流程中簡單的安裝配置，會生成一個相似 setup-simple.iss 這種的 iss 配置文件。
固然，一個扁平漂亮的界面，確定不是這種簡單的配置能知足的。。。
因此，看我提供的一個 setup.iss ，其包含完整的流程控制和界面的控制。
這裏的代碼太長了，加上註釋 455 行，就不貼過來了，戳連接進去看吧。git

二、Pascal Script

在那 455 行代碼中主要就是 [code] 塊下面的 Pascal Script ，經過它來控制安裝流程和界面的美化。github

控制安裝流程的原理是 InnoSetup 經過 Pascal Scripting: Event Functions 這種事件機制，把流程節點的控制交給 Pascal Script ，使其能夠控制上一步、下一步等等的操做。app
界面的美化，主要是調用兩個美化插件動態庫：botva2.dll 和 InnoCallback.dll。用其來控制貼圖的位置和樣式，和給按鈕綁定相應的事件等等的。yii

詳細的控制方式參見 setup.iss 文件中的註釋，此處再也不詳細解釋啦。。。解釋起來太多了。post

三、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 打包安裝美觀的界面，能夠自直接換一下相應的配路徑置。