c++builder tadoquery存储过程_Electron桌面应用程序从创建项目、启动项目到打包程序的详细过程...

开发环境

本文使用环境node12.14.1+electron10.1.5+electron-builder22.9.1+electron-updater4.3.5;

操作过程

一、新建和启动项目

1. 直接使用官网示例,先克隆示例项目的仓库,然后进入该仓库;

# 克隆示例项目的仓库$ git clone https://github.com/electron/electron-quick-start# 进入这个仓库$ cd electron-quick-start

2. 安装项目依赖,安装时候会比较慢,经常安装未成功,建议先执行“npm config set registry https://registry.npm.taobao.org/”再安装依赖;

# 安装依赖$ npm install

3. 启动项目,可正常运行显示页面,即表示新建成功。

# 运行$ npm start

二、打包和升级配置

1. 本文使用electron-builder方式打包和electron-updater自动升级,先安装依赖;

# 安装electron-buildernpm install electron-builder --save-dev# 安装electron-updaternpm install electron-updater --save

2. 在package.json做如下配置;

1)“publish”用于配置升级的参数,URL为升级包地址;

2)“output”为打包的路径;

3)“nsis”为安装过程的参数,增加安装体验感;注意这里引入了icon.ico图片,记得新建文件夹build并放入相应的图片;

98a6dcdb9f2ebdaa8711a5541034646d.png

3. 修改主进程“main.js”代码:

1)feedUrl是升级包放置的路径地址;

2)updateHandle是更新函数,放置了更新过程的方法(官方都有详细解释)和发送信息;

3)使用template来使菜单中文化,便于使用;

// Modules to control application life and create native browser windowconst { app, BrowserWindow, Menu, ipcMain } = require('electron')const electron = require('electron')const { autoUpdater } = require('electron-updater')const path = require('path')function createWindow() {  // Create the browser window.  const mainWindow = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      preload: path.join(__dirname, 'preload.js'),      nodeIntegration: true    }  })  // and load the index.html of the app.  mainWindow.loadFile('index.html')  // Open the DevTools.  mainWindow.webContents.openDevTools()  let feedUrl = "http://192.168.0.107/electron-update/eqs";  //检测版本更新  updateHandle(mainWindow, feedUrl);}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.whenReady().then(() => {  const menu = Menu.buildFromTemplate(template)  Menu.setApplicationMenu(menu) // 设置菜单部分  createWindow()  app.on('activate', function() {    // On macOS it's common to re-create a window in the app when the    // dock icon is clicked and there are no other windows open.    if (BrowserWindow.getAllWindows().length === 0) createWindow()  })})// Quit when all windows are closed, except on macOS. There, it's common// for applications and their menu bar to stay active until the user quits// explicitly with Cmd + Q.app.on('window-all-closed', function() {  if (process.platform !== 'darwin') app.quit()})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.// 更新函数function updateHandle(window, feedUrl) {  mainWindow = window;  let message = {    error: '检查更新出错',    checking: '正在检查更新……',    updateAva: '检测到新版本,正在下载……',    updateNotAva: '现在使用的就是最新版本,不用更新',  };  //设置更新包的地址  autoUpdater.setFeedURL(feedUrl);  //监听升级失败事件  autoUpdater.on('error', function(error) {    sendUpdateMessage(mainWindow, {      cmd: 'error',      message: error    })  });  //监听开始检测更新事件  autoUpdater.on('checking-for-update', function(message) {    sendUpdateMessage(mainWindow, {      cmd: 'checking-for-update',      message: message    })  });  //监听发现可用更新事件  autoUpdater.on('update-available', function(message) {    sendUpdateMessage(mainWindow, {      cmd: 'update-available',      message: message    })  });  //监听没有可用更新事件  autoUpdater.on('update-not-available', function(message) {    sendUpdateMessage(mainWindow, {      cmd: 'update-not-available',      message: message    })  });  // 更新下载进度事件  autoUpdater.on('download-progress', function(progressObj) {    sendUpdateMessage(mainWindow, {      cmd: 'download-progress',      message: progressObj    })  });  //监听下载完成事件  autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl) {    sendUpdateMessage(mainWindow, {      cmd: 'update-downloaded',      message: {        releaseNotes,        releaseName,        releaseDate,        updateUrl      }    })    //退出并安装更新包    autoUpdater.quitAndInstall();  });  //接收渲染进程消息,开始检查更新  ipcMain.on("checkForUpdate", (e, arg) => {    //执行自动更新检查    // sendUpdateMessage(mainWindow, {cmd:'checkForUpdate',message:arg})    autoUpdater.checkForUpdates();  })}//给渲染进程发送消息function sendUpdateMessage(mainWindow, text) {  mainWindow.webContents.send('message', text)}/** * 注册键盘快捷键 * 其中:label: '切换开发者工具',这个可以在发布时注释掉 */let template = [{    label: 'Edit ( 操作 )',    submenu: [{      label: 'Copy ( 复制 )',      accelerator: 'CmdOrCtrl+C',      role: 'copy'    }, {      label: 'Paste ( 粘贴 )',      accelerator: 'CmdOrCtrl+V',      role: 'paste'    }, {      label: 'Reload ( 重新加载 )',      accelerator: 'CmdOrCtrl+R',      click: function(item, focusedWindow) {        if (focusedWindow) {          // on reload, start fresh and close any old          // open secondary windows          if (focusedWindow.id === 1) {            BrowserWindow.getAllWindows().forEach(function(win) {              if (win.id > 1) {                win.close()              }            })          }          focusedWindow.reload()        }      }    }]  },  {    label: 'Window ( 窗口 )',    role: 'window',    submenu: [{      label: 'Minimize ( 最小化 )',      accelerator: 'CmdOrCtrl+M',      role: 'minimize'    }, {      label: 'Close ( 关闭 )',      accelerator: 'CmdOrCtrl+W',      role: 'close'    }, {      label: '切换开发者工具',      accelerator: (function() {        if (process.platform === 'darwin') {          return 'Alt+Command+I'        } else {          return 'Ctrl+Shift+I'        }      })(),      click: function(item, focusedWindow) {        if (focusedWindow) {          focusedWindow.toggleDevTools()        }      }    }, {      type: 'separator'    }]  },  {    label: 'Help ( 帮助 ) ',    role: 'help',    submenu: [{      label: 'FeedBack ( 意见反馈 )',      click: function() {        electron.shell.openExternal('https://forum.iptchain.net')      }    }]  }]

4. 修改首页“index.html” ,增加发送检测升级功能:

1)增加“sendMessage.js”,用来检测更新;该实例是打开或重新加载就检测更新,可自行根据实际情况修改检测的方式;

window.onload = function() {  let ipcRenderer = require("electron").ipcRenderer;  //接收主进程版本更新消息  ipcRenderer.on("message", (event, arg) => {    console.log(arg);    if ("update-available" == arg.cmd) {      //显示升级对话框      console.log('update-available');    } else if ("download-progress" == arg.cmd) {      //更新升级进度      console.log(arg.message.percent);    } else if ("error" == arg.cmd) {      console.log('更新失败');    }    // }  });  //20秒后开始检测新版本  let timeOut = window.setTimeout(() => {    ipcRenderer.send("checkForUpdate");  }, 20000);  clearTimeout;}

2)“index.html”作如下修改,加入引入上面js的代码:

<html><head>  <meta charset="UTF-8">    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">  <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">  <title>Hello World!title>head><body>  <h1>Hello World2!h1>  We are using Node.js <span id="node-version">span>,  Chromium <span id="chrome-version">span>,  and Electron <span id="electron-version">span>.    <script src="./renderer.js">script>  <script src="utils/sendMessage.js">script>body>html>

三、打包程序并演示升级过程

1. 执行命令“npm run build”,第一次在build的时候会因为下载文件而超时,可根据提示的网址下载相应的文件并进行手工安装;

1)下载“electron-v10.1.3-win32-x64”时(后面升级到了10.1.5,操作一样),可根据显示的(图1)url直接下载(并下载相应的SHASUMS256.txt),然后将“SHASUMS256.txt”修改为“SHASUMS256.txt-10.1.3”,并把这两个文件拷入图2位置;

8568a9081fe5df0173fdce28f7f5494a.png

4c395f58b4a6a4296d961fc49b5e48b6.png

2)下载“winCodeSign-2.6.0”时,可根据显示的(图1)url直接下载,然后把文件拷入图2位置;

714efb324fe4d5668dca2f726acd8e19.png

ad221cefa1f2a7a1945e98a67a0c3f03.png

3)下载“nsis-3.0.4.1”时,可根据显示的(图1)url直接下载,然后把文件拷入图2位置;

0ecd9625631ee37fb3c14de48e22c190.png

11eb61192373e647638f61e3283aec68.png

2. 再次执行命令“npm run build”,等待执行完毕,在release文件下生成exe文件,然后安装“test-demo Setup 1.0.0.exe”版本;

3. 修改“packgage.json”的属性“version”为2.0.0,然后执行命令“npm run build”,生成2.0安装版本;

06108ddc53ad61087b7dd51fa002feb3.png

4.  把升级文件“latest.yml”和“test-demo Setup 2.0.0.exe”放到设置的升级路径下;

1e11f04937e4c4660199c03f0237f9fe.png

5. 每次打开程序或者点击菜单的“Reload”,过20S后都会检测是否有升级包,并根据实际情况返回信息;

6. 如果升级成功会退出程序并跳到安装新程序的窗口,一步步确定即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/560820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(BFS+hash去重)八数码问题

题目&#xff1a; 编号为1~8的8个正方形滑块被摆成3行3列&#xff08;有一个格子空留&#xff09;。每次可以把与空格相邻的滑块&#xff08;有公共边才算相邻&#xff09;移到空格中&#xff0c;而它原来的位置就称为了新的空格。给定初始局面和目标局面&#xff08;用0表示空…

变速后没有声音_问答 | 现代朗动at,启动后怠速不稳,热车后正常,是什么问题?...

今日老陈问答Q陈工你好&#xff1a;1.手动家车&#xff0c;停车怠速&#xff0c;有挡或空挡行驶都有异响&#xff0c;踩离合异响消失&#xff0c;抬离合异响恢复&#xff0c;换分离轴承未解决&#xff0c;压板轻磨损没更换&#xff0c;舱室粉末没清理 2.手动挡加自动变速箱油行…

怎么加载文件_Java虚拟机从入门到入土之JVM的类加载机制

作者&#xff1a;六脉神剑转载于&#xff1a;https://juejin.im/post/5e1aaf626fb9a0301d11ac8eJVM总体概述JVM总体上是由类装载子系统(ClassLoader)运行时数据区执行引擎内存回收类文件结构以上5个部分组成&#xff0c;每一个都是非常重要的&#xff0c;如果你要了解JVM&#…

的向上取整函数_计算机二级Excel常用函数解析

决定为大家推点干货让大家学习一下Excel的函数应用ABS绝对值 从最简单的开始第一个是ABS函数简而言之就是取绝对值作用就是MAX&MIN函数 这两个函数是好哥们也比较简单的就是从一堆数字中选出最大值和最小值如图C6格所示ROUND函数 四舍五入函数可不是回合ROUND 1算是比较…

(stl排序+检索)大理石在哪

问题&#xff1a; 现有N个大理石&#xff0c;每个大理石上写了一个非负整数、首先把各数从小到大排序&#xff1b;然后回答Q个问题。每个问题问是否有一个大理石写着某个整数x&#xff0c;如果是&#xff0c;还要回答哪个大理石上写着x。排序后的大理石从左到右编号为1~N。 (…

多个 本地仓库_【运维工具】搭建npm私有镜像仓库,天下苦于npm build久矣

​01 前 言当你的研发团队越来越大&#xff0c;或是你无法忍受node超慢的构建时你可以考虑继续读下去&#xff0c;给大家推荐一个基于Verdaccio相对较完整的解决方案。由于环境的原因&#xff0c;我们直接去 http://npmjs.org 下载就不要考虑了&#xff0c;可以将npm config se…

(STL,vector)木块问题

题目&#xff1a; 输入n&#xff0c;得到编号为0~n-1的木块&#xff0c;分别摆放在顺序排列编号为0~n-1的位置。现对这些木块进行操作&#xff0c;操作分为四种。 1、move a onto b&#xff1a;把木块a、b上方的木块放回各自的原位&#xff0c;再把a放到b上&#xff1b; 2、…

地图自定义图标_如何在H5里添加地图导航?这份教程请收藏!

智能手机的出现为我们的生活带来了翻天覆地的改变&#xff0c;比如说衣食住行都有了显著的变化。外卖让就餐更加方便、手机支付也让生活更加便利&#xff0c;地图导航功能更是让大家从此不再迷路&#xff0c;有了手机以后&#xff0c;大家都开始习惯直接用手机搜索目的地&#…

(STL,set)安迪的第一个字典

问题&#xff1a; 输入一个文本&#xff0c;找出所有不同的单词&#xff08;连续的字母序列&#xff09;&#xff0c;按字典序从小到大输出。单词不区分大小写。 样例输入 Adventures in Disneyland Two blondes were going to Disneyland when they came to a fork in the…

ios 高德获取定位_解决ios11不支持高德地图API定位功能的方法

在 iOS 11 系统上访问JS API定位业务失败怎么解决&#xff1f;苹果新发的 iOS 11 操作系统的一大特性是对 http 形式访问页面的限制变得非常严格(相比iOS 10 和 iOS 9)。高德提供的JS API功能均支持http和https两种协议访问&#xff0c;在iOS 11操作系统上推荐使用https形式访问…

(STL,map)反片语

题目 输入一些单词&#xff0c;找出所有满足如下条件的单词&#xff1a;该单词不能通过字母重排&#xff0c;得到输入文本中的另外一个单词。在判断是否满足条件时&#xff0c;不区分大小写&#xff0c;但输出保留输入中的大小写&#xff0c;按字典序进行排列&#xff08;所有…

源码 状态机_LLVM学习笔记(1)--初探源码

一直耳闻LLVM相比于GCC&#xff1a;well documented架构灵活&#xff0c;前后端解耦符合龙书的讲解昨天读到了一篇虽然概括却很周到的llvm入门导引陈钦霖&#xff1a;LLVM Pass入门导引​zhuanlan.zhihu.com就沿着其中的提示探索了下LLVM源码&#xff0c;倒也没有想要成为专业的…

n个数的最小公倍数

文章目录1.利用公式法求两个数最小公倍数2.最大公约数求法3.求几个数的最小公倍数4.例题1.利用公式法求两个数最小公倍数 假设现在要求最小公倍数的两个数为x,y&#xff0c;他们的最大公约数为p,最小公倍数为q。则xypq 2.最大公约数求法 int gg(int a,int b){int c;while(b)…

cv mat的shape_将ndarray转换为cv::Mat的最简单方法是什么?

正如kyamagu建议的那样&#xff0c;您可以使用OpenCV的官方python包装器代码&#xff0c;尤其是pyopencv_to和{}。在我一直在为所有依赖项和生成的头文件而挣扎。然而&#xff0c;可以通过将^{}作为lightalchemist did here进行“清理”来降低复杂性&#xff0c;以便只保留必要…

c语言年月日问题思路总结 闰年非闰年每个月份的天数 解决今天是妹子出生的第多少天的问题

1.闰年非闰年每个月份的天数&#xff1a; int year[2][13]{0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31,0, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 };经观察发现&#xff1a; a。2月闰年有29天&#xff0c;非闰年28天 b。1、3、5、7、8、10、12月份&#xf…

aop判断方法是否执行成功_判断图中是否有环的三种方法

0、什么是环&#xff1f;在图论中&#xff0c;环&#xff08;英语&#xff1a;cycle&#xff09;是一条只有第一个和最后一个顶点重复的非空路径。在有向图中&#xff0c;一个结点经过两种路线到达另一个结点&#xff0c;未必形成环。1、拓扑排序1.1、无向图使用拓扑排序可以判…

reverse()函数反转字符串以及任意类型数组

文章目录reverse用法1.reverse函数反转string2.reverse函数反转字符数组2.自定义reverse函数反转任意类型数组例子&#xff1a;reverse用法 1.reverse函数反转string #include <iostream> #include <algorithm> #include <string> using namespace std;int…

sap运维要做哪些工作_患上腰椎间盘突出,适合做哪些工作?不适合做哪些工作?...

腰椎间盘突出的患者&#xff0c;大多数是年轻人。年轻人生活和工作压力比较大&#xff0c;大多数人都不可能因为腰椎病完全停止工作&#xff0c;事实上也不用完全停止工作&#xff0c;我们更多地应该虑如何平衡养病和工作之间的关系&#xff0c;那我们今天就来和大家讲讲&#…

(STL,map,queue)团体队列

目录 目录题目&#xff1a;分析与解答1.队列先进先出&#xff0c;正好符合排队问题&#xff0c;所以用队列模拟2.每一个团队有一个队列&#xff0c;团队整体又形成一个队列3.每一个团队的成员和团队编号需要对应&#xff0c;因此利用map存编号为x的人所在的团队编号4.插入队&am…

bat执行exe程序_dos命令start教程,并行运行exe程序或者启动bat批处理cmd脚本

大家好&#xff0c;我是老盖&#xff0c;首先感谢观看本文&#xff0c;本篇文章做的有视频&#xff0c;视频讲述的比较详细&#xff0c;也可以看我发布的视频。今天我们学习DOS命令start这个命令&#xff0c;它可以启动一个EXE程序&#xff0c;也可以启动一个BAT批处理脚本&…