自己做的网站如何赚钱,网上有卖网站链接的吗,wordpress 导航下拉菜单,专门做化妆的招聘网站开发环境本文使用环境node12.14.1electron10.1.5electron-builder22.9.1electron-updater4.3.5#xff1b;操作过程一、新建和启动项目1. 直接使用官网示例#xff0c;先克隆示例项目的仓库#xff0c;然后进入该仓库#xff1b;# 克隆示例项目的仓库$ git clone https://g… 开发环境本文使用环境node12.14.1electron10.1.5electron-builder22.9.1electron-updater4.3.5操作过程一、新建和启动项目1. 直接使用官网示例先克隆示例项目的仓库然后进入该仓库# 克隆示例项目的仓库$ git clone https://github.com/electron/electron-quick-start# 进入这个仓库$ cd electron-quick-start2. 安装项目依赖安装时候会比较慢经常安装未成功建议先执行“npm config set registry https://registry.npm.taobao.org/”再安装依赖# 安装依赖$ npm install3. 启动项目可正常运行显示页面即表示新建成功。# 运行$ npm start二、打包和升级配置1. 本文使用electron-builder方式打包和electron-updater自动升级先安装依赖# 安装electron-buildernpm install electron-builder --save-dev# 安装electron-updaternpm install electron-updater --save2. 在package.json做如下配置1)“publish”用于配置升级的参数URL为升级包地址2)“output”为打包的路径3)“nsis”为安装过程的参数增加安装体验感注意这里引入了icon.ico图片记得新建文件夹build并放入相应的图片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 its 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, its 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 apps 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: CmdOrCtrlC, role: copy }, { label: Paste ( 粘贴 ), accelerator: CmdOrCtrlV, role: paste }, { label: Reload ( 重新加载 ), accelerator: CmdOrCtrlR, 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: CmdOrCtrlM, role: minimize }, { label: Close ( 关闭 ), accelerator: CmdOrCtrlW, role: close }, { label: 切换开发者工具, accelerator: (function() { if (process.platform darwin) { return AltCommandI } else { return CtrlShiftI } })(), 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的代码htmlhead meta charsetUTF-8 meta http-equivContent-Security-Policy contentdefault-src self; script-src self meta http-equivX-Content-Security-Policy contentdefault-src self; script-src self titleHello World!titleheadbody h1Hello World2!h1 We are using Node.js span idnode-versionspan, Chromium span idchrome-versionspan, and Electron span idelectron-versionspan. script src./renderer.jsscript script srcutils/sendMessage.jsscriptbodyhtml三、打包程序并演示升级过程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位置2)下载“winCodeSign-2.6.0”时可根据显示的(图1)url直接下载然后把文件拷入图2位置3)下载“nsis-3.0.4.1”时可根据显示的(图1)url直接下载然后把文件拷入图2位置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安装版本4. 把升级文件“latest.yml”和“test-demo Setup 2.0.0.exe”放到设置的升级路径下5. 每次打开程序或者点击菜单的“Reload”过20S后都会检测是否有升级包并根据实际情况返回信息6. 如果升级成功会退出程序并跳到安装新程序的窗口一步步确定即可。
