欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用electron的菜单栏实现页面切换

程序员文章站 2022-06-09 18:46:14
如下图所示,我们想要实现这样的效果在上图所示的这个示例项目中,他的页面切换是这样实现的:通过mainWindow.webContents.send()函数实现了主进程到渲染进程的消息传递主进程的代码如下const sendMenuEvent = async (data) => { mainWindow.webContents.send('change-view', data)}const template = [ { label: app.name,...

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

使用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