当前位置: 萬仟网 > IT编程>网页制作>HTML > 使用electron的菜单栏实现页面切换

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

2020年07月17日 HTML 我要评论
如下图所示,我们想要实现这样的效果在上图所示的这个示例项目中,他的页面切换是这样实现的:通过mainWindow.webContents.send()函数实现了主进程到渲染进程的消息传递主进程的代码如下const sendMenuEvent = async (data) => { mainWindow.webContents.send('change-view', data)}const template = [ { label: app.name,

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

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

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

(0)
打赏 微信扫一扫 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2022  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com