最近一直在搗鼓vue3和electron技術開發跨平臺應用。今天給大家分享的是electron實現主/渲染程序間的通訊，實現仿QQ換膚功能。

專案中使用的Electron為最新穩定版v11.2.3。運用了 vue-cli-plugin-electron-builder 腳手架構建專案。

如上圖：支援圖片+純漸變色兩種面板。

<li class="item"><img class="bg" src="@assets/img/skin/img-skin01.jpg" @click="handleSetSkin('url', 1)" /></li><li class="item"><div class="bg linear" @click="handleSetSkin('color', 'linear-gradient(135deg, #00d2ff, #00e77f)')">櫻草青蔥</div></li>

export default {    setup() {        // 設定換膚        const handleSetSkin = (type, val) => {            let skinUrl            if(type == 'url') {                skinUrl = val ? `url(${require(`@assets/img/skin/img-skin0${val}.jpg`)})` : ''            }else {                skinUrl = val ? val : ''            }            let data = {                type: 'MSG_TYPE_SKIN',                value: skinUrl,            }            setWinData(data)            // ...測試            setWinData({ type: 'MSG_TYPE_TEST', value: '這是一段測試通訊' })        }        return {            handleSetSkin,        }    }}</script>

setWinData函式處理主/渲染程序資料通訊。渲染程序向主程序傳送事件。

/** * @desc 主|渲染程序資料傳遞 * @param args {object} {type: 'MSG_TYPE_XXX', value: 123} */export function setWinData(args) {    ipcRenderer.send('win-setdata', args)}

在主程序中監聽渲染程序傳送的事件，並傳給相應的窗體。

ipcMain.on('win-setdata', (event, args) => {	for(let i in this.winLs) {		let win = this.getWin(i)		if(win) win.webContents.send('win-postdata', args)	}})

在App.vue中監聽剛才在主程序傳送的事件。

<script>import { ipcRenderer } from 'electron'import { onMounted } from 'vue'import { useStore } from 'vuex'export default {  name: 'App',  components: {},  setup() {    const store = useStore()    onMounted(() => {      // 面板初始化      let skin = localStorage.getItem('skin') || ''      store.commit('SET_SKIN', skin)      /**       * 接收主程序傳送的事件       */      ipcRenderer.on('win-logout', () => {        store.commit('LOGOUT')      })      ipcRenderer.on('win-postdata', (event, args) => {        switch(args.type) {          case 'MSG_TYPE_SKIN':            store.commit('SET_SKIN', args.value)          break;          case 'MSG_TYPE_TEST':            console.log('MSG_TYPE_TEST：' + args.value)          break;        }      })    })    return {      ...    }  }}</script>

這樣就簡單地實現了主/渲染程序通訊，即可以讓新開視窗的資料傳回給另一個視窗，實現資料的雙向更新。