Electron实战:创建ELectron开发的window应用安装包
前言:研究electron自动更新的时候,在electron的官方文档auto-updater 中,提到了在几个平台mac,Linux,windows下electron 的自动更新方法,其中windsow平台上面,文章中建议先用grunt-electron-installer 模块来创建windows安装包,grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具, 一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下,用Squirrel创建electron的.exe安装包。
创建nuget包
我们的方法是使用nuget工具创建Nuget包,再使用Squirrel工具创建.exe。
1.下载squirrel.exe和nuget.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:\Users\Administrator\AppData\Local\[appname] 文件夹中,注意Squirrel 的日志文件也存在目录中,调试安装问题的时候非常有用。
双击我们的setup.exe进行安装app的测试,如果中途有任何出错,在
C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安装日志。如下图:
安装之后打开C:\Users\Administrator\AppData\Local 目录,可以看到app安装在这里,如下图:
自动创建快捷方式
进入我们安装之后的文件夹,命令行进入C:\Users\Administrator\AppData\Local\[your appname],执行 Update.exe --help ,可以看到
不知道从上图你有没有得到什么提示,反正我发现了,在命令行手动创建快捷方式的命令是Update.exe --createshortcut electron\electron.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进行自定义。
最后,一个可以自动更新又安装便捷,还有我们自己的酷酷的图标跟名字的应用就生成拉!
Electron实战:创建ELectron开发的window应用安装包的更多相关文章
- 使用Squirrel创建基于Electron开发的Windows 应用安装包
我们把自己开发的Electron应用发布之前,需要把app打包成简单的安装包,这样app更容易被获取,以此来发布我们的应用.我们可以参考Wix或其他的安装程序,但是对于Electron应用更好的打包程 ...
- 如何创建 Visual Studio 2017 RC 离线安装包
创建 Visual Studio 的离线安装计划 首先下载相应版本的可执行文件,例如:vs_community.exe.vs_enterprise.exe 或 vs_professional 在 cm ...
- ANDROID 开发,安装离线安装包的下载地址及安装方法。
前言: 建议采用离线安装的方法安装SDK包,在线的方式实在是.....多了不解释. 下面说一下离线安装的方法: 1.下载地址:http://pan.baidu.com/s/1sjuJwYD#path= ...
- [转] electron实战开发详细流程
[From] http://www.myk3.com/arc-8856.html 很久没有更新博客,人越来越懒了,唉 说好做的electron教程距离上次玩electron已经过去了好几个月了.. 这 ...
- electron教程(一): electron的安装和项目的创建
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...
- Electron 实战桌面计算器应用
前言 Electron 是一个搭建跨平台桌面应用的框架,仅仅使用 JavaScript.HTML 以及 CSS,即可快速而容易地搭建一个原生应用.这对于想要涉及其他领域的开发者来说是一个非常大的福利. ...
- 如何用Electron Js创建第一个应用Hello World
什么是Electron Node.js和Chromium的结合品.允许只使用HTML,CSS和JavaScript来开发跨平台桌面应用. 编写第一个Electron程序(Hello World) 在开 ...
- 第四章-使用本机文件对话框和帮助进程间沟通 | Electron实战
本章主要内容: 使用Electron的dialog模块实现一个本机打开文件对话框 促进主进程和渲染器进程之间的通信 将功能从主进程暴露给渲染器进程 使用Electron的remote模块从主进程导入功 ...
- 手把手教你创建electron+vue项目
electron可以结合前端的很多框架来进行快速的开发.在这里只讲一种electron结合vue并且使用前端的elementui来快速搭建一个项目页面. 第一步.创建electron 以管理员身份运行 ...
随机推荐
- PDF 补丁丁 0.4.2.1013 测试版发布:修复替换PDF文档字体等问题
新的测试版修复了若干问题,建议下载了旧测试版的用户更新.修复的问题列表: 替换PDF文档字体可能将字体宽度变成0. 书签编辑器在加载XML书签时不显示对应文档的预览. 自动生成书签功能复制文本筛选器后 ...
- PLSQL开发笔记和小结(转载)
***************************************** PLSQL基本结构 ***************************************** 基本数据 ...
- POJ 2184 01背包+负数处理
Cow Exhibition Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10200 Accepted: 3977 D ...
- Android 命令管理项目
今天介绍一下Android怎么用命令管理项目,用命令管理Android项目需要用到Android命令,首先介绍一下用Android命令创建新项目,打开命令提示窗口,导航到Android SDK 的to ...
- IEEE参考文献格式
IEEE参考文献格式 由于国外期刊参考文献与国内参考文献的格式有很大区别,其中最常用的参考文献为会议论文.书籍.期刊文献,所以特别在此记录说明,方便以后使用. 会议论文(Published Confe ...
- 《Java中方法的重写》
//方法的重写 /* 注意:方法的重写要遵循“两同两小一大”规则 “两同”即方法名相同.形参列表相同: “两小”(1)指的是子类方法返回值类型比父类方法的返回值类型更小或相等,[什么意思?] (2)子 ...
- js事件捕获,事件冒泡,事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...
- Linux内核分析——跟踪分析Linux内核的启动过程
万子惠 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程 实验部分 menu程序: cd LinuxKernel/ qemu -kernel linux-3.18.6/a ...
- 多线程、多进程、协程、缓存(memcache、redis)
本节内容: 线程: a:基本的使用: 创建线程: 1:方法 import threading def f1(x): print(x) if __name__=='__main__': t=thread ...
- mysql取代rand()的高效率随机读取方法
SELECT * FROM `table` AS t1 JOIN (SELECT ROUND(RAND() * (SELECT MAX(id) FROM `table`)) AS id) AS t2 ...