记录：从零到一做小说阅读器能遇到多少坑（四）

最近刚刚开始接触electron，还挺有意思的哈哈，如果把阅读器做成pc应用是不是也很ok

electron+vue/iframe

效果：

功能

整的来说只添加了顶部工具栏，支持了几个小功能，包括窗口置顶、背景色透明、工具栏隐藏、系统任务栏图标隐藏（方便摸鱼哈哈哈，只展示托盘区域），小说阅读的功能用的还是之前的一套vue页面，通过iframe嵌入

透明背景

在创建窗体的时候，启用透明窗口

const win = new BrowserWindow({
  width: 375,
  height: 667,
  frame: false,
  transparent: true, // 必须启用透明窗口
  hasShadow: false,
  alwaysOnTop: false,
  webPreferences: {
    nodeIntegration: true,
  },
})

同时页面的背景设置成transparent

html,
body {
  height: 100vh;
  width:100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent !important; // 背景透明
  border-radius: 8px; // 实现圆角
}
#app {
  height: 100%;
  width:100%;
   background: transparent !important;
}

窗口置顶

这里是通过监听set-always-on-top事件来实现，根据按钮点击来控制是否置顶，没有在BrowserWindow中就设置

ipcMain.handle('set-always-on-top', (event, shouldBeOnTop) => {
  win.setAlwaysOnTop(!!shouldBeOnTop)
  return shouldBeOnTop
})

隐藏工具栏

这部分是纯vue代码实现，监听鼠标mouseenter、mouseleave事件来判断是否展示

const onMouseEnter = () => {
  if (uiStore.autoHideToolbar) {
    showToolbar.value = true
  }
}
const onMouseLeave = () => {
  if (uiStore.autoHideToolbar) {
    showToolbar.value = false
  }
}

系统任务栏图标隐藏

• 使用 skipTaskbar: true：窗口不会在任务栏显示
• 使用 Tray 添加托盘图标

const win = new BrowserWindow({
  ...,
  skipTaskbar: true, // 窗口不会在任务栏显示
  ...
})

const iconPath = path.join(process.env.VITE_PUBLIC, 'favicon.ico')
tray = new Tray(iconPath)
tray.setToolTip('你的应用名')
tray.setContextMenu(Menu.buildFromTemplate([
  {
    label: '显示窗口',
    click: () => {
      win?.show()
      win?.setSkipTaskbar(true) // 防止显示后重新出现在任务栏
    },
  },
  {
    label: '隐藏窗口',
    click: () => {
      win?.hide()
    },
  },
  {
    label: '退出',
    click: () => {
      tray?.destroy()
      app.quit()
    },
  },
]))

tray.on('click', () => {
  if (win?.isVisible()) {
    win.hide()
  } else {
    win.show()
    win.setSkipTaskbar(true)
  }
})