极客时间 Electron 项目笔记我的 13.3 寸笔记本在使用时默认设置了缩放比例，这导致鼠标的点击，移动和拖拽响应

在极客时间买了Electron 开发实战这门课，我在做后面的项目时遇到了一些问题，在这里把解决方法记录下来。

配置项目

如何在 CRA 中引入 Electron

根据环境信息加载本地或者 devServer URL

使用 electron-is-dev 来进行判断

const isDev = require('electron-is-dev')

//...

if (isDev) {
        win.loadURL('http://localhost:3000').then()
    } else {
        win.loadFile(path.resolve(__dirname, '../../renderer/pages/main/index.html')).then()
    }

等待 CRA 编译成功再启动 Electron

使用 concurrently 和 wait on

"scripts": {
    "start": "concurrently \"yarn start:render\"  \"wait-on http://localhost:3000 && yarn start:main\" ",
  },

项目踩坑

编译原生模块(robotjs)

使用 electron-rebuild 或者按照 robotjs 文档的方式重新编译。我的解决方法在这里。

另外使用 electron-builder 一样可以实现重新编译原生模块。

npx electron-builder install-app-deps

如何区别鼠标拖拽和点击事件？

分别监听 window.onmousedown 和 window.onmouseup 两个事件，如果鼠标按下和抬起的位置一致则为点击事件，否则就是拖拽事件。

如何在设置缩放比例的笔记本上正确响应鼠标事件？

我的 13.3 寸笔记本在使用时默认设置了缩放比例，这导致鼠标的点击，移动和拖拽响应都发生了错位。

解决方法是使用 electron 的 screen 模块获取当前屏幕的缩放倍数,然后再乘以原来的x,y 坐标即可。

const {ipcMain,screen} = require('electron')
const robot = require('robotjs')

const {scaleFactor} = screen.getPrimaryDisplay()

function handleMouseMove({clientX, clientY, screen, video}) {
    //相对窗口的x坐标乘以屏幕宽度和video标签的比例，再乘以屏幕的缩放倍数，就可以得到真实移动的像素数
    let x = clientX * screen.width / video.width * scaleFactor 
    let y = clientY * screen.height / video.height * scaleFactor
    robot.moveMouse(x, y)
}

如何禁止多开?

const gotTheLock = app.requestSingleInstanceLock()
//判断是否多开
if(!gotTheLock){
    app.quit()
}
else {
    app.on('second-instance',()=>{
        showMainWindow()
    })
}

参考：