Electron打包成客户端,部署在安装了Ubuntu系统的触摸一体机上。
由于该触摸一体机的触摸屏在Ubuntu里没有被识别成触摸设备(也可能是驱动设置不对?),在Ubuntu操作系统上的表现如同鼠标一样。
比如触摸有鼠标箭头出现,触摸网页元素触发的是click事件,触摸拖动网页的效果不是让网页上下滚动,而是触发了长按鼠标左键并拖动的效果,结果就选中了文本。
简而言之,就是触摸屏在系统中表现得像个鼠标,无法像手机或者平板一样,通过触摸或手势去控制网页滚动缩放。
同样的,部署在Ubuntu系统上的Electron客户端,使用的是Webkit内核同样也是无法识别触摸屏的触摸和手势。
后续,我又尝试了多种方法:
一、使用chrome的命令行来启用触摸事件或强制指定触摸设置,然后--touch-events/--touch-devices等在Electron中没有效果。
二、使用Any-Touch这个JS库来让鼠标有手势等,可行,但治标不治本,需要对所有页面进行适配。
最后,在尝试了多种方法无效或不理想后,在stackoverflow中找到了解决方案,废话不多说,直接帖代码:
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow
function createWindow() {
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
autoHideMenuBar: true,
})
// 主要就是以下三段,本质上就是启动debugger,强制进入移动端模式,然后让鼠标事件也能触发touch事件,而且界面也不会显示控制台
mainWindow.webContents.debugger.attach('1.3')
mainWindow.webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
enabled: true,
configuration: 'mobile',
})
mainWindow.webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: true })
// 省略
...
}
app.on('ready', createWindow)
参考引用: