记一次使用 Electron 打包在线网页

分类：Electron作者：编程之家用户

安装环境

  • electron + electron-packager
  • Powershell 3 或 3 以上版本
  • NET 4.5 或 4.5 以上版本
  • Inno Setup 5，用于制作安装包

安装全局环境

执行命令 npm install electron -g 实现全局安装 Electron

将线上页面打包成 exe 格式

准备应用图标

新建一个文件夹，并准备一个 App 图标，图标格式为 ico

填写 package.json 和 main.js

package.json 的模板如下，主要修改的是 name、version、description 等

{
  "name": "envProtection",
  "version": "1.0.0",
  "description": "环保智慧化管理系统",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": "electron-packager . 环保智慧化管理系统 --win --out ../envp --arch=x64 --icon=envprotection.ico --app-version=1.0.0 --electron-version=9.4.1  --overwrite"
  },
  "author": "jmld",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.4.11",
    "electron-package": "^0.1.0",
    "electron-packager": "^15.2.0"
  }
}

main.js的模板如下，主要修改的是win.loadURL()里面的地址即可

const electron = require('electron');
const Menu = electron.Menu
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;
 
// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;
 
function createWindow() {
  // 隐藏菜单栏
  //Menu.setApplicationMenu(null);
  
  // 创建一个新的浏览器窗口
  win = new BrowserWindow({width: 1366, height: 768, show: false});

  win.setAutoHideMenuBar(true);
  // 并且装载应用的index.html页面
  win.loadURL(`http://www.kmhzhxt.com/`);
  // 打开开发工具页面
  //win.webContents.openDevTools();
 
  // 当窗口关闭时调用的方法
  win.on('closed', () => {
    // 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
    // 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
    win = null;
  });
  // 加载完成后弹出登录框
  win.once('ready-to-show', () => {
    win.setTitle("环保智慧化管理系统");
    win.show();
  });
}
 
// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
}); */
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
  // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
app.on('activate', () => {
  // 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
  // 窗口打开
  if (win === null) {
    createWindow();
  }
});
 
// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。

打包应用

在文件夹处打开命令行，先安装打包环境到该文件夹，输入如下命令即可。
npm install electron -D 和 npm install electron-package -D

接着，输入如下命令，即可打包一个 demo 的客户端。

electron-packager . app --win --out ./appBox --arch=ia32 --app-version 1.0.0 --icon=envprotection.ico --overwrite --ignore=node_modules

其中 --arch 为打包的架构，可选择x64和ia32两种；
这条命令的意思是 electron-packager .exe文件名称--win --out ./文件夹名称--arch=64位 --app-version版本号--icon=打包后文件的图标--每次调用覆盖文件--ignore=不打包的内容。

执行完成后，会在该目录下生成一个appBox目录，可根据具体需求修改内部的文件夹和应用名称，打开内部的 exe 文件来测试功能。

做成安装包形式

在安装完 Inno Setup 5 并设置好以管理员身份运行之后，直接在appBox目录的同级目录下生成一个打包用的iss文件，具体模板如下：

; 脚本由 Inno Setup 脚本向导 生成！
; 有关创建 Inno Setup 脚本文件的详细资料请查阅帮助文档！

#define MyAppName "环保管家智慧化管理系统"
#define MyAppVersion "1.0.0"
#define MyAppPublisher "广东科明昊环保科技有限公司"
#define MyAppURL "https://www.kmhzhxt.com/"
#define MyAppExeName "环保智慧化管理系统.exe"

[Setup]
; 注: AppId的值为单独标识该应用程序。
; 不要为其他安装程序使用相同的AppId值。
; (生成新的GUID，点击 工具|在IDE中生成GUID。)
AppId={{9FD10F3E-6F0F-A35F-104D-8DFB505232B5}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
;AppVerName={#MyAppName} {#MyAppVersion}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\{#MyAppName}
DefaultGroupName={#MyAppName}
AllowNoIcons=yes
OutputDir=.\
OutputBaseFilename={#MyAppName}v{#MyAppVersion}
;SetupIconFile=..\LD.Plugin.Browser\logo.ico
Compression=lzma
SolidCompression=yes
Uninstallable=yes
PrivilegesRequired=admin

[Languages]
Name: "chinesesimp"; MessagesFile: "compiler:Default.isl"

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkedonce
Name: "quicklaunchicon"; Description: "{cm:CreateQuickLaunchIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkedonce

[Files]
Source: "环保管家客户端\环保智慧化管理系统.exe"; DestDir: "{app}"; Flags: ignoreversion
Source: "环保管家客户端\*"; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs
; 注意: 不要在任何共享系统文件上使用“Flags: ignoreversion”

[Code]
procedure CurStepChanged(CurStep: TSetupStep);
var appWnd: HWND;
begin
  if CurStep = ssInstall then
  begin
     // 检查××进程是否在运行，是则关闭进程
     appWnd := FindWindowByWindowName('LDBrowser');
     if (appWnd <> 0) then
     begin
        PostMessage(appWnd, 18, 0, 0);       // quit
     end;
  end;
end;

// 卸载前检查关闭**进程
procedure CurUninstallStepChanged(CurUninstallStep: TUninstallStep);
var appWnd: HWND;
begin
   // 检查**进程是否在运行，是则关闭进程
   appWnd := FindWindowByWindowName('LDClient');
   if (appWnd <> 0) then
   begin
      PostMessage(appWnd, 18, 0, 0);       // quit
   end;
end;

function InitializeSetup(): Boolean; 
var Path:string;
    ResultStr:string;
    ResultCode: Integer;
    appWnd: HWND;
begin
    appWnd := FindWindowByWindowName('{#MyAppName}');
    if (appWnd <> 0) then
    begin
      PostMessage(appWnd, 18, 0, 0);       // quit
    end;
    //卸载旧版本
    if RegQueryStringValue(HKLM, 'Software\JMLIDE\{#MyAppName}\Settings', 'Uninstall', ResultStr) then
    begin
      if MsgBox('需要卸载旧版本才能继续安装，是否继续？', mbConfirmation, MB_YESNO) = idYes then
      begin
        Exec(ResultStr, '/silent', '', SW_HIDE, ewWaitUntilTerminated, ResultCode);
      end
      else
      begin
        Result :=false;
        exit;
      end;
    end;
    result := true;
end;

[Icons]
Name: "{group}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"
Name: "{group}\{cm:ProgramOnTheWeb,环保管家智慧化管理系统}"; Filename: "{#MyAppURL}"
Name: "{group}\{cm:UninstallProgram,{#MyAppName}}"; Filename: "{uninstallexe}"
Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: desktopicon
Name: "{userappdata}\Microsoft\Internet Explorer\Quick Launch\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}"; Tasks: quicklaunchicon

[Registry]
Root: HKLM; Subkey: "Software\kmhzhxt";Flags: uninsdeletekeyifempty
Root: HKLM; Subkey: "Software\kmhzhxt\{#MyAppName}";Flags: uninsdeletekey 
Root: HKLM; Subkey: "Software\kmhzhxt\{#MyAppName}\Settings"; ValueType: string; ValueName: "Path"; ValueData: "{app}"
Root: HKLM; Subkey: "Software\kmhzhxt\{#MyAppName}\Settings"; ValueType: string; ValueName: "Uninstall"; ValueData: "{uninstallexe}"
Root: HKLM; Subkey: "Software\kmhzhxt\{#MyAppName}\Settings"; ValueType: string; ValueName: "Version"; ValueData: "{#MyAppVersion}"

[Run]
Filename: "{app}\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, '&', '&&')}}"; Flags: nowait postinstall skipifsilent

具体要修改的点是开头的 #define 的内容和 Source 的路径和内部可执行文件名称，其余照旧。修改完成后，点击编译，即可生成具体的应用安装包。

总结

首先要安装相应的环境，再通过具体的参数来配置程序，然后生成一个可执行文件应用，最后使用 Inno Setup 5 将应用做成安装包。

引用

原文地址：https://www.cnblogs.com/vin9712/p/15111629.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

electron打包中的坑如何解决
这篇文章主要讲解了“electron打包中的坑如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“electron...
electron打包的坑如何解决
这篇文章主要介绍“electron打包的坑如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“electron打包的坑如何...
VSCode中如何调试Electron应用的主进程代码
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟...
如何在VSCode上调试Electron应用的主进程代码
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价
使用electron-vue搭建桌面应用程序项目
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内，和之前的vue-cli搭建项目流程没有任何区别 GIT地址：https://github.com/SimulatedGREG/electron-vue 搭建项目：1.全局安装脚手架：npminstall--globalvue-cli
electron安装
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron，并测试。如下图
为Electron 安装 vue-devtool等扩展
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
Electron学习一——— electron的基础创建
前言本人是做java开发的（菜鸟），做web项目的朋友们基本上都会遇到同样一个，永远不知道客户会怎么样使用，或者说永远不知道客户会用什么浏览器打开我们做出来的应用，就算你跟他说明了一定得用某某某浏览器打开，还是有人会用别的浏览器打开，这种情况通常我们会去做适配（前端），最近公司有需求
electron-builder的使用初接触，有些含义不懂
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装，使用npm安装的有问题（没有尝试），先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
asar 如何解密加密？electron 的 asar 的具体用法
来源：https:/ewsn.net/say/electron-asar.html 在electron中，asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下，这些代码逻辑，是放置在resource/app目录下面的，明文可见，这样的话，也就有了代码加密（asar打包）的需求 asar如何解密加密？electron的asar的
iview框架使用electron运行图标无法显示问题
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
electron-vue 图片加载失败后使用默认头像
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
electron-vue打包引用的图标不显示问题
在electron-vue中使用了字体图标，但是打包成.exe文件后图标不显示，路劲问题把字体图标放到static目录下就可以了，静态图片也一样我原来放在其它地方不行改到static目录就可以了
electron-vue 设置cookie
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
Electron笔记
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法：单独设置electron为淘宝镜像，npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
electron打包分发
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装，不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题（就
electron开发客户端注意事项兼开源个人知识管理工具“想学吗”
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
javascript – 具有下载属性的电子问题
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG：<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
Electron实现第一个应用 &quot;hello world&quot;
一.什么是Electron?它和NW.js的区别是什么？Electron是GitHub开发的桌面应用开发框架，它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是：1.整合Chromium和Node.js的方式不同。在NW.js中，Chromium是直接被打补丁打进去
electron-vue 打开文件目录，打开文件夹，
1.打开父子模态创建，<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot