html转换成窗体electron,使用electron的菜单栏实现页面切换

如下图所示，我们想要实现这样的效果

在上图所示的这个示例项目中，他的页面切换是这样实现的：

通过mainWindow.webContents.send()函数实现了主进程到渲染进程的消息传递

主进程的代码如下

const sendMenuEvent = async (data) => {

mainWindow.webContents.send('change-view', data)

}

const template = [

{

label: app.name,

submenu: [

{

label: 'Home',

accelerator: 'CommandOrControl+H',

click() {

sendMenuEvent({ route: '/' })

console.log(mainWindow.webContents)

},

},

{ type: 'separator' },

{ role: 'minimize' },

{ role: 'togglefullscreen' },

{ type: 'separator' },

{ role: 'quit', accelerator: 'Alt+F4' },

],

},

{

role: 'help',

submenu: [

{

label: 'Get Help',

role: 'help',

accelerator: 'F1',

click() {

sendMenuEvent({ route: '/help' })

},

},

{

label: 'About',

role: 'about',

accelerator: 'CommandOrControl+A',

click() {

sendMenuEvent({ route: '/about' })

},

},

],

},

]

渲染进程的代码如下

new Vue({

el: '#app',

router,

store,

render: (h) => h(App),

})

// to avoild accesing electorn api from web app build

if (window && window.process && window.process.type === 'renderer') {

const { ipcRenderer } = require('electron')

ipcRenderer.on('change-view', (event, data) => {

console.log(data)

if (data.route) {

router.push(data.route)

}

})

}

可以看到，在接受到主进程传来的change-view消息后，渲染进程通过vue-router进行页面的切换

不过在更新的electorn版本中，该API已经被废弃，我们可以看一下源码中关于这个函数的说明：

/**

* Send an asynchronous message to the renderer process via `channel`, along with

* arguments. Arguments will be serialized with the Structured Clone Algorithm,

* just like `postMessage`, so prototype chains will not be included. Sending

* Functions, Promises, Symbols, WeakMaps, or WeakSets will throw an exception.

*

* > **NOTE**: Sending non-standard JavaScript types such as DOM objects or special

* Electron objects is deprecated, and will begin throwing an exception starting

* with Electron 9.

*

* The renderer process can handle the message by listening to `channel` with the

* `ipcRenderer` module.

*

An example of sending messages from the main process to the renderer process:

*/

send(channel: string, ...args: any[]): void;

那么就有两种解决方案

一种是继续使用老版本的 "electron": "^8.3.1"

另一种就是通过URL实现页面的切换

我们这里直接通过URL实现页面的切换，主进程的代码如下

const template = [

{

label: '当前位置: 首页',

},

{

type: 'separator'

},

{

label: '首页',

submenu: [

{

label: '首页',

click() {

changeUrl({route: '/'}, '首页')

}

}

]

}

]

function changeUrl(data, label) {

mainWindow.loadURL(`${process.env.WEBPACK_DEV_SERVER_URL}/#${data.route}`)

}

上图中所示的方式十分简单，也易于理解，大多数场景下是够用的

本文地址：https://blog.csdn.net/a772316182/article/details/107381987