背景

上篇文章已經(jīng)介紹了使用electron forge+vite+vue3來實現(xiàn)一個桌面應(yīng)用程序的框架。本文重點介紹完善一個這樣的框架的幾個通用的需求點及實現(xiàn)方式。

需求

實現(xiàn)客戶端在線升級
實現(xiàn)與本地操作系統(tǒng)的交互
實現(xiàn)配置信息持久化
國際化配置
實現(xiàn)跨域訪問

實現(xiàn)客戶端在線升級

update.js

const {App,dialog,autoUpdater} = require('electron');
const log = require("electron-log")
autoUpdater.logger = log
autoUpdater.logger.transports.file.level = "info"

const server = 'https://update.electronjs.org'
const url = `${server}/dongluyang/intel-desktop-app/${process.platform}-${process.arch}/${app.getVersion()}`

autoUpdater.setFeedURL(
  { 
    url:url
  } 
)


autoUpdater.on('checking-for-update', () => {
    log.info("獲取版本信息")
})

autoUpdater.on('update-not-avAIlable', () => {
    log.info("沒有可更新版本")
})

autoUpdater.on('update-available', ()  => {
    log.info("發(fā)現(xiàn)新版本")
})

autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
    dialog.showMessageBox({
        type: 'info',
        title: '軟件更新',
        message: "發(fā)現(xiàn)新版本"+releaseName+", 確定安裝?",
        detail: process.platform === 'win32' ? releaseNotes : releaseName,
        buttons: ['確定', '取消']
      }).then(returnValue => {
        if (returnValue.response === 0)  autoUpdater.quitAndInstall()
      })
  })

autoUpdater.on('error', (message) => {
    log.error('There was a problem updating the application')
    log.error(message)
})
  
export default autoUpdater

main.js

import autoUpdater from './update'

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  // and load the index.html of the app.
  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
  }
  // Open the DevTools.
  mainWindow.webContents.openDevTools();
  mainWindow.once('ready-to-show', () => {
     autoUpdater.autoDownload = false
     autoUpdater.checkForUpdates()
 });

};

優(yōu)缺點比較

方案

優(yōu)點

缺點

本方案

實現(xiàn)簡單，和electron-forge集成容易。electron-forge有豐富的插件生態(tài)

只有update-downloaded事件，沒有進(jìn)度更新的事件。
無法選擇安裝路徑
安裝過程丑了一點，是一個動態(tài)gif

electron-builder + electron-updater的autoUpdater

有download-progress事件，可以實現(xiàn)下載進(jìn)度顯示。
不可以選擇安裝路徑

1.實現(xiàn)稍微比上述方案復(fù)雜。

2.官方推薦electron-forge打包，與主流技術(shù)分叉。

Electron Forge可以被認(rèn)為是Electron Builder的替代品，后者在應(yīng)用程序構(gòu)建和發(fā)布方面實現(xiàn)了相同的用例。

這兩個項目在理念上的關(guān)鍵區(qū)別在于，Electron Forge專注于將現(xiàn)有的官方工具組合成一個單一的構(gòu)建管道，而Builder則為大多數(shù)構(gòu)建任務(wù)重寫自己的內(nèi)部邏輯。

使用Forge有兩個主要優(yōu)勢：

Forge一旦在Electron中得到支持，就會接收用于應(yīng)用程序構(gòu)建的新功能（例如ASAR完整性或通用macOS構(gòu)建）。這些功能是在考慮到官方Electron工具的情況下構(gòu)建的，因此Forge在發(fā)布后立即收到它們。

Forge的多包體系結(jié)構(gòu)使其更易于理解和擴(kuò)展。由于Forge由許多職責(zé)明確的較小包組成，因此更容易遵循代碼流。此外，它的可擴(kuò)展API設(shè)計意味著您可以編寫自己的構(gòu)建邏輯，而不必為高級用例提供配置選項。

運行界面

日志查看

運行期間，有錯誤，可以及時查看內(nèi)容，日志地址是

windows: C:Users%USERPROFILE%AppDataRoaming你的工程logs

mac: ~/Library/Application Support/你的工程或者 ~/Library/Logs/你的工程

實現(xiàn)與本地操作系統(tǒng)的交互

preload.js

在這個問題中可以暴露一些接口，這些接口可以在前端頁面調(diào)用，例如下面的就可以在前端vue頁面調(diào)用window.versions.node調(diào)用node方法

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', { 
  node: () => process.versions.node, 
  chrome: () => process.versions.chrome, 
  electron: () => process.versions.electron, 
  ping: () => ipcRenderer.send('ping') ，
  pong: () => ipcRenderer.invoke('pong') 
})

main.js

通過ipcMain來處理

async function handlePing (event, keyword) {
  const webContents = event.sender
  const win = BrowserWindow.fromWebContents(webContents)
  win.setTitle(keyword)
}


// 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', ()=>{
  ipcMain.on('ping', handlePing)
  createWindow()
});

運行效果

總結(jié)

方向	解釋	對應(yīng)元語
單向	ipcRender向ipcMain發(fā)送消息	ipcRender.send與ipcMain.on
雙向	ipcRender向ipcMain發(fā)送消息，并等待結(jié)果	ipcRender.invoke與ipcMain.handle

國際化配置

src/renderer/App.vue

配置默認(rèn)中文顯示

<template>
 <a-config-provider :locale="locale">
    <router-view />
 </a-config-provider>
</template>

<script setup>
import { computed,ref } from 'vue';
import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
import useLocale from './hooks/locale';

const { currentLocale } = useLocale();

const locale = computed(() => {
  switch (currentLocale.value) {
    case 'zh-CN':
      return zhCN;
    case 'en-US':
      return enUS;
    default:
      return zhCN;
  }
});
const percentage = ref(0);
const showProgressBar = ref(false);
</script>

src/render/hooks/locale.js

import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';

export default function useLocale() {
  const i18 = useI18n();
  const currentLocale = computed(() => {
    return i18.locale.value;
  });
  const changeLocale = (value) => {
    if (i18.locale.value === value) {
      return;
    }
    i18.locale.value = value;
    localStorage.setItem('arco-locale', value);
    Message.success(i18.t('navbar.action.locale'));
  };
  return {
    currentLocale,
    changeLocale,
  };
}

src/render/main.js

import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  legacy: false, // 如果你使用 Composition API（推薦），請將legacy設(shè)置為false
  locale: 'zh', // 默認(rèn)語言環(huán)境
  messages: {
    en: {
      hello: 'Hello',
      welcome: 'Welcome to our app!',
    },
    zh: {
      hello: '你好',
      welcome: '歡迎來到我們的應(yīng)用！',
    },
  },
});


createApp(App).use(i18n).use(router).use(ArcoVue,{}).use(ArcoVueIcon).mount('#app');

顯示代碼