NSIS图形界面(使用nsiskin插件)进阶教程

免费制作基于nsiskin的安装包，加qq群：37586365

写在系列教程的最开头，感谢烂菜大牛，他写了个系列教程(NSIS进阶教程)是本系列教程的基础

本系列教程和烂菜大牛的系列教程异同如下：

1.本教程使用的图片资源来源于烂菜大牛的教程

2.插件使用，本系列教程只使用nsiskin一个插件，而烂菜大牛使用了nswindows，wndproc，skinbtn，skinprogress等插件

3.复选框(checkbox)，本教程直接实现复选框，烂菜大牛的教程用的是skinbtn+label来模拟复选框

烂菜大牛的教程写的真的很好，推荐大家看本教程之前先百度搜索看一下烂菜大牛的教程，相比之下，我还是新手，如有错误，大家多批评指正

在开始之前，我们来看一下nsiskin插件能做出什么样的效果

好了，参照烂菜大牛教程的形式，我们开始吧

教程第一步，我们来看看如何实现无边框窗口及移动，并贴上一张背景图

再使用nsiskin插件之前，首先要初始化插件，代码如下

GetFunctionAddress $R0 onImageCallback
    GetFunctionAddress $R1 onButtonClick
    nsiskin::Init /NOUNLOAD $R0 $R1 34

onImageCallback，图片回调函数，返回绘图所需要的图片

返回的图片由如下代码创建

nsiskin::LoadImg /NOUNLOAD "$PLUGINSDIR\bg.bmp"
    Pop $BGImage

onButtonClick，按钮按下回掉函数，当按钮被按下，通过此回调函数通知脚本

有了以上知识作基础，我们来看一下欢迎页面的关键代码

Function WelcomePage
    nsDialogs::Create 1044
    Pop $Dialog
    ${If} $Dialog == error
        Abort
    ${EndIf}
    SetCtlColors $Dialog ""  transparent ;背景设成透明

    ${SetWindowSize} $HWNDPARENT 513 354 ;改变窗体大小
    ${SetWindowSize} $Dialog 513 354 ;改变Page大小
   
   
    ${NSD_CreateBitmap} 0 34 100% 100% ""
    Pop $0
    ${NSD_SetImage} $0 $PLUGINSDIR\middle.bmp $1
    
    nsiskin::Attach /NOUNLOAD $Dialog
   
    nsDialogs::Show
    ${NSD_FreeImage} $1
FunctionEnd

其中，最重要的是nsiskin:: Attach函数，此函数接管窗口，完成无边框窗口移动，图片绘制等一系列功能

此时，两个回调函数状态如下

Function onImageCallback
    Pop $0
    ${If} $0 = $Dialog
        push $BGImage
    ${EndIf}
FunctionEnd

Function onButtonClick
FunctionEnd

第一步就完成了，我们来看看效果先

第二步，实现图形按钮，button和checkbox

按钮由如下代码创建

nsiskin::CreateButton /NOUNLOAD $Dialog 330 315 88 25 "install"

其中dialog为按钮父窗口，330 315 88 25 组成按钮位置坐标，最后一个参数为按钮window text，可以为空

再来看看如何创建checkbox

nsiskin::CreateButton /NOUNLOAD $Dialog 26 180 150 15 "i agree"
    Pop $AgreeBtn
    StrCpy $BoolAgree 1
    SendMessage $AgreeBtn ${WM_SETFONT} $Font 0

点击checkbox会回调

Function onButtonClick
    Pop $0
    ${If} $0 = $NextBtn
          call onClickNext
    ${ElseIf} $0 = $AgreeBtn
          call onClickAgree
    ${ElseIf} $0 = $Agree1Btn
          call onClickAgree1
    ${EndIf}
FunctionEnd

Function onClickAgree
    ${If} $BoolAgree == '1'
        StrCpy $BoolAgree 0
    ${Else}
        StrCpy $BoolAgree 1
    ${EndIf}
FunctionEnd

点击I agree这个checkbox后，插件会回调onClickAgree，由这个函数完成状态切换

checkbox的图片切换由如下函数完成

Function onImageCallback
    Pop $0
    ${If} $0 = $Dialog
        push $BGImage
    ${ElseIf} $0 = $CloseBtn
        push $CloseImg
    ${ElseIf} $0 = $NextBtn
        push $NextImg
    ${ElseIf} $0 = $InstallBtn
        push $NextImg
    ${ElseIf} $0 = $PathEdt
        push $EditImg
    ${ElseIf} $0 = $PathBtn
        push $ChangeImg
       
    ${ElseIf} $0 = $AgreeBtn
        push '5'
        ${If} $BoolAgree == '1'
              push $CheckImg2
        ${Else}
               push $CheckImg1
        ${EndIf}

    ${ElseIf} $0 = $Agree1Btn
        push '5'
        ${If} $BoolAgree1 == '1'
              push $CheckImg2
        ${Else}
               push $CheckImg1
        ${EndIf}
       
    ${EndIf}
FunctionEnd

至此，我们已经完成了button和checkbox的创建，checkbox并且可以根据不同的状态显示不同的图片，我们来看看效果

第三步，实现提示框messagebox

当用户点击关闭按钮时，需要弹出一个msgbox用户提示用户，让用户确认其确实要退出安装程序

msgbox创建代码如下

Function onClose
    nsiskin::CreateWindow /NOUNLOAD $HWNDPARENT 0 0 349 184 "提示"
    pop $MsgBox
   
    nsiskin::CreateButton /NOUNLOAD $MsgBox 325 8 15 15 "" 2
    Pop $Close1Btn
    ;System::Call 'User32::CreateWindowEx(i0,t"STATIC", i0, i0x5000000d,i50,i50,i40,i40,i$MsgBox,i1130,i0,i0)i.R1'
    System::Call 'User32::CreateWindowEx(i0,t"STATIC", t"quit confirm?", i0x5000000d,i120,i60,i100,i17,i$MsgBox,i1130,i0,i0)i.R1'

    nsiskin::CreateButton /NOUNLOAD $MsgBox 100 120 88 25 "yes" 1
    pop $QuitBtn
    nsiskin::CreateButton /NOUNLOAD $MsgBox 200 120 88 25 "no" 2
    pop $CancelBtn

    EnableWindow $HWNDPARENT 0
    ShowWindow $MsgBox ${SW_SHOW}

    Abort
FunctionEnd

其中，nsiskin::CreateWindow为关键代码，此函数创建一个window并返回其句柄，默认居中

以此window为父窗口创建button，并指定其id为1和2，那么就相当于确认和取消，window会自动处理相关事件

到这里我们就完成了图形msgbox的创建并显示，来看看效果吧

第四步，实现图形进度条

安装程序释放复制文件的时候，需要一个进度条来提示用户安装进度，接下来我们看看这个进度条如何实现

strcpy $Percent 0
    GetFunctionAddress $0 NSD_TimerFun
    nsDialogs::CreateTimer $0 500

    nsiskin::CreateButton /NOUNLOAD $Dialog 490 8 15 15 ""
    Pop $CloseBtn

    ${NSD_CreateLabel} 24 243 474 5 "Progress"
    Pop $Progress
    ;SetCtlColors $Progress ""  transparent ;背景设成透明
    ${NSD_AddStyle} $Progress ${SS_OWNERDRAW}

以上代码创建了一个模拟进度条，并通过timer来更新进度（可以通过设置实际进度来控制进度条，演示用timer）

Function NSD_TimerFun
    ${If} $Percent != 100
          IntOp $Percent $Percent + 10
          System::Call 'User32::InvalidateRect(i$Progress, i0, i1)i.R9'
    ${Else}
           GetFunctionAddress $0 NSD_TimerFun
           nsDialogs::KillTimer $0
    ${EndIf}
FunctionEnd

以上是timer的回调函数，从此函数我们可以看出，完成进度设置和进度条刷新都由此函数完成

到这里界面部分基本完成了，我们来看看有了进度条的效果吧

第五步，实现页面之间的跳转和完成页面并退出安装程序

页面之间的跳转由如下函数完成

Function RelGotoPage
  IntCmp $R9 0 0 Move Move
    StrCmp $R9 "X" 0 Move
      StrCpy $R9 "120"
  Move:
  SendMessage $HWNDPARENT "0x408" "$R9" ""
FunctionEnd

Function onClickNext
  StrCpy $R9 1
  Call RelGotoPage
  Abort
FunctionEnd

不要问我为什么，因为我也没有研究，直接从烂菜大牛的代码中拿来的

同样的，让我们来看看最终的效果吧

至此，我们已经完成了nsiskin插件的使用介绍，通过使用此插件，安装包制作者已经可以制作出一个精美的安装包了，

如果在使用此插件的过程中遇到了什么问题，欢迎来群 37586365 交流讨论

nsiskin更详细的使用教程，请从群共享文件中获取

ps：脚本需要Unicode版nsis编译，推荐2.46.5版本

插件下载：nsiskin