zoukankan      html  css  js  c++  java
  • Electron实战:创建ELectron开发的window应用安装包

    前言:研究electron自动更新的时候,在electron的官方文档auto-updater 中,提到了在几个平台mac,Linuxwindows下electron 的自动更新方法,其中windsow平台上面,文章中建议先用grunt-electron-installer 模块来创建windows安装包,grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具, 一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下,用Squirrel创建electron的.exe安装包。

     

    创建nuget包

    我们的方法是使用nuget工具创建Nuget包,再使用Squirrel工具创建.exe。

    1.下载squirrel.exenuget.exe,也可以选择直接安装Squirrel.Windows (需要有vitual studio环境)。

     

    2.新建文件夹如my-build,把下载好的squirrel.exe,nuget.exe和setup.exe

    放进去,在文件夹放入我们未打包的electron应用,如下图:

     

     

    4.在my-build根目录中,打开命令行执行nuget spec

    如下图:

    生成 spec包初始文件

    5.编辑器打开 Package.nuspec,按照自己项目的需要编辑这个文件,如下图:

     

    这里需要注意:根据Squirrel文档说明,target folder 属性需要设置为lib/net45,否则并没有用;<iconUrl>标签用来制定未来的exe的icon。

    5.用下面的命令创建一个nuget包,

    nuget pack Package.nuspec

    如下图:

    之后在目录中会出现这个包

    命名规则就是<my_app_name>.<version>.nupkg

     

    创建安装程序

     

    把应用程序打包成nuget包之后,就可以用squirrel创建一个安装程序了。在根目录打开命令行,执行以下命令:

    squirrel --releasify <my_app_name>.<version>.nupkg

    这个时候命令行中没有任何提示。但是别慌,编译一段时间后程序会创建一个release文件夹,里面有三个文件,nuget包,RELEASES 文件和安装文件Setup.exe。如下图:

    如果没有出现这三个文件,可以查看目录中的SquirrelSetup.log,根据里面的报错,来进行调试。

    注意上面这条squirrel 命令,可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。使用Squirrel --help可以查看更多帮助

     

    发布应用和安装应用

    把上一步生成的setup.exe发送给想要安装这个应用的用户,就可以了。

    最终应用会被安装在C:UsersAdministratorAppDataLocal[appname] 文件夹中,注意Squirrel 的日志文件也存在目录中,调试安装问题的时候非常有用。

    双击我们的setup.exe进行安装app的测试,如果中途有任何出错,在

    C:UsersAdministratorAppDataLocalSquirrelTemp 里面可以看到安装日志。如下图:

     

    安装之后打开C:UsersAdministratorAppDataLocal 目录,可以看到app安装在这里,如下图:

    自动创建快捷方式

    进入我们安装之后的文件夹,命令行进入C:UsersAdministratorAppDataLocal[your appname],执行 Update.exe --help ,可以看到

     

    不知道从上图你有没有得到什么提示,反正我发现了,在命令行手动创建快捷方式的命令是Update.exe --createshortcut electronelectron.exe -i  [your ico toute]app.ico

    所以,如果我们想让应用在安装过程中静默地创建好快捷方式,那就需要在app的安装之后相反设法执行这句代码。

    因为我们的.exe会在安装之后自动打开程序,所以我在程序的入口main.js,添加sqruieel事件的监听就好了。如下图:

    我顺便把程序卸载时,删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听,但是这两个事件,我还没有进行测试。

    更新应用

    其实我一直很想做增量更新,在这里我的更新方法有两个,第一是在程序的入口添加js,发送请求到服务器,拉取更改文件进行本地替换,但是如果是node_module依赖包的更改,这个方法并不可行。第二个方法比较安全而且快捷通过发布一个版本号不同的exe,如下:1.在这个创建安装程序的步骤2中,我们把程序代码都复制到了这个文件夹里面,如下图:

     

    如果后续我们的程序要进行更新,首先我们需要把更改的文件直接复制替换到这个文件夹。

    2.打开Package.nuspec,编辑version标签

     

    3.参考本文种中创建安装程序部分的步骤2-4,重新生成setup.exe,发布应用。

     

    通过执行setip.exe安装,程序会自动删除之前的应用,但是我并不清楚,sqruieel 是进行了增量替换,还是将之前的整个应用进行删除,再重新安装。

    创建自定义安装包

    在上一步,我们已经把自己的exe发布出来了,但是如果没有自定义名字跟icon,好像还不够酷,所以我们需要创建自定义的安装文件。

    1.下载安装 Resource Hacker

    2.打开这个项目目录,在electron.exe上面右键

    出现菜单,点击 Open using Rescource Hacker。

    3.Resource Hacker应用运行之后中,在以下界面中选择Icon,然后在工具栏里面选择Action,Replace Icon,如下图:

     

    然后选择自己想要替换的.ico文件就好

     

    4.这其实并不够,我们还需要更换exe里面的版本信息,打开Version Info,把FileDescription和ProductName改成我们自己的项目名称,最好把SquirrelAwareVersion也更改一下,毕竟是版本号。

    5.做完这些之后,我们需要按照之前的步骤,在命令行中输入

    nuget pack Package.nuspec

    重新生成nuget包,然后再使用

     squirrel --releasify <my_app_name>.<version>.nupkg 命令创建安装文件。

    6.打开之后生成的releases文件夹,参考本文种中创建安装程序部分的步骤2-4,对setup.exe进行自定义。

     

    最后,一个可以自动更新又安装便捷,还有我们自己的酷酷的图标跟名字的应用就生成拉!

  • 相关阅读:
    PouchDB:一款受CouchDB启发的离线Web数据库
    如何使用JPA注解映射枚举类型
    重新排列参数
    sql不同数据处理方式完成同一处理结果对日志增长的影响
    那些让我念念不忘的 Firefox 扩展
    Linux现可运行于Windows Azure上
    Vector Fabrics推出多核软件优化工具Pareon
    分解公式 sql
    sql树形数据生成xml
    Microsoft .NET终于提供了一个通用的Zip库
  • 原文地址:https://www.cnblogs.com/SamLXW/p/6065936.html
Copyright © 2011-2022 走看看