方便客戶對安裝包制作過程中的配置進行更好地理解與應用，我們對nsNiuniuSkin的配置進行如下整理，從手工配置，到全自動集成，做全覆蓋的說明與解釋！

我們以leeqia_mountain模板為例，介紹一下如何配置與打包：

實際操作前必讀

在正式開始配置之前，有幾個點需要先給大家說明一下：

• 本文采用純文本編輯，沒有配圖，請耐心看完，您有疑惑的地方相信都能找到答案 ^_^
• 我們目前提供了bat腳本和python腳本兩套打包腳本，供不同的用戶選擇；python腳本會更加靈活，我們建議后續盡量使用python命令行接口方式
• NSIS腳本我們已經集成了標準的功能，一般來講不需要您再修改，如果確實需要修改，見后文介紹
• 安裝包UI采用Duilib配置實現，其中的圖標替換與修改，與打包方式與接口方式無關，您需要了解的是Duilib的屬性配置
• 打包目錄結構圖

.                                7z壓縮工具以及python、bat打包腳本                         
├── FilesToInstall               待打包文件列表放置的目錄
├── Helper                       打包輔助工具
├── NiuNiuCaptureElectronDemo    Electron項目示例（用于演示如何打包Electron程序）
├── NSIS                         NSIS打包工具相關文件
├── Output                       打包完成的文件存放目錄
├── SetupScripts                 打包核心nsis腳本
│   └── leeqia_mountain          nsi文件以及安裝卸載圖標存放位置
│       ├── LanguageFiles        語言翻譯文件
│       └── skin                 安裝界面配置文件
│           └── images           安裝界面需要的圖片
└── Sign                         簽名腳本

1.安裝包界面必要的UI修改

不管采用哪種方式打包，必要的UI修改都是要做的，比如圖標以及個別界面上的提示信息；我們的UI模板已經盡可能做到簡潔與美觀，相信您只需要替換部分圖標后，完全可以直接作為您產品的安裝包界面。

如果對duilib的界面配置不熟悉的話，我們不建議您修改界面的布局，盡量只是按照原尺寸的圖片進行替換即可；在SetupScripts\leeqia_mountain\skin目錄下，用于存儲UI相關的文件：

以上xml在文本工具中即可編輯，屬性的修改參考duilib_ultimate的屬性列表；同時我們提供一個在線預覽與調試工具，可以在不重新打包的情況下，預覽所有界面效果，將會使您的界面修改效率提升數倍，見如下鏈接：

http://leeqia.com/articles/nsniuniuskin_designer.html

注：

• 在images子目錄用于存儲界面所需要的圖片信息
• 如果進行圖片替換的話，圖片均使用png圖片，然后需要同時提供1倍圖，1.5倍圖和2倍圖。

2.手工配置打包流程

手工配置打包比較適合于那些產品信息及版本信息不怎么變動的項目打包，比如您有一個產品，安裝包上的信息（主要指版本信息）平時并不變更，那么用這種方式配置與打包，是最省時間的。

2.1 修改打包的產品信息

在soft_setup.nsi文件中，根據您的項目修改如下宏定義：

#======================自定義宏 產品信息==============================!define /ifndef PRODUCT_NAME           		"利洽科技截圖控件"		#產品名稱
!define /ifndef PRODUCT_NAME_EN           	"Leeqia ScreenCapture"	#英文產品名稱
!define /ifndef PRODUCT_PATHNAME			"Leeqia_Capture"  		#安裝與卸載項用到的KEY，與Electron中的guid相同
!define /ifndef INSTALL_APPEND_PATH         "Leeqia_Capture"	 	#安裝路徑追加的名稱 
!define /ifndef INSTALL_DEFALT_SETUPPATH    "$PROGRAMFILES32\${INSTALL_APPEND_PATH}"       #默認生成的安裝路徑  
!define /ifndef EXE_NAME               		"牛牛截圖.exe"			#主程序EXE文件名
!define /ifndef PRODUCT_VERSION        		"2.5.0.0"				#版本號
!define /ifndef PRODUCT_PUBLISHER      		"Leeqia"				#發布者
!define /ifndef PRODUCT_LEGAL          		"Leeqia Copyright（c）2020"	#版權信息
!define /ifndef INSTALL_MODE_ALL_USERS 		"all"					# all current，是否安裝到所有用戶，默認為是，會影響注冊表、快捷方式、開始菜單等
!define /ifndef INSTALL_EXECUTION_LEVEL 	"admin"					# 如果INSTALL_MODE_ALL_USERS使用current，則此處請同步改成user (RequestExecutionLevel none|user|highest|admin)
!define /ifndef INSTALL_OUTPUT_NAME    		"Test_PC_Setup_v2.5.0.exe"	#默認的安裝包名稱，在bat中控制傳入 
!define /ifndef INSTALL_LOCATION_KEY 		"InstPath"				#默認的注冊表中安裝位置的key值
#======================以下宏用于控制特定的行為==============================!define /ifndef INSTALL_DEFAULT_AUTORUN  0		#默認是否自動開機啟動
!define /ifndef INSTALL_DEFAULT_SHOTCUT  0		#默認是否添加快捷方式
!define /ifndef TEST_SLEEP 				 1		#測試安裝過程中的延時開關，方便查看進度變化和輪播圖，實際使用，請改成0
!define /ifndef INSTALL_DOWNLOAD_BASEURL	"http://www.ggniu.cn/test_online_install/"
#======================上述具體的宏定義均可以在pre_define.nsh文件中預先定義，可任意指定為其他的值==============================

2.2 修改許可協議文件

在leeqia_mountain目錄下，有根據語言ID命令的rtf文檔，您相應的修改其內容即可，如果有新的語言的許可協議文件，也請進行新增。

2.3 復制要打包的文件至FilesToInstall目錄

將要安裝的文件復制到FilsToInstall目錄下;打包腳本將會對這個目錄下（包含多級子目錄）進行壓縮打包。 這個步驟一般是在測試階段使用，實際打包過程中一般是通過腳本自動化復制。

2.4 執行相應的腳本打指定的包

雙擊指定的bat，即可完成打包：

看了上述的過程，有沒有覺得打包真的很簡單呢，僅僅需要五步，就能實現一個屬于您的安裝啦！

3.python命令行自動化配置打包

為了能夠更加方便地集成進既有的打包流程中，我們專門用python開發了一套命令行的接口，您不再需要去修改soft_setup.nsi文件中的宏定義，而只需要通過我們package.py的命令行參數來進行控制即可。

之所以能夠如此設置，在于NSIS的宏定義支持 /ifndef屬性，表示如果在此之前未定義才定義，而我們在soft_setup.nsi文件的頂部，優先引入一個叫pre_define.nsh文件，如果在pre_define.nsh中已經定義的宏，那么他將優先使用。

事實上NSIS自身也支持命令行來傳入宏定義，在這個情況下，一個宏有效的優先級為：

NSIS命令行   >   pre_define.nsh  > soft_setup.nsi

有了這個前提，我們在package.py中，將接受到的命令行參數，轉換成NSIS的宏定義，寫入到pre_define.nsh文件中，以此方式來實現打包時配置信息的參數化。

3.1 命令行參數說明

package.py具體參數較多，如下：

optional arguments:
  -h,                          --help                     show this help message and exit
  --log_dir                    LOG_DIR                    if None, log will be written to console
  --project_name               PROJECT_NAME               the project name, eg: leeqia_moutain
  --package_mode               PACKAGE_MODE               the package mode, 0:7z, 1:nozip, 2: online
  --need_sign                  NEED_SIGN                  check if sign uninstall and setup file
  --build_for_electron         BUILD_FOR_ELECTRON         check if build for electron, if True, we will call npm build in scripts
  --electron_build_path        ELECTRON_BUILD_PATH        electron build path, the dir path of package.json
  --generate_latest_file       GENERATE_LATEST_FILE       check if generate latest.xml for electron-updater
  --files_toinstall_name       FILES_TOINSTALL_NAME       local directory name for nsNiuniuSkin, FilesToInstall default
  --auto_write_uninst          AUTO_WRITE_UNINST          check if generate uninstall automatically, default False
  --uninst_file_name           UNINST_FILE_NAME           the uninstall file name
  --src_files_dir              SRC_FILES_DIR              the unpacked file path, if specified, we will copy the files to [files_toinstall_name] and package them
  --PRODUCT_NAME               PRODUCT_NAME               setup file name, if None, we will use the definition in soft_setup.nsi
  --PRODUCT_NAME_EN            PRODUCT_NAME_EN            setup file name, if None, we will use the definition in soft_setup.nsi
  --INSTALL_OUTPUT_NAME        INSTALL_OUTPUT_NAME        setup file name, if None, we will use the definition in soft_setup.nsi
  --PRODUCT_VERSION            PRODUCT_VERSION            the package version, if None, we will use the definition in soft_setup.nsi
  --EXE_NAME                   EXE_NAME                   the main exe name, if None, we will use the definition in soft_setup.nsi
  --INSTALL_LOCATION_KEY       INSTALL_LOCATION_KEY       the install localtion key, if None, we will use the definition in soft_setup.nsi
  --INSTALL_APPEND_PATH        INSTALL_APPEND_PATH        the append path when install, if None, we will use the definition in soft_setup.nsi
  --PRODUCT_PATHNAME           PRODUCT_PATHNAME           the identity in reg, if None, we will use the definition in soft_setup.nsi
  --INSTALL_DEFALT_SETUPPATH   INSTALL_DEFALT_SETUPPATH   the default setup path, if None, we will use the definition in soft_setup.nsi
  --TEST_SLEEP                 TEST_SLEEP                 if True, it will sleep when extract the files, if None, we will use the definition in soft_setup.nsi
  --INSTALL_DEFAULT_SHOTCUT    INSTALL_DEFAULT_SHOTCUT    check if add shortcut for default, if None, we will use the definition in soft_setup.nsi
  --INSTALL_DEFAULT_AUTORUN    INSTALL_DEFAULT_AUTORUN    check if add auto run for default, if None, we will use the definition in soft_setup.nsi
  --INSTALL_EXECUTION_LEVEL    INSTALL_EXECUTION_LEVEL    execution level(admin/user), if None, we will use the definition in soft_setup.nsi
  --INSTALL_MODE_ALL_USERS     INSTALL_MODE_ALL_USERS     install mode(all/current), if None, we will use the definition in soft_setup.nsi
  --INSTALL_DOWNLOAD_BASEURL   INSTALL_DOWNLOAD_BASEURL   download base url for online install, if None, we will use the definition in soft_setup.nsi
  --PRODUCT_LEGAL              PRODUCT_LEGAL              product legal, if None, we will use the definition in soft_setup.nsi
  --PRODUCT_PUBLISHER          PRODUCT_PUBLISHER          publisher info, if None, we will use the definition in soft_setup.nsi

具體每個參數解釋如下：

3.2 更多的參數說明

• --PRODUCT_NAME參數上面的若干參數，為打包控制指令
• --PRODUCT_NAME及以下的參數，均為在soft_setup.nsi中的參數，如果命令行不指定，則會使用soft_setup.nsi中默認的
• --INSTALL_OUTPUT_NAME參數，在build_for_electron參數為False時，必需指定。build_for_electron為True時將會在腳本中根據Electron打包配置中的應用名稱和版本號生成安裝包名稱

3.3 python命令行打包示例

比如，想打包一個程序，想指定的信息如下：

• 待打包目錄為： c:\unpacked_files
• 產品名稱為： 測試軟件
• 主程序文件名為： Test.exe
• 版本號為： 0.5.0
• 安裝包名稱為： Test_Setup.exe

那么打包的命令行參數為：

python package.py --package_mode=1 --project_name=leeqia_mountain --PRODUCT_NAME=測試軟件 --PRODUCT_VERSION=0.5.0 --EXE_NAME=Test.exe --INSTALL_OUTPUT_NAME=Test_Setup.exe --src_files_dir=C:\unpacked_files

如果還有更多的參數要指定，則追加即可。

3.4 如何使用python命令行做一次性配置，后續直接應用

看完這一節，相信您也一定發現了，第一節中的手工配置的soft_setup.nsi文件的步驟完全可以舍棄，可以直接采用這種命令行的方式來打包。 哪怕信息是相對固定的，也可以將這個命令行參數用bat文件保存起來。

注：

利用python.py的命令行腳本，需要在打包的環境中安裝了python3

4.Electron程序打包注意事項

對于Electron程序的打包，我們支持打包的同時生成與electron-updater兼容的latest.xml，以支持Electron程序的自動升級。

在對Electron程序打包前，我們需要考慮如下幾個問題，并根據結論形成正確的配置：

• 當前程序是首次發布還是延續之前electron-builder打出來的程序繼續發布
• 打包入口問題
• a) 如果是electron-builder作為打包入口，那么您只需要通過命令行，傳遞準確的信息，同時指定build_for_electron為False即可，因為這種模式對于我們nsNiuniuSkin來講，和打包其他方式一樣（這是我們建議的方式）
• b) 如果您希望打包的入口在我們的 package.py，那么需要傳遞build_for_electron為True，同時把項目路徑傳遞過來，我們將會嘗試讀取項目路徑下package.json中的版本號，軟件名稱，guid等信息，然后在項目路徑下執行npm build run指令，最終打包成完整的安裝包（如果您的打包的配置或方式與我們默認集成的有所不同，那么需要您修改package_util.py中的build_for_electron函數的實現）。

還需要考慮要如何配置如下參數：

根據以往客戶用于打包Electron程序時遇到過的問題，容易出錯的地方如下，希望對您有幫助：

5.NSIS功能腳本修改說明

我們已經將完整的安裝功能均寫到了setup_control.nsh腳本中，正常來講，您不需要修改這里的腳本，setup_control.nsh文件中的一些關鍵函數如下：

如果是在安裝過程中有一些額外的功能要加，可以在setup_control.nsh中的CustomizeInstall函數下進行擴展，比如安裝.netframework等；這個函數將會運行在BGWorker下，您不用擔心會導致安裝界面卡住。

6.文件代碼簽名說明

代碼簽名對于軟件的分發以及防誤報來說有重要作用，我們在Sign目錄下，已經放了簽名的基礎腳本等信息，您只需要替換signfile.bat中的幾個關鍵信息，同時將證書和證書密碼等信息，然后在打包時指定need_sign為True即可。

• 將signfile.bat中的xxx.pfx改成你的證書的名稱 （后續是pfx格式的）
• 將xxx這個密碼，改成你們的證書的密碼
• 將www.xxx.com替換成你們產品的網站
• 將最后一行的@rem 刪除

注：

1)如果您的簽名證書默認不是按我們這種方式簽名的，那么您需要自行修改Sign.bat，保證不破壞他的參數接收的情況下，能夠最終完成簽名即可。

7. 結語

希望這篇配置說明能夠幫助您快速的配置好屬于您項目專屬的打包腳本，核心在于對package.py的命令行參數和NSIS對宏定義的設置順序的理解。

在安裝包安裝過程中，精美的UI往往能讓客戶對所安裝產品的印象更加深刻，更能體現出軟件服務商在用戶體驗上的專注與用心！ 希望我們的努力，能夠讓安裝包制作再容易一點，再快樂一點！

愿天下沒有難做的安裝包！

function fChange() { 
 let file=document.getElementById('file'); 
 // 輸出已經選擇圖片名字 
 console.log(file.value); 
 // 輸出已經選擇的圖片對象 
 console.log(file.files[0]); 
} 
... 
<input type="file" id="file" onchange="fChange()">

// file 轉 blob對象 
let bold=window.URL.createObjectURL(file.files[0]); 
console.log('bold==>'+bold); 
 
let boldImg=document.getElementById('bold'); 
boldImg.src=bold; 
 
// file 轉 base64 
let base64Img=document.getElementById('base64'); 
var reader=new FileReader(); 
reader.readAsDataURL(file.files[0]); 
reader.onload=function (e) { 
 console.log('base64==>'+this.result); 
 base64Img.src=this.result; 
}

<div id="img-pre"> 
</div> 
<div id="add-pic"> 
 <input type="file" id="up-file" onchange="fChange()"> 
</div>

#add-pic{ 
 width: 100px; 
 height: 100px; 
 background: url('./add-pic.png') 
} 
#add-pic input{ 
 width: 100%; 
 height: 100%; 
 display: none; 
} 
#img-pre:after{ 
 display: block; 
 content: ''; 
 clear: both; 
} 
#img-pre img{ 
 float: left; 
 width: 100px; 
 height: 100px; 
 margin-right: 10px; 
}

let addPic=document.getElementById('add-pic'), upFile=document.getElementById('up-file'); 
// 監聽圖片點擊，從而觸發input file的點擊事件 
addPic.addEventListener('click', function(){ 
 upFile.click(); 
}) 
function fChange() { 
 let file=document.getElementById('up-file'); 
 let imgPre=document.getElementById('img-pre'); 
 
 // file 轉 blob對象 
 let bold=window.URL.createObjectURL(file.files[0]); 
 
 // 創建img元素，并添加到img-pre元素里 
 var img=document.createElement("img"); 
 img.setAttribute("src", bold); 
 imgPre.appendChild(img); 
}

addy 是一個支持 HTTP/2 的跨平臺 Web 服務器, 使用和配置都非常簡單。Caddy 支持 HTTP/2, IPv6, Markdown, WebSockets, FastCGI, 模板等等。

具有自動 HTTPS 的快速、多平臺 Web 服務器

https://github.com/caddyserver/caddy

中文文檔:

https://dengxiaolong.com/caddy/zh/

1. 制作Caddyfile

Caddyfile是一個配置Caddy的文本文件。它被設計成易于打字，不易出錯。

Caddyfile的第一行始終是要服務的站點的地址。

你可以定義任意多的站點；Caddy支持虛擬主機和許多其他功能！

matt.life   # 你的站點地址

ext .html   # 美化網址
errors error.log {       # 錯誤日志
    404 error-404.html   # 自定義錯誤頁面
}

# PHP后端
fastcgi /blog localhost:9000 php

# API負載均衡
proxy /api localhost:5001 localhost:5002

2. 運行Caddy

瞧！你所要做的就是運行caddy。如果你的Caddyfile在同一個文件夾中，它會被自動加載。對于生產站點，HTTPS是默認開啟的！

$ caddy
Activating privacy features... done.
http://matt.life
https://matt.life

打開瀏覽器

輸入你的站點地址，查看它的運行情況。在線站點被重定向到HTTPS。

Caddy非常適合在家里或工作時開發網站，并服務于生產環境。趕緊嘗試一下！