electron开发桌面程序问题

前言：研究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。下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows（需要有vitualstudio环境）。2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe放进去，在文件夹放入我们未打包的electron应用，如下图：4.在my-build根目录中，打开命令行执行nugetspec如下图：生成spec包初始文件5.编辑器打开Package.nuspec，按照自己项目的需要编辑这个文件，如下图：这里需要注意：根据Squirrel文档说明，targetfolder属性需要设置为lib/net45，否则并没有用；标签用来制定未来的exe的icon。5.用下面的命令创建一个nuget包，nugetpackPackage.nuspec如下图：之后在目录中会出现这个包命名规则就是..nupkg创建安装程序把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：squirrel--releasify..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\[yourappname]，执行Update.exe--help，可以看到不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷州友方式的命令是Update.exe--createshortcutelectron\electron.exe-i[youricotoute]\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，好像还不够酷，所以我们需要创建自定义的安装文件。下载安装ResourceHacker2.打开这个项目目录，在electron.exe上面右键出现菜单，点击OpenusingRescourceHacker。3.ResourceHacker应用运行之后中，在以下界面中选择Icon，然后在工具栏里面选择Action，ReplaceIcon，如下图：然后选择自己想要替换的.ico文件就好4.这其实并不够，我们还需要更换exe里面的版本信息，打开VersionInfo，把FileDescription和ProductName改成我们自己的项目名称，最好把SquirrelAwareVersion也更改一下，毕竟是版本号。5.做完这些之后，我们需要按照之前的步骤，在命令行中输入nugetpackPackage.nuspec重新生成nuget包，然后再使用squirrel--releasify..nupkg命令创建安装文件。6.打开之后生成的releases文件夹，参考本文种中创建安装程序部分的步骤2-4，对setup.exe进行自定义。最后，一个可以自动更新又安装便捷，还有我们自己的酷酷的图标跟名字的应用就生成拉！

建瞎闭哗议您查下您的磨行HP相关程序，是否开启了开机自动更新功能，若开启了自动更新，请将自动更新功能关闭，应就OK了 。

若没有，则请检查下进程，看是否有可疑的进程，先用360安全卫士检查下电脑，看是否有恶意软件，然后用杀毒软件查杀下态氏病毒，检查下电脑有没有中病毒或木马之类程序 。

若问题依然存在，那可能要重新维护下系统了。

学习electron还没有太久，在项目上进一步接触打包和自动更新后也踩了好多坑，百度了很多的资料，我这里对遇到的问题整理一下，避免后续想学习electron的同学再次让激踩坑。

参考： 问题解决的参考文档

不同的页面引入报不一样的错，哪敬如下：

renderer进程引入electron （app.vue）:

错误显示是node_modules/electron/index.js文件中引入fs.existsSync语句造成的

renderer进程引入electron （index.html页面）:

百度查资料得知原因是：

(1)、首先在渲染进程属于浏览器端，没有集成Node的环境，所以类似 fs 这样的Node的基础包是不可以使用。

(2)、因为没有Node环境，所以这种属于node api的require关键词是不可以使用的。

(3)、electron5.x的node集成环境默认是关闭的，这之前的版本是默认开启的

根据百度提供的方案是在主进程中集成 Nodejs，也就是添加配置nodeIntegration: true

通过使用window.require代替require来引入electron，因为前者不会被webpack编译，在渲染进程require关键字就是表示node模块的系统

渲染进程：

主进程main.js:

配置好重新启动前端工程会之前的错误没有了，但是出现 window.require is not a function .错误

由此看出直接使用window.require代替require是不可行的,接着百度查找资料，找到一种解决方案：

2.1新建preload.js预处理文件

2.2在main进程中添加preload配置项,使用了预加载之后,即使nodeIntegration为false,也可以使用Node API访问到ipcRenderer

2.3 渲染进程种引入electron中的ipcRenderer

把以上三个步骤引入之后重启前端工程,又发现报错

不用担心，这个其实是因为工程是在本地浏览器运行的，识别不了electron中的api,只要保证在electron应用程序下运行就不会报错。我们一般开发都是在本地浏览器调试，有红色报错提示的话看着还是比较碍眼，所李滑慎以添加一个 is-electron来判断,处于electron环境中才执行

npm install --save is-electron

---