当前位置： 移动技术网 > IT编程>网页制作>HTML > 使用electron的菜单栏实现页面切换

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

2020年07月17日  | 移动技术网IT编程  | 我要评论

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

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

通过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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网