trtc-electron-sdk的demo中添加更新功能以及出现的报错问题

1、官网demo下载地址

点击下载
按照官网demo说明文档进行安装和运行

2、添加electron-updater

npm install electron-updater

根据项目需求安装对应的版本,建议使用5.2.1

3、创建一个handleUpdater.js文件,和package.json同级

// const { ipcMain } = require('electron')
const { autoUpdater } = require("electron-updater")
const {ipcMain, app} = require("electron");
let canQuit = false;
function handleUpdate(mainWindow) {
    console.log("版本更新检测",mainWindow)

    autoUpdater.setFeedURL(“填写自己项目更新地址”) // 设置下载地址
    function sendUpdateMessage(text) {
        mainWindow.webContents.send('message', text);
    }
    mainWindow.on('close', (event) => {
        if (!canQuit) {
            mainWindow.hide();
            mainWindow.setSkipTaskbar(true);
            event.preventDefault();
        }
    });
    // 检查更新出错
    autoUpdater.on('error', (error) => {
        console.log('autoUpdater-error:::', arguments)
        sendUpdateMessage({
            cmd: 'error',
            message: error,
        });
    })

    // 检查是否有版本更新
    autoUpdater.on('checking-for-update', (message) => {
        console.log('checking-for-update:::', arguments)
        sendUpdateMessage({
            cmd: 'checking-for-update',
            message: message
        })
    })

    // 检测到有版本更新
    autoUpdater.on('update-available', (message) => {
        console.log('update-available:::', arguments)
        sendUpdateMessage({
            cmd: 'update-available',
            message: message,
        });
    })

    // 未发现有新版本
    autoUpdater.on('update-not-available', (message) => {
        console.log('update-not-available:::', arguments)
        sendUpdateMessage({
            cmd: 'update-not-available',
            message: message,
        });
    })

    // 更新下载进度事件
    autoUpdater.on('download-progress', progressObj => {
        console.log('download-progress:::', progressObj)
        sendUpdateMessage({
            cmd: 'download-progress',
            message: progressObj,
        });
    })

    // 下载完成,询问用户是否更新
    autoUpdater.on('update-downloaded', (    event, releaseNotes, releaseName, releaseDate, updateUrl) => {
        console.log('update-downloaded::: 下载完成,询问用户是否更新')
        sendUpdateMessage({
            cmd: 'update-downloaded',
            message: {
                releaseNotes,
                releaseName,
                releaseDate,
                updateUrl,
            },
        });
        // autoUpdater.quitAndInstall();
    })
    //接收渲染进程消息,开始检查更新
    ipcMain.on('checkForUpdate', () => {
        console.log("接收渲染进程消息,开始检查更新")
        //执行自动更新检查
        // sendUpdateMessage({cmd:'checkForUpdate',message:arg})
        autoUpdater.checkForUpdates();
    });
    ipcMain.on('quitAndInstall', () => {
        console.log("接收渲染进程信息,是否立即更新")
        autoUpdater.quitAndInstall();
    });
    //接收渲染进程信息,是否立即更新
`    // ipcMain.on('quitAndInstall', () => {
    //     console.log("接收渲染进程信息,是否立即更新")
    //     autoUpdater.quitAndInstall();
    // });`
    // 手动下载更新文件
    // ipcMain.on('confirmDownloadUpdate', () => {
    //     console.log("手动下载")
    //     autoUpdater.downloadUpdate();
    // });
}

module.exports = {
    handleUpdate
}

4、创建更新页面updater.vue




1、本地运行皆为正常,但是打包后,客户端安装后报错cannot find modulee ‘electron-updater’
原因:打包时未将electron-updater进行打包
解决办法:在package.json文件中找到build,在extraFiles里面添加‘node_modules/electron-updater/’,后续出现这种问题根据提示完成插件的添加

  "build": {
    "asar": true,
    "asarUnpack": "**\\*.{node,dll}",
    "productName": "police",
    "appId": "com.tencent.trtc-electron-simple-demo",
    "icon": "public/info-avatar.ico",
    "directories": {
      "output": "./bin"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "https://jqga.jqwjw.cn/clientupdate/"
      }
    ],
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
      "extraFiles": [
        {
          "from": "node_modules/trtc-electron-sdk/build/Release/",
          "to": "./resources",
          "filter": [
            "**/*"
          ]
        },
        // 主要代码
        {
          "from": "node_modules/electron-updater/",
          "to": "./resources/node_modules/electron-updater",
          "filter": [
            "**/*"
          ]
        },
      ]
    },
    "files": [
      "dist/**/*",
      "*.js",
      "!node_modules"
    ]
  },

在vue项目中使用let { ipcRenderer } = require(“electron”);必须在前面添加window.不然会提示fs.existsSync is not function
仅仅为个人记录,不喜勿喷

你可能感兴趣的:(electron,javascript,前端)