使用Squirrel创建基于Electron开发的Windows 应用安装包-程序员宅基地

技术标签: 操作系统  json  

我们把自己开发的Electron应用发布之前,需要把app打包成简单的安装包,这样app更容易被获取,以此来发布我们的应用。我们可以参考Wix或其他的安装程序,但是对于Electron应用更好的打包程序是Squirrel。毕竟某些著名的Visual Studio Code 和Slack 的客户端应用就是用这个框架来打包和更新的。现在我来告诉你怎么创建一个基于Electron的windows应用。

Electron 和 squirrel 的更新非常快,我们可以到 

http://electron.atom.io/docs/v0.36.8/api/auto-updater/ 和 https://github.com/atom/grunt-electron-installer 

获取更多完成以下任务的信息。

 

设置阶段

如果你是一个Electron新玩家,看看我之前的文章《Electron入门》

 

在项目根目录

创建一个Staging文件夹,用来存放创建发布应用的工具和文件。接着,在这里下载squirrel.windows二进制文件https://github.com/Squirrel/Squirrel.Windows/releases,在这篇文章中,Squirrel.Windows 1.0 Preview 2 是当前版本,如果版本有更新,可能需要调整一些步骤。复制文件然后放到刚才创建的Staging文件夹里面,最后文件夹结构如下。

 

 

充分准备完我们就可以开始了!

 

在Eletron 中处理 squirrel 事件

如果你看一下 eletron.exe里面的版本信息,你可以在版本信息里面看到一个设置版本标志,标明可执行的 squirrel 版本。

 

这个可执行文件,在 electron 安装,更新,卸载,删除的时候通知 squirrel 怎么处理这些squirrel 事件 。事实上squirrel 并没有很好的参考文档,我花了一段时间才理解Windows的参考文档,但是有了这个版本标志,就可以传递任务信息比如给app创建快捷方式,通过这个来更改squirrel的默认行为。

 

当squirrel 运行的时候,就会执行 “Squirrel Aware”可执行文件,去监听 传递过来的作为事件标志的参数。这些事件参数必须在程序的入口就被处理,然后立即结束程序。就是说,在electron应用中,我们需要更改main.js这个文件来处理这些事件。在main.js的开头,其他代码调用之前,添加这段代码:

var app = require('app');

var path = require('path');

var cp = require('child_process');

 

var handleSquirrelEvent = function() {

   if (process.platform != 'win32') {

      return false;

   }

 

   function executeSquirrelCommand(args, done) {

      var updateDotExe = path.resolve(path.dirname(process.execPath), 

         '..', 'update.exe');

      var child = cp.spawn(updateDotExe, args, { detached: true });

      child.on('close', function(code) {

         done();

      });

   };

 

   function install(done) {

      var target = path.basename(process.execPath);

      executeSquirrelCommand(["--createShortcut", target], done);

   };

 

   function uninstall(done) {

      var target = path.basename(process.execPath);

      executeSquirrelCommand(["--removeShortcut", target], done);

   };

 

   var squirrelEvent = process.argv[1];

   switch (squirrelEvent) {

      case '--squirrel-install':

         install(app.quit);

         return true;

      case '--squirrel-updated':

         install(app.quit);

         return true;

      case '--squirrel-obsolete':

         app.quit();

         return true;

      case '--squirrel-uninstall':

         uninstall(app.quit);

         return true;

   }

 

   return false;

};

 

if (handleSquirrelEvent()) {

   return;

}

 

以上这段代码,用来在安装和更新时给执行文件添加快捷方式,并且在删除和卸载应用的时候自动删除快捷方式。Squirrel 的更新执行程序Update.exe会执行这些操作,也可以在这里给其他的事件添加快捷方式,比如,Visual Studio Code添加了注册表值,当你右键单击一个文件时,可以选择用Visual Studio Code打开。 

 

Electron 介绍

更新:请仔细阅读这个部分,虽然这里很多内容都可以用electron-packager 包来完成。看我的简短文章  《使用Electron-Packager来打包Electron App》      然后再回到这篇文章中。需要注意之后在这个文章中,你需要调整 .nuspec 这个文件里面<file>标签,把路径正确地指到 你的electron包。

如果你用默认的electron.exe安装自己的app,app的快捷方式和来源信息就跟之前下载的Electron开发包一样。其实需要更改app名字和来源说明,以此来声明这是我们自己的app。同时Squirrel也使用这些资源去创建快捷方式。查看这里的文档获取更多关于Squirrel命名规则的相关信息。

如果你想修改执行文件的话,到这个目录

<project_folder>/node_modules/electron-prebuilt/dist/electron.exe 把文件复制黏贴到相同目录并且重命名 yourapp.exe就ok。

 

在打包过程中,credit.exe和squirrel可以同时使用,credit.exe用来更改可执行文件的icon和版本信息。我发现跟着我这篇文章的方向走,使用Resource Hacker,会比较容易一些:《如果更改.exe文件的icon》。如果你需要一个.ico 的icon文件来测试的话可以用以下这个免费的资源。

http://www.wangjiewen.com/setup.ico

当你编辑icon和版本信息的时候,对squirrel安装程序来说这个非常重要,在Resource Hacker保存更改后,它会创建一个 <your_app_ame>_original.exe。如果你想在相同的目录中使用electron.exe,就删除<your_app_ame>_original.exe这个文件。注意:如果进行这些更改,windows资源管理器可能不会把当前这个icon关联到你新的exe,这没关系,别慌。

 

创建Nuget 包

 

正如上述, Squirrel.Windows就是用nuget构建的。我们需要把文件打包成一个Nuget 包,然后使用squirrel 来创建一个安装文件。先在项目根目录里面放一个nuget.exe,通过命令行进入该目录,执行以下命令:

nuget spec

之后会创建一个默认配置的Package.nuspec文件,在编辑器中打开这个文件进行编辑,像这样:

 

<?xml version="1.0"?>

<package >

  <metadata>

    <id>Package</id>

    <version>1.0.0</version>

    <authors>Administrator</authors>

    <owners>Administrator</owners>

    <licenseUrl>http://LICENSE_URL_HERE_OR_DELETE_THIS_LINE</licenseUrl>

    <projectUrl>http://PROJECT_URL_HERE_OR_DELETE_THIS_LINE</projectUrl>

    <iconUrl>http://ICON_URL_HERE_OR_DELETE_THIS_LINE</iconUrl>

    <requireLicenseAcceptance>false</requireLicenseAcceptance>

    <description>Package description</description>

    <releaseNotes>Summary of changes made in this release of the package.</releaseNotes>

    <copyright>Copyright 2016</copyright>

    <tags>Tag1 Tag2</tags>

    <dependencies>

      <dependency id="SampleDependency" version="1.0" />

    </dependencies>

  </metadata>

</package>

 

 

点击 nuspec reference  查看更多关于创建Package.nuspec的信息。

注意

1. 根据Squirrel文档说明,target folder 属性需要设置为lib/net45,否则并没有用。

2. 再三确认<dependencies> 标签里面没有依赖。

3. 更多注意事项查看文档:

https://github.com/Squirrel/Squirrel.Windows/blob/master/docs/getting-started.md 

4.  <description> 标签和<iconUrl>标签用来在windows上注册应用,当安装,删除,或者卸载应用的时候,会出现在windows的对话框上。

5. 我们能成功执行electron.exe ,是因为这个可执行文件就在dist 目录下面。如果放在其他地方,记得把文件路径加到file标签上。

6. 如果node_modules目录不在app目录里面,也要添加进去。

 

接着,用下面的命令创建一个nuget包。

nuget pack Package.nuspec

之后在根目录会出现这个nuget包<my_app_name>.<version>.nupkg。

 

创建安装程序

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

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

编译一段时间后程序会创建一个Release文件夹,里面有三个文件,nuget包,RELEASES 文件和安装文件Setup.exe。把这三个文件发送给想要安装这个应用的用户就可以了。注意上面这条命令,也可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。

在本地机器执行setup.exe,Squirrel 在启动app之后会快速执行,并在桌上和开始菜单栏中创建好快捷方式。应用会被安装在C:\Users\Administrator\AppData\Local\文件夹中,注意Squirrel 的日志文件也存在目录中,调试安装问题的时候非常有用。

如果要卸载这个应用,可以利用Windows “程序和功能”的对话窗口来卸载,这样确保添加在开始菜单和桌面的快捷方式得以移除。

更新

 

现在用户可以使用你的安装程序来安装文件了,有了Squirrel 会让更新应用这件事情变得很简单。跟随下面的步骤来创建一个更新程序:

 

 

1.把之前用来创建安装包的文件夹复制一份,打开。

2.更改Package.nuspec这个文件,在<version>标签中把版本数字提高到当前匹配的版本。同时也应该考虑同时更新可执行文件的版本信息。

3.回到命令行创建 .nupkg 包

4.在用 nupkg 包 创建一个新的安装文件

5.将发布文件夹里面的内容分发给用户

 

 

最终没用的旧版本的包会被删除,同时不需要发布旧的nuget包,发布setup.exe,RELEASES文件和最新的nuget包就好了。当执行新的exe时,旧的应用文件会被替换,我猜想使用这种更新方法来发布新版本应用,会比直接安装一个新版本更快。

自动更新

上面的方法是通过发布setup文件来更新应用的。但是,我们可以设置的app,让squirrel在后台执行更新程序,打开main.js,将下列代码写入,用来监听squirrel事件。

var updateDotExe = path.resolve(path.dirname(process.execPath), 

 '..', 'update.exe');

var child = cp.spawn(updateDotExe, 

    ["--update", "http://mywebsite.com/releases"], { detached: true });

child.on('close', function(code) {

    // anything you need to do when update is done.

});

 

使用上面的代码,如果Squirrel 在更新url中发现更新,就会自动在后台下载更新,安装。下一次启动应用的时候,就是最新的版本。这肯定比加一个“检查更新”按钮要好,或者弹出一个提示框让用户来决定是否更新。以下是一个如何在主线程运行自动更新程序的例子。

var dialog = require('dialog');

var updateDotExe = path.resolve(path.dirname(process.execPath), 

 '..', 'update.exe');

var child = cp.spawn(updateDotExe, ["--download", "http://mywebsite.com/releases"], { detached: true });

var stdout = '';

child.stdout.setEncoding('utf8');

var jsonStarted = false;

child.stdout.on('data', function (d) {

 if (!jsonStarted && d.startsWith("{")) {

  jsonStarted = true;

  return stdout += d; 

 }  

 if (!jsonStarted) {

  return;

 } 

 return stdout += d; 

});

child.on('close', function(code) {

 if (stdout.length > 0) {

  var data = JSON.parse(stdout); 

  dialog.showMessageBox({ message: "Update to version " + data.futureVersion + "?",

   buttons: ["Update", "Not Now"] }, function (choice) {

    if (choice === 0) { 

     var child = cp.spawn(updateDotExe, ["--update", "http://mywebsite.com/releases"], { detached: true });

     dialog.showMessageBox({ message: "The update should be available next time you start the application.",

      buttons: ["Awesome"] });

    }

  });

 }

});

当然可能你想要运行安装程序然后自动重启应用,不得不说这是一个简单的例子。

附加资源

我一直存在一些疑问,关于怎么使用squirrel是怎么去更新一个app的。最难的部分在这篇文章中已经为你解答,但是看一下windows 参考文档,会更完整。

这里: https://github.com/Squirrel/Squirrel.Windows/tree/master/docs

这里有一个更好的关于squirrel创建.net应用的视频, 

http://channel9.msdn.com/Events/dotnetConf/2015/Squirrel-for-Windows-installing-NET-apps-the-way-it-should-be 

有一些关于electron app的概念 探讨,比如有人提出使用 Squirrel.Windows 来创建基于Electron的Slack 应用。

如果你正在用grunt 这里有一个工具 

https://github.com/atom/grunt-electron-installer  用来给 electron app创建squirrel安装包。这个我没有试过,但是我猜比本文中一步一步来做的方法要好。

转载于:https://www.cnblogs.com/SamLXW/p/6065958.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a13311629770/article/details/102052770

智能推荐

oracle 12c 集群安装后的检查_12c查看crs状态-程序员宅基地

文章浏览阅读1.6k次。安装配置gi、安装数据库软件、dbca建库见下:http://blog.csdn.net/kadwf123/article/details/784299611、检查集群节点及状态:[root@rac2 ~]# olsnodes -srac1 Activerac2 Activerac3 Activerac4 Active[root@rac2 ~]_12c查看crs状态

解决jupyter notebook无法找到虚拟环境的问题_jupyter没有pytorch环境-程序员宅基地

文章浏览阅读1.3w次,点赞45次,收藏99次。我个人用的是anaconda3的一个python集成环境,自带jupyter notebook,但在我打开jupyter notebook界面后,却找不到对应的虚拟环境,原来是jupyter notebook只是通用于下载anaconda时自带的环境,其他环境要想使用必须手动下载一些库:1.首先进入到自己创建的虚拟环境(pytorch是虚拟环境的名字)activate pytorch2.在该环境下下载这个库conda install ipykernelconda install nb__jupyter没有pytorch环境

国内安装scoop的保姆教程_scoop-cn-程序员宅基地

文章浏览阅读5.2k次,点赞19次,收藏28次。选择scoop纯属意外,也是无奈,因为电脑用户被锁了管理员权限,所有exe安装程序都无法安装,只可以用绿色软件,最后被我发现scoop,省去了到处下载XXX绿色版的烦恼,当然scoop里需要管理员权限的软件也跟我无缘了(譬如everything)。推荐添加dorado这个bucket镜像,里面很多中文软件,但是部分国外的软件下载地址在github,可能无法下载。以上两个是官方bucket的国内镜像,所有软件建议优先从这里下载。上面可以看到很多bucket以及软件数。如果官网登陆不了可以试一下以下方式。_scoop-cn

Element ui colorpicker在Vue中的使用_vue el-color-picker-程序员宅基地

文章浏览阅读4.5k次,点赞2次,收藏3次。首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了,例如:这里的:sty..._vue el-color-picker

迅为iTOP-4412精英版之烧写内核移植后的镜像_exynos 4412 刷机-程序员宅基地

文章浏览阅读640次。基于芯片日益增长的问题,所以内核开发者们引入了新的方法,就是在内核中只保留函数,而数据则不包含,由用户(应用程序员)自己把数据按照规定的格式编写,并放在约定的地方,为了不占用过多的内存,还要求数据以根精简的方式编写。boot启动时,传参给内核,告诉内核设备树文件和kernel的位置,内核启动时根据地址去找到设备树文件,再利用专用的编译器去反编译dtb文件,将dtb还原成数据结构,以供驱动的函数去调用。firmware是三星的一个固件的设备信息,因为找不到固件,所以内核启动不成功。_exynos 4412 刷机

Linux系统配置jdk_linux配置jdk-程序员宅基地

文章浏览阅读2w次,点赞24次,收藏42次。Linux系统配置jdkLinux学习教程,Linux入门教程(超详细)_linux配置jdk

随便推点

matlab(4):特殊符号的输入_matlab微米怎么输入-程序员宅基地

文章浏览阅读3.3k次,点赞5次,收藏19次。xlabel('\delta');ylabel('AUC');具体符号的对照表参照下图:_matlab微米怎么输入

C语言程序设计-文件(打开与关闭、顺序、二进制读写)-程序员宅基地

文章浏览阅读119次。顺序读写指的是按照文件中数据的顺序进行读取或写入。对于文本文件,可以使用fgets、fputs、fscanf、fprintf等函数进行顺序读写。在C语言中,对文件的操作通常涉及文件的打开、读写以及关闭。文件的打开使用fopen函数,而关闭则使用fclose函数。在C语言中,可以使用fread和fwrite函数进行二进制读写。‍ Biaoge 于2024-03-09 23:51发布 阅读量:7 ️文章类型:【 C语言程序设计 】在C语言中,用于打开文件的函数是____,用于关闭文件的函数是____。

Touchdesigner自学笔记之三_touchdesigner怎么让一个模型跟着鼠标移动-程序员宅基地

文章浏览阅读3.4k次,点赞2次,收藏13次。跟随鼠标移动的粒子以grid(SOP)为partical(SOP)的资源模板,调整后连接【Geo组合+point spirit(MAT)】,在连接【feedback组合】适当调整。影响粒子动态的节点【metaball(SOP)+force(SOP)】添加mouse in(CHOP)鼠标位置到metaball的坐标,实现鼠标影响。..._touchdesigner怎么让一个模型跟着鼠标移动

【附源码】基于java的校园停车场管理系统的设计与实现61m0e9计算机毕设SSM_基于java技术的停车场管理系统实现与设计-程序员宅基地

文章浏览阅读178次。项目运行环境配置:Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。项目技术:Springboot + mybatis + Maven +mysql5.7或8.0+html+css+js等等组成,B/S模式 + Maven管理等等。环境需要1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。_基于java技术的停车场管理系统实现与设计

Android系统播放器MediaPlayer源码分析_android多媒体播放源码分析 时序图-程序员宅基地

文章浏览阅读3.5k次。前言对于MediaPlayer播放器的源码分析内容相对来说比较多,会从Java-&amp;amp;gt;Jni-&amp;amp;gt;C/C++慢慢分析,后面会慢慢更新。另外,博客只作为自己学习记录的一种方式,对于其他的不过多的评论。MediaPlayerDemopublic class MainActivity extends AppCompatActivity implements SurfaceHolder.Cal..._android多媒体播放源码分析 时序图

java 数据结构与算法 ——快速排序法-程序员宅基地

文章浏览阅读2.4k次,点赞41次,收藏13次。java 数据结构与算法 ——快速排序法_快速排序法