使用Squirrel创建基于Electron开发的Windows 应用安装包
我们把自己开发的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安装包。这个我没有试过,但是我猜比本文中一步一步来做的方法要好。
使用Squirrel创建基于Electron开发的Windows 应用安装包的更多相关文章
- Electron实战:创建ELectron开发的window应用安装包
前言:研究electron自动更新的时候,在electron的官方文档auto-updater 中,提到了在几个平台mac,Linux,windows下electron 的自动更新方法,其中winds ...
- C# 制作Windows服务安装包
C# 制作Windows服务安装包 这两天公司要用C#写一个windows服务,做成安装安装包.制作的过程中遇到了一些问题,写完之后总结一下.如果以后在用到的话可以可以参考一下,而且由于原来没有做 ...
- VS2010下创建的VB.NET项目打包发布安装包的流程
VS2010下创建的VB.NET项目打包发布安装包的流程 参考:http://blog.csdn.net/liuyanlinglanq/article/details/8609675 关于relea ...
- 关于ArcGis的二次开发-基于ArcEngine10.2(内有安装包)
网上很少有arcgis engine10.2的安装包,在这里我把安装包链接附上,是百度云,有需要的可以自己下--http://pan.baidu.com/s/1mhIhYYG 顺带着把arcgis d ...
- 微软MSDN订阅用户已可提前手工下载Windows 10安装包
在Windows 10发布之夜,当全世界都在翘首以盼Windows 10免费发布推送的到来,MSDN订阅用户可以立马享受一项令人项目的特殊待遇:手工下载Windows 10完整安装包+免费使用的激活密 ...
- 使用duilib开发简单的Window安装包
一.具体思路 安装过程:安装包的制作包括资源文件的打包,资源文件打包到安装包exe中,安装的时候需要从exe中提取出对应的资源文件, 然后解压文件安装到指定目录,然后就是对安装的可执行程序进行注册表的 ...
- windows一键安装包的升级禅道
如果你现在使用的是windows xampp 集成运行环境,那么请按照下面的步骤进行: 一.升级步骤: 下载新的源代码包(zip格式).(注意,不是.exe的集成运行环境,如果你下载这个,会造成数据被 ...
- 构建基于Electron开发的软件遇到的问题
构建pdman时,报了好些错. 主要还是网络问题和版本不一致导致的. 前提 npm设置淘宝源,自行搜索. 版本 上面是官方要求的node环境. 需要首先安装nvm, brew install nvm ...
- 如何制作windows服务安装包
以下转自:http://blog.csdn.net/chainan1988/article/details/7087006 Window服务的安装有两个方式: 一.命令安装 通过命令 ...
随机推荐
- 黑马----JAVA内部类
黑马程序员:Java培训.Android培训.iOS培训..Net培训 黑马程序员--JAVA内部类 一.内部类分为显式内部类和匿名内部类. 二.显式内部类 1.即显式声明的内部类,它有类名. 2.显 ...
- C语言指针,你还觉得难吗?
在研究式学习-c语言程序设计指针式这样介绍的: 内存中存储变量的第一个单元的地址 称为指针,存放指针的变量称为指针变量: 变量的访问方式有: 直接访问方式:按变量名查找其首地址 间接访问方式:通过指针 ...
- Redis的简介与安装(windows)
1.简介 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串). list(链表).set(集合).zset(sorte ...
- CSS3 transition效果 360度旋转 旋转放大 放大 移动
效果一:360°旋转 修改rotate(旋转度数) * { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-o ...
- (实用篇)微信支付扫码支付php版
本文实例为大家分享了php微信扫码支付源码,供大家参考,具体内容如下 代码中包含四个文件createUrl.php.ArrayToXML.php.returnGoodsUrl.php.notifyUr ...
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- linux软连接和硬链接
1.软连接(符号连接)创建方法(相当于windows的快捷方式) # ln -s 原文件 连接文件(最好使用绝对路径) 特点: 1.软连接文件是777的权限,而且很小很小: 2.可以跨分区(文件系统) ...
- 帝国时代II 高清版 steam 4.4 字体替换 微软雅黑
其实默认的中文字体算是中规中矩吧,但是我并不喜欢 从昨天开始就想着换 于是我就开始搜索帝国时代2的游戏目录的资源,马上就锁定到了\Steam\steamapps\common\Age2HD\resou ...
- 转载list
Linux系统下安装rz/sz命令及使用说明 http://blog.csdn.net/kobejayandy/article/details/13291655
- mysql学习之触发器
在借阅表和读者表当中存在着这样的关系,如果在借阅表当中添加一条数据,读者表当中对应的累计借书字段就自增1,如果在借阅表当中删除一条数据,读者表当中对应的累计借书字段就自减1,实现本功能的方法如下. 1 ...