Electron 12 学习(七)Electron 自动更新

Electron 12 学习 专栏收录该内容
12 篇文章 1 订阅
  1. 搭建一个httpd服务器:
    官网:http://httpd.apache.org/
    下载地址:http://httpd.apache.org/download.cgi#apache24
    Windows版下载地址:http://httpd.apache.org/docs/current/platform/windows.html#down

  2. 解压:
    在这里插入图片描述

  3. 软件说明:
    在这里插入图片描述

  4. 依赖下载:
    在这里插入图片描述

  5. 安装配置:
    在这里插入图片描述

  6. 启动及测试:

    • 直接启动时报错:
      在这里插入图片描述

    • 修改路径:
      在这里插入图片描述

    • 安装服务,提示使用管理员身份运行:
      在这里插入图片描述

    • 使用管理员身份运行:
      在这里插入图片描述

    • 启动:
      在这里插入图片描述

    • 访问:
      在这里插入图片描述

    • 查看httpd服务:
      在这里插入图片描述

    • 新建一个文件夹,放入两个文件:
      在这里插入图片描述

    • 查看测试文件效果:
      在这里插入图片描述

  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.exelatest.yml放在\Apache24\htdocs\electron内:
    注意:程序 electron-12-study Setup 1.0.0.exe 文件名中存在空格,需要将文件名与latest.yml统一(将空格替换成-),修改为:electron-12-study-Setup-1.0.0.exe
    在这里插入图片描述
    在这里插入图片描述

  12. 安装electron-12-study-Setup-1.0.0.exe
    在这里插入图片描述

  13. 将版本号修改为1.0.1并打包,修正程序名称,将程序复制到\Apache24\htdocs\electron内,并替换latest.yml文件:
    在这里插入图片描述
    在这里插入图片描述

  14. 再次检查更新:
    有新更新时,将出现安装按钮,点击安装按钮后自动安装
    在这里插入图片描述

  15. 更新完成:
    在这里插入图片描述

  16. 源码:
    GitHub
    Gitee
    CodeChina

  17. 打包程序:
    GitHub
    Gitee
    CodeChina

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值