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

1.前言

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

在某些情况下,有可能是在windows环境下开发,然后打包electronubuntu系统中,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如何切换到触摸模式,如何恢复正常模式,如何配合快捷键组合实现快捷的进入/退出触摸模式的代码

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

相关推荐
冰暮流星1 小时前
css之线性渐变
前端·css
徐同保1 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front1 小时前
大厂精英为何在中小公司水土不服?
前端
生莫甲鲁浪戴1 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
细节控菜鸡3 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
2501_916008894 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu4 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una4 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao4 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇4 小时前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统