InnoSetup 的美化相應的帖子也比較多，但是代碼不是很全。。。所以我專門出了這篇文章來記錄下這個美化過程。
廢話不多說，先上個成果：
前端er們可以直接下載 vue-nw-seed 這個分支，一鍵 build就出效果了。
一、InnoSetup 增強版
這個部分很重要，是實現自定義界面的絕對前置步驟。
完成這個任務也很簡單，可以自己下載安裝就搞定。
當然，找資源的過程比較麻煩，所以直接提供了一個，並用 node-innosetup-compiler 包裹了一下，使之可以直接在 Node.js 下應用，最終的增強版在 deps/innosetup 這里可以看到。
注意
InnoSetup 本身是開源免費的，希望大家在用的過程中注意一下作者的 LICENSE 。
二、iss 配置文件
這個部分無需贅述，對於新手來說比較復雜的一個事兒，給個文檔 What is Inno Setup? 先。
1、Setup Script Sections
可以直接雙擊 deps/innosetup/bin/Compil32.exe 打開一個可視化的配置窗口，按照引導可以直接生成一個通用流程中簡單的安裝配置，會生成一個類似 setup-simple.iss 這種的 iss 配置文件。
當然，一個扁平漂亮的界面，肯定不是這種簡單的配置能滿足的。。。
所以，看我提供的一個 setup.iss ，其包含完整的流程控制和界面的控制。
這里的代碼太長了，加上注釋 455 行，就不貼過來了，戳鏈接進去看吧。
2、Pascal Script
在那 455 行代碼中主要就是 [code] 塊下面的 Pascal Script ，通過它來控制安裝流程和界面的美化。
- 控制安裝流程的原理是 InnoSetup 通過 Pascal Scripting: Event Functions 這種事件機制，把流程節點的控制交給
Pascal Script，使其可以控制上一步、下一步等等的操作。 - 界面的美化，主要是調用兩個美化插件動態庫：
botva2.dll和InnoCallback.dll。用其來控制貼圖的位置和樣式，和給按鈕綁定相應的事件等等的。
詳細的控制方式參見 setup.iss 文件中的注釋，此處不再詳細解釋啦。。。解釋起來太多了。
3、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 打包安裝美觀的界面，可以自直接換一下相應的配路徑置。
三、Q & A
需要單獨說一下幾個踩到的坑。。。
1、iss 文件需要什么特定的編碼格式嗎？
中文的話，需要 ansi 編碼，不然用其他編碼，打包出來在界面上的中文會亂碼！
這也是我直接用文字貼圖來代替 label 以確保界面中的文字顯示萬無一失的原因。
2、這個 InnoSetup 增強版 和和普通的有啥區別？
說實在的，我也沒太搞明白，InnoSetup 本身就是開源和免費的，可以自己修改並編譯。現在我用的這個版本應該是國內某前輩搜集的一些腳本等東西集合出來單獨打包出來的一個增強版。
3、為啥不單獨搞個 InnoSetup 美化的項目？
一方面不確定 InnoSetup 增強版 這個版權協議，另一方面不確定大家的需求咋樣，暫時這樣，讓大家可以通過 源碼 + 詳細的注釋 習得這部分的技能。如果確實這部分需求很強大，請私信我，或者發 issue 討論下這個項目該咋整吧。