一个在electron中强制启用触摸模式🤚🏻的方法

1.前言

在electron应用中,即使在控制台中设置了为移动端模式,也不会生效

在某些情况下,有可能是在windows环境下开发,然后打包electron到ubuntu系统中,ubuntu系统可能就是一个触摸屏应用

在触摸屏应用中,很多事件都不对应,例如mousedown对应touchstart,mousemove对应touchmove,mouseup对应touchend等等

而每次编辑完代码,都打包一次,放到触摸屏设备上查看效果,太过麻烦,不方便开发,所以需要可以在开发环境下,随时可以模拟触摸屏模式

2.效果预览

正常模式下的electron应用

设置为移动端模式之后的electron应用

3.解决方法

js 复制代码

const { BrowserWindow } = require('electron');
const mainWindow = new BrowserWindow({...});
// 附加调试器到 mainWindow 的网页内容(webContents),调试器版本为1.3
mainWindow.webContents.debugger.attach('1.3')
// 启用触摸模拟,并配置为移动设备模式
mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
  enabled: true,
  configuration: 'mobile',
})
// 启用"为鼠标事件生成触摸事件"的功能
mainWindow.webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: true })
// 省略主应用的其他配置与操作...

由以上代码可知,一共有三段操作,分别为

js 复制代码

// 附加调试器到 mainWindow 的网页内容(webContents),调试器版本为1.3
mainWindow.webContents.debugger.attach('1.3')

js 复制代码

// 启用触摸模拟,并配置为移动设备模式
mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
  enabled: true,
  configuration: 'mobile',
})

js 复制代码

// 启用"为鼠标事件生成触摸事件"的功能
mainWindow.webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: true })

退出触摸模式的方法:

js 复制代码

// 关闭触摸模式
window.webContents.debugger.detach()
// 禁用触摸模拟
window.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', { enabled: false })
// 禁用为鼠标事件生成触摸事件的功能
window.webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: false })

拓展: 能否使用快捷键,实现自定义的进入/退出触摸模式呢?如何使用快捷键可查看我之前的文章

js 复制代码

// 是否开启触摸模式
let isMobile = false
// 监听聚焦窗口时的快捷键集合
const shortcutKeys = {
  // 其他的快捷键组合......
  // 切换当前为移动端/正常模式(Ctrl+Shift+V)
  'Ctrl+Shift+V': () => {
    // 获取当前是正常模式还是触摸屏模式
    if (!isMobile) {
      // 打开触摸模式
      // 附加调试器到 mainWindow 的网页内容(webContents),调试器版本为1.3
      mainWindow.webContents.debugger.attach('1.3')
      // 启用触摸模拟,并配置为移动设备模式
      mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
        enabled: true,
        configuration: 'mobile',
      })
      // 启用"为鼠标事件生成触摸事件"的功能
      mainWindow.webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: true })
      // 修改标识,表示当前为触摸模式
      isMobile = true
    } else {
      // 关闭触摸模式
      mainWindow.webContents.debugger.detach()
      // 禁用触摸模拟
      mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', { enabled: false })
      // 禁用为鼠标事件生成触摸事件的功能
      mainWindow.webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: false })
      // 修改标识,表示当前不为触摸模式
      isMobile = false
    }
  }
}
// ...省略初始化electron主应用窗口以及相关配置

// 监听electron应用初始化完成
app.whenReady().then(()=>{
    // 循环注册主应用的快捷键
    Object.keys(shortcutKeys).forEach(item => shortcutKeys[item]))
    // 主应用窗口关闭时取消所有注册的快捷键
    mainWindow.on('close', () => {
      // 取消所有注册的快捷键
      localShortcut.unregisterAll(mainWindow)
    });
})

4.总结

以上就是本篇文章的所有内容了,包含了electron如何切换到触摸模式,如何恢复正常模式,如何配合快捷键组合实现快捷的进入/退出触摸模式的代码

如果有其他问题,欢迎评论或私信交流🧐