srcmini本文概述
如果要创建而不是基于Squirrel的安装程序, 而要创建MSI(Microsoft安装程序)安装程序, 请改用本教程。
作为开发人员, 你可能知道Linux具有软件包管理器, 因此开发人员不需要”需要”安装程序。开发人员只需要为发行版提供一个软件包, 然后每个发行版都有一种安装此软件包的方式, 这种方式可以在终端(apt-get)中或通过图形界面(例如Ubuntu软件中心。但是, Windows不是Linux。
几乎所有安装程序都是由工具创建的(例如WiX, Nsis, Inno Setup等)。在本文中, 你将学习如何使用electronic-winstaller模块为Windows创建Windows安装程序, 该模块使用Squirrel(Windows桌面应用程序的安装和更新框架)。
1.准备工作区
而且, 这并不意味着你应该清洁计算机。为了使本教程易于理解, 我们将在桌面上创建一个名为” electron-workspace”的文件夹, 该文件夹将包含在一个文件夹中, 该文件夹包含你的Electron Project的源代码：
在这种情况下, 该文件夹将位于C：\ Users \ sdkca \ Desktop \ electron-workspace, 并且电子项目的源代码将位于其中(myapp-source)。
2.安装Electron winstaller模块
现在, 我们需要安装将有助于我们创建安装程序的模块, 在这种情况下, 我们将使用electron-winstaller。该NPM模块使用Squirrel为Electron应用程序构建Windows安装程序。启动NodeJS命令提示符, 然后使用导航到工作区(请注意, 模块需要安装在工作区中, 而不是项目中)：
cd C:\Users\sdkca\Desktop\electron-workspace然后使用以下命令安装模块：
npm install electron-winstaller安装模块后, 我们的工作区现在将具有2个文件夹：
3.管理桌面快捷方式(安装, 更新和卸载事件)
可以安装的应用程序, 但是一旦关闭, 便找不到可执行文件来启动它, 这是没有用的。因此, 我们将使用电子松鼠启动模块, 它将帮助你实现我们的目标。它处理最常见的命令, 例如管理桌面快捷方式(安装事件, 更新事件和卸载事件)。
该模块需要安装在项目内部, 而不是工作空间中, 因此请使用NodeJS命令提示符导航到Electron项目的源代码文件夹, 在这种情况下, 我们将使用：
cd C:\Users\sdkca\Desktop\electron-workspace\myapp-source然后使用以下命令安装模块：
npm install electron-squirrel-startup安装模块后, 我们需要用一些代码来指导我们要做什么。我们将添加一些代码, 尤其是在Electron Project的main.js文件中。在文件的开头(在声明应用变量之后), 添加以下几行：
// Module to control application life. (this variable should already exist)
const app = electron.app
// this should be placed at top of main.js to handle setup events quickly
if (handleSquirrelEvent(app)) {
// squirrel event handled and app will exit in 1000ms, so don't do anything else
return;
}handleSquirrelEvent函数希望将app变量作为第一个参数, 可以将该函数添加到main.js文件的末尾：
注意
仅当应用程序在安装程序中时, 才会执行以下代码, 因此在你处理项目时不会执行此代码。
function handleSquirrelEvent(application) {
if (process.argv.length === 1) {
return false;
}
const ChildProcess = require('child_process');
const path = require('path');
const appFolder = path.resolve(process.execPath, '..');
const rootAtomFolder = path.resolve(appFolder, '..');
const updateDotExe = path.resolve(path.join(rootAtomFolder, 'Update.exe'));
const exeName = path.basename(process.execPath);
const spawn = function(command, args) {
let spawnedProcess, error;
try {
spawnedProcess = ChildProcess.spawn(command, args, {
detached: true
});
} catch (error) {}
return spawnedProcess;
};
const spawnUpdate = function(args) {
return spawn(updateDotExe, args);
};
const squirrelEvent = process.argv[1];
switch (squirrelEvent) {
case '--squirrel-install':
case '--squirrel-updated':
// Optionally do things such as:
// - Add your .exe to the PATH
// - Write to the registry for things like file associations and
// explorer context menus
// Install desktop and start menu shortcuts
spawnUpdate(['--createShortcut', exeName]);
setTimeout(application.quit, 1000);
return true;
case '--squirrel-uninstall':
// Undo anything you did in the --squirrel-install and
// --squirrel-updated handlers
// Remove desktop and start menu shortcuts
spawnUpdate(['--removeShortcut', exeName]);
setTimeout(application.quit, 1000);
return true;
case '--squirrel-obsolete':
// This is called on the outgoing version of your app before
// we update to the new version - it's the opposite of
// --squirrel-updated
application.quit();
return true;
}
};前面的代码应该处理在系统中安装新应用时发生的基本事情, 例如, 快捷方式将添加到”开始”菜单和桌面中, 并且在执行卸载程序时它将删除快捷方式, 此外, 它无需任何修改即可工作。如果需要, 可以随意添加更多代码。
4.构建你的应用
完成了完成已安装应用程序的基本任务所需的修改, 现在继续构建你的应用程序。我们假设你知道如何使用电子包装程序之类的工具来构建应用程序。如果不这样做, 请阅读以下有关如何在Windows中使用电子打包程序从你的应用程序创建发行版的文章。
在知道如何构建你的应用程序之后, 继续进行操作。导航到工作空间(以便在其中创建项目)：
cd C:\Users\sdkca\Desktop\electron-workspace\myapp-source并构建项目, 例如, 我们将使用以下命令构建项目：
electron-packager C:\Users\sdkca\Desktop\electron-workspace\myapp-source --platform=win32 --arch=x64 myapp-source-built这将在电子工作空间文件夹中创建具有以下结构的myapp-source-built-win32-x64文件夹：
5.从你的应用程序创建安装程序
构建项目后, 你可以从中创建安装程序。创建一个将在其中创建安装程序的文件夹, 特别是在我们的工作空间(C：\ Users \ sdkca \ Desktop \ electron-workspace)中, 并使用你想要的名称, 在这种情况下, 它将是myapp-source-built-installers。你不会触摸此文件夹, 因为安装程序将在下一步自动创建。在这一步, 你应该有4个文件夹(myapp-source-built-installers为空)：
现在创建一个脚本来创建我们的安装程序, 在电子工作区(C：\ Users \ sdkca \ Desktop \ electron-workspace)中创建build.js文件, 其中包含以下代码：
注意
如果你不习惯使用相对路径, 则可以在第一次尝试中使用绝对路径来了解正在发生的事情。
// C:\Users\sdkca\Desktop\electron-workspace\build.js
var electronInstaller = require('electron-winstaller');
// In this case, we can use relative paths
var settings = {
// Specify the folder where the built app is located
appDirectory: './myapp-source-built-win32-x64', // Specify the existing folder where
outputDirectory: './myapp-source-built-installers', // The name of the Author of the app (the name of your company)
authors: 'Our Code World Inc.', // The name of the executable of your built
exe: './myapp-source-built.exe'
};
resultPromise = electronInstaller.createWindowsInstaller(settings);
resultPromise.then(() => {
console.log("The installers of your application were succesfully created !");
}, (e) => {
console.log(`Well, sometimes you are not so lucky: ${e.message}`)
});注意
你可以在上一个脚本的设置中更改图标和其他属性。在此处检查所有受支持的选项。
要从你的应用程序构建安装程序, 只需执行此脚本即可。但是, 如果你发现此错误：
Component / @ Id属性的值” your-app-exe-name.exe”不是合法标识符。标识符可以包含ASCII字符A-Z, a-z, 数字, 下划线(_)或句点(。)。每个标识符必须以字母或下划线开头。
必须在/your-built-project/resources/app/package.json文件中编辑项目的name属性, 并删除或替换所有连字符(-符号), 例如, 如果package.json看起来像：
{
"name": "electron-quick-start"
}更改为：
{
"name": "electron_quick_start"
}如果你已经对此进行了验证, 请继续执行build.js脚本, 并使用NodeJS命令提示符导航到工作空间：
cd C:\Users\sdkca\Desktop\electron-workspace并执行脚本：
node build.js安装程序文件将被创建, 并且将花费一些时间。创建安装程序后, 你将在控制台中看到以下消息：
最后, 打开installers文件夹(在本例中为C：\ Users \ sdkca \ Desktop \ electron-workspace \ myapp-source-built-installers), 你会发现3个安装程序(msi安装程序, 可执行安装程序和nuGET软件包) )：
你可以尝试以管理员身份执行Setup.exe文件在本地安装你的应用程序。然后, 迷你安装程序将在你的系统上安装该应用程序, 你将能够在Windows的开始菜单中以及桌面的快捷方式中看到它：
注意
如果你在build.js脚本的loadingGif选项中提供了要在安装过程中显示的gif文件的路径, 则可以更改设置加载动画。
请注意, 可执行文件的名称, 描述和其他属性可以在应用程序的package.json和winstaller模块的选项中进行更改, 有关更多信息, 请访问存储库以查看文档。
重要笔记
对于开发或内部使用, 创建没有签名的安装程序是可以的, 但是对于生产应用程序, 你需要对应用程序进行签名。 Internet Explorer的SmartScreen筛选器将阻止你的应用程序下载, 并且许多防病毒供应商都将你的应用程序视为恶意软件, 除非你获得有效的证书。
任何对” Authenticode代码签名”有效的证书都可以在这里使用, 但是如果你获得了正确的代码证书, 也可以选择加入Windows错误报告。此MSDN页面包含有关在何处获得WER兼容证书的最新链接。为此, “标准代码签名”证书就足够了。
编码愉快！
评论前必须登录！
注册