ixlei

ixlei 查看完整档案

北京编辑大连理工大学  |  软件学院 编辑今日头条  |  前端开发工程师 编辑 github.com/ixlei/jsnotes 编辑
编辑

技能修炼中。。。。

个人动态

ixlei 赞了文章 · 2019-02-27

通过 InnoSetup 美化安装界面

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

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.dllInnoCallback.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 讨论下这个项目该咋整吧。

四、参考资料

查看原文

赞 9 收藏 9 评论 16

ixlei 关注了用户 · 2018-11-23

paul_最帅 @paul_zuishuai

关注 22

ixlei 关注了专栏 · 2018-11-23

有赞技术

有赞技术相关内容

关注 6664

ixlei 关注了专栏 · 2018-11-23

前端小生的成长记录

记录个人在学习前端开发过程的所思所悟,归纳开发过程中走过的各种坑,让未来的学习不再出现同样的错误,让每一行敲过的代码变得熠熠生辉

关注 141

ixlei 关注了用户 · 2018-11-23

jianwenjuan @jianwenjuan

关注 1617

ixlei 关注了专栏 · 2018-11-23

SegmentFault 业界资讯

为广大开发者提供关于开发行业的相关技术媒体资讯

关注 1962

ixlei 关注了专栏 · 2018-11-23

全栈编程

自由程序员,技术路线c,delphi, c++,c#,java,php,node.js,python,golang,typescript;超喜欢react.js的设计思路,全栈开发成为我的终极目标。开发机器macbook pro,或装ubuntu、fedora的机器,编程用vim、vscode,熟练使用linux,docker,git 等。 我的信条:编程语言不重要,思想才是王道;永远牢记:程序 = 数据结构 + 算法 。 ---- 一个热爱编程的人

关注 914

ixlei 关注了专栏 · 2018-11-23

android 驱动学习

学习android驱动时一些笔记和心得记录

关注 456

ixlei 关注了专栏 · 2018-11-23

农场主,做网站卖猪

写代码使我全家人快乐(^-^)

关注 869

ixlei 关注了专栏 · 2018-11-23

终身学习者

我要先坚持分享20年,大家来一起见证吧。

关注 40744

认证与成就

  • 获得 120 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-11-13
个人主页被 813 人浏览