electron配置手动更新

需要检软件版本，当有新版本发布后手动去下载。 原理：本地编写好配置文件，每次启动软件去请求服务器的地址，如果有新版本则显示更新提示,效果如下：

• index.js内容(main=>index.js)

    import { 
      app, 
      BrowserWindow,
      Tray,
      Menu,
      ipcMain
    } from 'electron'
    
    //检测更新用
    import { config } from "../renderer/assets/libs/config";
    import axios from "axios";
    let updateStatus = true;
    
    if (process.env.NODE_ENV !== 'development') {
      global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    }
    
    let mainWindow
    const winURL = process.env.NODE_ENV === 'development'
      ? `http://localhost:9080`
      : `file://${__dirname}/index.html`
    
    function createWindow () {
      /**
       * Initial window options
       */
      mainWindow = new BrowserWindow({
        height: 600,
        width: 1000,
        center: true, // 是否出现在屏幕居中的位置
      })
      mainWindow.loadURL(winURL)
    
      mainWindow.on('closed', () => {
        mainWindow = null
      })
    
      // 手动更新代码（关键代码）
      if (!updateStatus) return;
      let randStr = Date.parse(new Date()) +Math.random().toString(36).substr(2);
      /*
      * 说明：这里是通过请求服务器的pubversion.json文件以获取其版本号具体路径可自行修改，
      *这里路径为http://xxx/downloads/pubversion.json
      */
      axios.get(`${config.app}/downloads/pubversion.json?${randStr}`).then(function (res) {
        mainWindow.webContents.once('dom-ready', () => {
          mainWindow.webContents.send('new-version', res.data)
        })
      }).catch(function (error) {
        console.log(error);
      });
      updateStatus = false;
    }
    
    app.on('ready', createWindow)
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    app.on('activate', () => {
      if (mainWindow === null) {
        createWindow()
      }
    })
    
  

• config.js内容

    export const config = {
        'http_url':'https://test.stoooges.cn',//请求地址(接口用)
        'app': 'http://192.168.1.28', // 客户端应用所在服务器地址，以及version.json版本控制所在地址
        'version': '0.0.1', // 当前版本号（用来与服务器配置文件中的版本号进行比较以决定是否提示更新）
    }
    
  

• pubversion.json内容（与打包好的文件放在同一目录下）

    {
        "version":"0.0.2",
        "message":"测试新版本"
    }
    说明：
    version版本号，需要大于本地安装的客户端版本号，这样本地才会有更新提示。
    message更新内容说明
  

更新组件，内容如下

<template>
    <Modal
        v-model="isShow"
        title="更新提示"
    >
        <div class="update-content">
            <div class="update-message">
                <h3>客户端存在更新</h3>
                <p>更新内容：</p>
                <div v-html="updateTxt"></div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <Button @click="getNewVersion">去下载新版本</Button>
            <Button type="primary" @click="closeModal">以后提示</Button>
        </span>
    </Modal>
</template>
<script>
import { config } from '../assets/libs/config';

var ipcRenderer = null;
var shell = null;
if (!process.env.IS_WEB) {
  ipcRenderer = require("electron").ipcRenderer;
  shell = require("electron").shell;
}
export default {
  name: "update",
  data() {
    return {
      isShow: false,
      updateTxt: ""
    };
  },
  created() {
    if(!process.env.IS_WEB){
      ipcRenderer.on("new-version", (event, arg) => {
        if (this.compare(arg.version, config.version)) {
          this.isShow = true;
          this.updateTxt = arg.message;
        }
      });
    }
  },
  methods: {
    closeModal() {
      this.isShow = false;
    },
    getNewVersion() {
      if(!process.env.IS_WEB){
        shell.openExternal(`${config.app}/downloads/stogesboklet.exe`);
      };
    },
    compare(curV, reqV) {
      if (curV && reqV) {
        //将两个版本号拆成数字
        var arr1 = curV.split("."),
          arr2 = reqV.split(".");
        var minLength = Math.min(arr1.length, arr2.length),
          position = 0,
          diff = 0;
        while (
          position < minLength &&
          (diff = parseInt(arr1[position]) - parseInt(arr2[position])) == 0
        ) {
          position++;
        }
        diff = diff != 0 ? diff : arr1.length - arr2.length;
        return diff > 0;
      } else {
        console.log("版本号不能为空");
        return false;
      }
    }
  }
};
</script>
<style lang="scss">
.update-modal {
  .update-content {
    display: flex;
    justify-content: space-around;
    .client-logo {
      padding-top: 30px;
    }
    .client-logo img {
      width: 80px;
      height: 80px;
    }
    .update-message {
      width: 300px;
      height: 200px;
      h3 {
        color: #000;
      }
      p {
        padding-top: 10px;
        font-size: 14px;
        color: #333;
      }
      div {
        font-size: 14px;
        line-height: 22px;
        color: #333;
      }
    }
  }
}
</style>