electron-vue構建桌面應用

一、項目搭建

　　electron-vue是vue-cli和electron結合的項目，比單獨使用vue構建起的electron項目要方便很多.

1.初始化項目並運行

vue init simulatedgreg/electron-vue my-project  
cd my-project   
npm install
npm run dev

　文件結構

2.主進程main/index的配置 寬、高、菜單欄、窗口最大化,詳細配置請查看electron官方文檔 https://electronjs.org/docs/api/browser-window

3.package.json的配置

4.其它框架按需引入即可.

二、主進程和渲染器進程之間的通信

　　主進程向渲染器之間的進程通信使用ipcMain.on(監聽)和ipcMain.send(發送)兩個方法，渲染器進程向主進程使用ipcRenderer.on和ipcRenderer.send()詳情參考：https://electronjs.org/docs/api/ipc-main

三、軟件自動更新

1.在package.json中增加publish，並下載electron-updater(版本過高可能會有影響)

"publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"   //存放更新包的地址
      }
    ],

注意在開發環境測試時，項目版本及更新版本號都能能低於electron-updater和electron的版本。打包安裝后更新則是正常的。

2.在主進程main/index中

const { autoUpdater } = require('electron-updater');
const uploadUrl = `http://127.0.0.1:8080`; // 更新包位置
function updateHandle() {
    let message = {
        error: '檢查更新出錯',
        checking: '正在檢查更新……',
        updateAva: '檢測到新版本，正在下載……',
        updateNotAva: '現在使用的就是最新版本',
    };
    autoUpdater.setFeedURL(uploadUrl);
    autoUpdater.on('error', function (message) {
        sendUpdateMessage( message.error)
    });
    autoUpdater.on('checking-for-update', function () {
        sendUpdateMessage(message.checking)
    });
    autoUpdater.on('update-available', function (info) {
        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)
}

在createWindow()方法中調用updateHandle();

在入口vue頁面中增加監聽方法,這段代碼可以放在created中也可以根據需要放在methods中。

               let _this = this;
              _this.$electron.ipcRenderer.send("checkForUpdate");
              _this.$electron.ipcRenderer.on("message", (event, text) {
                  _this.tips = text;
                  console.log(text);
                  alert(text);
              });
              _this.$electron.ipcRenderer.on("downloadProgress", (event,  progressObj)=> {
                  _this.downloadPercent = progressObj.percent || 0;
              });
              _this.$electron.ipcRenderer.on("isUpdateNow", () => {
                  _this.$electron.ipcRenderer.send("isUpdateNow");
              });

3、服務器文件中包含.exe文件和latest.yml文件

　

 

　四、結語

　　對與和底層交互性不強的b/s架構項目，elecrton-vue確實方便很多，相當於在vue的基礎上又做了加強。況且electron-vue也支持打包成web端,打包文件在dist/web文件夾下。遇到的坑是在更新上，目前win開發環境下版本號必須都要大於electron-updater和electron的版本號，其它的還是比較愉快。