Electron 12 学习（七）Electron 自动更新

痛定思痛。 2022-10-14 05:25 170阅读 0赞

1.  搭建一个`httpd`服务器：  
    官网：[http://httpd.apache.org/][http_httpd.apache.org]  
    下载地址：[http://httpd.apache.org/download.cgi\#apache24][http_httpd.apache.org_download.cgi_apache24]  
    Windows版下载地址：[http://httpd.apache.org/docs/current/platform/windows.html\#down][http_httpd.apache.org_docs_current_platform_windows.html_down]
2.  解压：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70]
3.  软件说明：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 1]
4.  依赖下载：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 2]
5.  安装配置：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 3]
6.  启动及测试：
    
     *  直接启动时报错：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 4]
     *  修改路径：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 5]
     *  安装服务，提示使用管理员身份运行：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 6]
     *  使用管理员身份运行：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 7]
     *  启动：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 8]
     *  访问：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 9]
     *  查看httpd服务：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 10]
     *  新建一个文件夹，放入两个文件：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 11]
     *  查看测试文件效果：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 12]
7.  安装`electron-updater`：
    
        npm i electron-updater
8.  主脚本文件：
    
        'use strict'
        
        import {  app, protocol, ipcMain, webContents, BrowserWindow } from 'electron'
        import {  createProtocol } from 'vue-cli-plugin-electron-builder/lib'
        // import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
        const isDevelopment = process.env.NODE_ENV !== 'production'
        const path = require('path')
        import { autoUpdater} from 'electron-updater'
        
        // Scheme must be registered before the app is ready
        protocol.registerSchemesAsPrivileged([
          {  scheme: 'app', privileges: {  secure: true, standard: true } }
        ])
        
        async function createWindow() { 
          // Create the browser window.
          const win = new BrowserWindow({ 
            width: 800,
            height: 600,
            webPreferences: { 
              preload: path.join(__static, 'preload.js'),
              // Use pluginOptions.nodeIntegration, leave this alone
              // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
              nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
              contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
            }
          })
        
          if (process.env.WEBPACK_DEV_SERVER_URL) { 
            // Load the url of the dev server if in development mode
            await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
            if (!process.env.IS_TEST) win.webContents.openDevTools()
          } else { 
            createProtocol('app')
            // Load the index.html when not in development
            await win.loadURL('app://./index.html')
          }
        
          // 启动项目时检查更新
          await autoUpdater.checkForUpdates()
        }
        
        // Quit when all windows are closed.
        app.on('window-all-closed', () => { 
          // On macOS it is common for applications and their menu bar
          // to stay active until the user quits explicitly with Cmd + Q
          if (process.platform !== 'darwin') { 
            app.quit()
          }
        })
        
        app.on('activate', () => { 
          // 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()
        })
        
        // 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.on('ready', async () => { 
          // if (isDevelopment && !process.env.IS_TEST) { 
          // // Install Vue Devtools
          // try { 
          // await installExtension(VUEJS_DEVTOOLS)
          // } catch (e) { 
          // console.error('Vue Devtools failed to install:', e.toString())
          // }
          // }
          createWindow()
        })
        
        // Exit cleanly on request from parent process in development mode.
        if (isDevelopment) { 
          if (process.platform === 'win32') { 
            process.on('message', (data) => { 
              if (data === 'graceful-exit') { 
                app.quit()
              }
            })
          } else { 
            process.on('SIGTERM', () => { 
              app.quit()
            })
          }
        }
        
        const feed_url = "http://127.0.0.1/electron"
        autoUpdater.setFeedURL(feed_url)
        
        // 接收更新消息
        ipcMain.on('main_update', (event) => { 
          autoUpdater.checkForUpdates()
        })
        
        // 安装
        ipcMain.on('main_install', (event) => { 
          autoUpdater.quitAndInstall()
        })
        
        autoUpdater.on('error', function (error) { 
          for (let i in webContents.getAllWebContents()) { 
            webContents.getAllWebContents()[i].send('render_update', 'error', '更新异常：', error)
          }
        })
        
        autoUpdater.on('checking-for-update', function (info) { 
          for (let i in webContents.getAllWebContents()) { 
            webContents.getAllWebContents()[i].send('render_update', 'checking-for-update', '检测版本信息：', info)
          }
        })
        
        autoUpdater.on('update-available', function (info) { 
          for (let i in webContents.getAllWebContents()) { 
            webContents.getAllWebContents()[i].send('render_update', 'update-available', '检测到新版本，正在下载：', info)
          }
        })
        
        autoUpdater.on('update-not-available', function (info) { 
          for (let i in webContents.getAllWebContents()) { 
            webContents.getAllWebContents()[i].send('render_update', 'update-not-available', '无需更新：', info)
          }
        })
        
        autoUpdater.on('download-progress', function (info) { 
          for (let i in webContents.getAllWebContents()) { 
            webContents.getAllWebContents()[i].send('render_update', 'download-progress', '下载进度：', info)
          }
        })
        
        autoUpdater.on('update-downloaded', function (info) { 
          for (let i in webContents.getAllWebContents()) { 
            webContents.getAllWebContents()[i].send('render_update_update-downloaded', 'update-downloaded', '更新下载：', info)
          }
        })
9.  App.vue：
    
        <template>
          <img alt="Vue logo" src="./assets/logo.png">
        
          <br>
          <input id="numA" type="text"/>
          <input id="numB" type="text"/>
          <button @click="sum">求和</button>
          <input id="numC" type="text" disabled/>
          <span>非数字会直接忽略</span>
          <br>
          <button @click="version">获取当前版本</button>
          <button @click="update">检查更新</button>
          <button @click="install" id="install" style="display: none">安装</button>
          <span>请查看控制台</span>
          <HelloWorld msg="Welcome to Your Vue.js App"/>
        </template>
        
        <script> import HelloWorld from './components/HelloWorld.vue' const ffi = require('ffi-napi') const path = require('path') const fs = require("fs") let { ipcRenderer} = require('electron') const package_json = require('../package.json'); // 获取 DLL 路径（根据不同平台，选择不同的DLL） // eslint-disable-next-line no-undef let dll_path = path.join(__static, `dll/arithmetic-operations_${ process.arch}.dll`) // 修正开发环境的路径 dll_path = dll_path.replace('\\public\\', '\\') // 修正生产环境的路径 dll_path = dll_path.replace('\\resources\\app.asar\\', '\\') // 主进程向渲染进程发送消息 ipcRenderer.on('render_update', (event, type, msg, param) => { console.log(type, msg, param) }) // 主进程向渲染进程发送消息 ipcRenderer.on('render_update_update-downloaded', (event, type, msg, param) => { console.log(type, msg, param) document.getElementById('install').style.display="" }) export default { name: 'App', components: { HelloWorld }, methods: { sum() { fs.access(dll_path, function (err) { if (err) { console.error(dll_path) alert('DLL 文件不存在：'+ dll_path) } else { console.log('DLL 文件已存在：', dll_path) } }) const dll = new ffi.Library(dll_path, { 'sum': [ 'int', ['int', 'int'] ] }) const result = dll.sum( parseInt(document.getElementById("numA").value), parseInt(document.getElementById("numB").value) ) document.getElementById('numC').value = result.toString() }, version() { // electron 版本 console.log(package_json.version) }, update() { // 渲染进程向主进程发送消息 ipcRenderer.send('main_update') }, install() { // 渲染进程向主进程发送消息 ipcRenderer.send('main_install') } } } </script>
        
        <style> @import "../src/style/app.scss"; </style>
10. 注意：  
    开发环境不支持更新，控制台会提示错误：`error 更新异常： Error: ENOENT: no such file or directory, open 'D:\WebstormProjects\Electron-12-Study\dist_electron\dev-app-update.yml'`  
    可在打包后运行`dist_electron/win-unpacked`内的文件
11. 打包`1.0.0`程序，并把程序`electron-12-study-Setup-1.0.0.exe`与`latest.yml`放在`\Apache24\htdocs\electron`内：  
    注意：程序 `electron-12-study Setup 1.0.0.exe` 文件名中存在空格，需要将文件名与`latest.yml`统一（将空格替换成`-`），修改为：`electron-12-study-Setup-1.0.0.exe`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 13]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 14]
12. 安装`electron-12-study-Setup-1.0.0.exe`：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 15]
13. 将版本号修改为`1.0.1`并打包，修正程序名称，将程序复制到`\Apache24\htdocs\electron`内，并替换`latest.yml`文件：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 16]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 17]
14. 再次检查更新：  
    有新更新时，将出现`安装`按钮，点击`安装`按钮后自动安装  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 18]
15. 更新完成：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 19]
16. 源码：  
    [GitHub][]  
    [Gitee][]  
    [CodeChina][]
17. 打包程序：  
    [GitHub][GitHub 1]  
    [Gitee][Gitee 1]  
    [CodeChina][CodeChina 1]

[http_httpd.apache.org]: http://httpd.apache.org/
[http_httpd.apache.org_download.cgi_apache24]: http://httpd.apache.org/download.cgi#apache24
[http_httpd.apache.org_docs_current_platform_windows.html_down]: http://httpd.apache.org/docs/current/platform/windows.html#down
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70]: /images/20221014/344cf9c933044b1696f38d0d202f08f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 1]: /images/20221014/8b203a1a361a410fbf38eb1cd96a54fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 2]: /images/20221014/242817c6e2ca4411bcf113c0adea93f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 3]: /images/20221014/8ea766558c284e63b180d460df9b32f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 4]: /images/20221014/d6b46a6773a9477ea5a2d6f48bb52546.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 5]: /images/20221014/72857f14e2914d7b94e6cad86140547d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 6]: /images/20221014/d5ecc9612d43431c910dab8c48e1ad3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 7]: /images/20221014/3fd09274d7cd4f37a19367342078681a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 8]: /images/20221014/b5b5cc39e5a1471b8b1326cfefe254b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 9]: /images/20221014/caddea74c4434513a828491f5feea5b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 10]: /images/20221014/adebc7abc39a42d0a2c9e1c1365bf362.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 11]: /images/20221014/dff82a7827cf498b9c48b5c3bfecc0a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 12]: /images/20221014/30dfb7eb987744b78c38627bf237c7ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 13]: /images/20221014/0273ae437fae4bb19114a4a99513fc5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 14]: /images/20221014/16914ef7bb0f45dfba0401883d0b2c86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 15]: /images/20221014/0e0b7373e10b45eaae5fb788c9507a47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 16]: /images/20221014/d06258b01c74461ba96cd5e10767b85c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 17]: /images/20221014/536f974ddd0d4208a43e3a967ca7cb49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 18]: /images/20221014/3dcb3e8fc6af405cae48279f2f10654b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 19]: /images/20221014/6f9fd1d7d65a4a46ab0d9b01bd6130a6.png
[GitHub]: https://github.com/xuxiaowei-com-cn/Electron-12-Study/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%B8%83%EF%BC%89Electron_%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0
[Gitee]: https://gitee.com/xuxiaowei-com-cn/Electron-12-Study/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%B8%83%EF%BC%89Electron_%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0/
[CodeChina]: https://codechina.csdn.net/xuxiaowei-com-cn/Electron-12-Study/-/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%B8%83%EF%BC%89Electron_%E8%87%AA%E5%8A%A8%E6%9B%B4%E6%96%B0
[GitHub 1]: https://github.com/xuxiaowei-com-cn/Electron-12-Study/releases/tag/1.0.0
[Gitee 1]: https://gitee.com/xuxiaowei-com-cn/Electron-12-Study/releases/1.0.0
[CodeChina 1]: https://codechina.csdn.net/xuxiaowei-com-cn/Electron-12-Study/-/releases/1.0.0