electron实现桌面悬浮球效果

首先看下效果图如下：

image.png

当前效果是在mac电脑显示情况。

1、创建窗口的函数

import { app, protocol,BrowserWindow, ipcMain, Menu, Tray,screen } from 'electron'
// 创建窗口的函数
let win2 = null
async function createSBallWindow () {
  win2 = new BrowserWindow({
    width: 60, //悬浮窗口的宽度 比实际DIV的宽度要多2px 因为有1px的边框
    height: 60, //悬浮窗口的高度 比实际DIV的高度要多2px 因为有1px的边框
    type: 'toolbar',  //创建的窗口类型为工具栏窗口
    frame: false,  //要创建无边框窗口
    resizable: false, //禁止窗口大小缩放
    show: false,  //先不让窗口显示
    webPreferences: {
      devTools: false //关闭调试工具
    },
    transparent: true, //设置透明
    hasShadow:false, //不显示阴影
    alwaysOnTop: true, //窗口是否总是显示在其他窗口之前\
    // backgroundColor: '#eee',
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      // preload: path.join(__dirname, 'preload.js'),
    }
  })
  //通过获取用户屏幕的宽高来设置悬浮球的初始位置
  const { left, top } = { left: screen.getPrimaryDisplay().workAreaSize.width - 160, top: screen.getPrimaryDisplay().workAreaSize.height - 160 }
  win2.setPosition(left, top) //设置悬浮球位置
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    await win2.loadURL(`${process.env.WEBPACK_DEV_SERVER_URL}#/ball`)
  }else{
    await win2.loadURL('app://./index.html#/ball')
  }
  win2.once('ready-to-show', () => {
    win2.show()
  })
  win2.on('close', () => {
    win2 = null
  })
}

2、调用窗口的函数

app.on('ready', async () => {
  //创建主窗口
  createWindow()
  //创建球形窗口
  createSBallWindow()
})

注意createSBallWindow创建窗口函数的show，设置的初始属性是show:false,也就是默认不显示，只有调用的时候才会显示。可以在主窗口关闭的时候调用win2.show()就可以让小球显示。

3、小球页面

在路由里添加个ball.vue的小球页面，访问地址是http:localhost:8081/#/ball代码。这里没有对拖拽事件做处理，不同系统上可能会有问题，具体怎么处理，可以自己百度。如下：

在当前页面可以处理小球的其它功能，比如消息提示，右键操作功能。

4. 其它问题

1、细心的朋友可能注意到了，效果图的浮动小球样式有问题，上面有一个细线（mac系统上），这是苹果系统bug，暂时还没解决办法。