使用Electron打造跨平臺(tái)程序需要關(guān)注的技術(shù)點(diǎn)
背景
上篇文章已經(jīng)介紹了使用electron forge+vite+vue3來(lái)實(shí)現(xiàn)一個(gè)桌面應(yīng)用程序的框架。本文重點(diǎn)介紹完善一個(gè)這樣的框架的幾個(gè)通用的需求點(diǎn)及實(shí)現(xiàn)方式。
需求
- 實(shí)現(xiàn)客戶端在線升級(jí)
- 實(shí)現(xiàn)與本地操作系統(tǒng)的交互
- 實(shí)現(xiàn)配置信息持久化
- 國(guó)際化配置
- 實(shí)現(xiàn)跨域訪問(wèn)
實(shí)現(xiàn)客戶端在線升級(jí)
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("沒(méi)有可更新版本")
})
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 autoUpdatermain.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)缺點(diǎn)比較
方案 | 優(yōu)點(diǎn) | 缺點(diǎn) |
本方案 | 實(shí)現(xiàn)簡(jiǎn)單，和electron-forge集成容易。electron-forge有豐富的插件生態(tài) |
|
electron-builder + electron-updater的autoUpdater |
| 1.實(shí)現(xiàn)稍微比上述方案復(fù)雜。 2.官方推薦electron-forge打包，與主流技術(shù)分叉。 |
Electron Forge可以被認(rèn)為是Electron Builder的替代品，后者在應(yīng)用程序構(gòu)建和發(fā)布方面實(shí)現(xiàn)了相同的用例。
這兩個(gè)項(xiàng)目在理念上的關(guān)鍵區(qū)別在于，Electron Forge專注于將現(xiàn)有的官方工具組合成一個(gè)單一的構(gòu)建管道，而Builder則為大多數(shù)構(gòu)建任務(wù)重寫自己的內(nèi)部邏輯。
使用Forge有兩個(gè)主要優(yōu)勢(shì)：
Forge一旦在Electron中得到支持，就會(huì)接收用于應(yīng)用程序構(gòu)建的新功能（例如ASAR完整性或通用macOS構(gòu)建）。這些功能是在考慮到官方Electron工具的情況下構(gòu)建的，因此Forge在發(fā)布后立即收到它們。
Forge的多包體系結(jié)構(gòu)使其更易于理解和擴(kuò)展。由于Forge由許多職責(zé)明確的較小包組成，因此更容易遵循代碼流。此外，它的可擴(kuò)展API設(shè)計(jì)意味著您可以編寫自己的構(gòu)建邏輯，而不必為高級(jí)用例提供配置選項(xiàng)。
運(yùn)行界面
日志查看
運(yùn)行期間，有錯(cuò)誤，可以及時(shí)查看內(nèi)容，日志地址是：
windows: C:\Users\%USERPROFILE%\AppData\Roaming\你的工程\logs。
mac: ~/Library/Application Support/你的工程 或者 ~/Library/Logs/你的工程。
實(shí)現(xiàn)與本地操作系統(tǒng)的交互
preload.js
在這個(gè)問(wèn)題中可以暴露一些接口，這些接口可以在前端頁(yè)面調(diào)用，例如下面的就可以在前端vue頁(yè)面調(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
通過(guò)ipcMain來(lái)處理。
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()
});
運(yùn)行效果
總結(jié)
方向 | 解釋 | 對(duì)應(yīng)元語(yǔ) |
單向 | ipcRender向ipcMain發(fā)送消息 | ipcRender.send與ipcMain.on |
雙向 | ipcRender向ipcMain發(fā)送消息，并等待結(jié)果 | ipcRender.invoke與ipcMain.handle |
國(guó)際化配置
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（推薦），請(qǐng)將legacy設(shè)置為false
locale: 'zh', // 默認(rèn)語(yǔ)言環(huán)境
messages: {
en: {
hello: 'Hello',
welcome: 'Welcome to our app!',
},
zh: {
hello: '你好',
welcome: '歡迎來(lái)到我們的應(yīng)用！',
},
},
});
createApp(App).use(i18n).use(router).use(ArcoVue,{}).use(ArcoVueIcon).mount('#app');顯示代碼：
<p>{{ $t('welcome') }}</p>剩余的兩個(gè)功能，下一篇再完善。預(yù)告下，后面我把這個(gè)項(xiàng)目的模塊進(jìn)行分解，然后子模塊拆分成技術(shù)點(diǎn)，然后通過(guò)chatgpt來(lái)實(shí)現(xiàn)，看看它的效果如何。敬請(qǐng)期待！是否能實(shí)現(xiàn)大部分功能，我們拭目以待。
