electron 利用 electron-builder实现自动更新

这篇文章是对应用文档的补充，这边刚开始用electron-forge 但没有相关的教程，放弃。

1、先学会用electron-builder进行打包。

2、然后在package.json里面添加build内容

{
  "name": "ds",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "src/main.js",
  "scripts": {
    "dist": "electron-builder -wm",
    "start": "electron ."
  },  
  "build": {
    "appId": "com.dingshang.app",
    "publish": [
      {
        "provider": "generic",
        "url": "http://www.xxx.com/static/dist/"
      }
    ],
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
      "icon": "src/icon.png"
    }
  },
  "dependencies": {
    "electron-updater": "^2.21.4"
  }
}

3、在main.js中进行加入这个网上的教程是import 但会提示报错。

const autoUpdater = require('electron-updater').autoUpdater
const ipcMain = require('electron').ipcMain
const uploadUrl='http://www.d-shang.com/static/dist/'
// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写

function updateHandle() {
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新……',
    updateAva: '检测到新版本，正在下载……',
    updateNotAva: '现在使用的就是最新版本，不用更新',
  };
  const os = require('os');

  autoUpdater.setFeedURL(uploadUrl);
  autoUpdater.on('error', function (error) {
    console.log(error);
    sendUpdateMessage(message.error)
  });
  autoUpdater.on('checking-for-update', function () {
    console.log(message);

    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    console.log(message);

    sendUpdateMessage(message.updateAva)
  });
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {

    ipcMain.on('isUpdateNow', (e, arg) => {
      console.log(arguments);
      console.log("开始更新");
      //some code here to handle event
      autoUpdater.quitAndInstall();
    });

    mainWindow.webContents.send('isUpdateNow')
  });

  ipcMain.on("checkForUpdate",()=>{
      //执行自动更新检查
      autoUpdater.checkForUpdates();
  })
}

// 通过main进程发送事件给renderer进程，提示更新信息
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}

4、还需要在main.js的createWindow()中调用方法

function createWindow () {
 //这个方法要调用
  updateHandle();
}

5、设置监听 index.html

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Hello World!</title>
    </head>
    <body>
      <h1>Hello World!</h1>
自动更新
     
    </body>
  </html>

  <script src="./script/jquery-1.11.0.min.js"></script>

<script>
const ipcRenderer = require('electron').ipcRenderer

ipcRenderer.send("checkForUpdate");

ipcRenderer.on("message", (event, text) => {
            console.log(arguments);
            this.tips = text;
        });
        ipcRenderer.on("downloadProgress", (event, progressObj)=> {
            console.log(progressObj);
            this.downloadPercent = progressObj.percent || 0;
        });
        ipcRenderer.on("isUpdateNow", () => {
            ipcRenderer.send("isUpdateNow");
        });
</script>

至此，全部完成了，调试下npm start 看看行不行

引用文档

https://segmentfault.com/a/1190000012904543

electron 利用 electron-builder实现自动更新

猜你喜欢