用OpenSumi开发一个IDE，集成一个移动设备模拟器功能，如何模拟移动端的触屏事件？

[shilin8805]

如上图，想用OpenSumi开发一个IDE，集成一个移动设备模拟器功能，其中模拟器就是用的electron的webview组件，调试器用的electron里自带的devtools frontend。目前唯一的问题是模拟器的webview无法启用触摸事件，页面上所有的touch事件都不生效，用了下面的代码来模拟移动设备，touch事件也不生效。

  this.simulatorWebContent.enableDeviceEmulation({
    screenPosition: 'mobile',
    screenSize: {
      width: deviceInfo.screenWidth,
      height: deviceInfo.screenHeight
    },
    viewPosition: {
      x: 0,
      y: 0
    },
    viewSize: {
      width: deviceInfo.screenWidth,
      height: deviceInfo.screenHeight
    },
    deviceScaleFactor: deviceInfo.deviceScaleFactor,
    scale: deviceInfo.scale
  })

electron的官方issue #18438里面提到用用下面的方法可以模拟触屏设备，但是用了下面的方法会影响整个BrowserWindow，所有的界面都变成触屏手势了。

webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: true });
webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
  enabled: true,
  configuration: 'mobile',
});

我看现在蚂蚁集团的小程序开发者工具里，模拟器和主界面是可以做到触屏手势和鼠标手势分离的，想问下这个是怎么做到的，谢谢。

[bytemain]

简单的思路就是：让模拟器单独使用一个 webview 应该可以避免这个问题。
不要将其融入到 OpenSumi 的界面中，而是两边是分开的 webview，交互通过 main 层来转发 RPC 之类的。

[shilin8805]

现在就是单独使用的webview，如果不嵌入OpenSumi的界面中，那只能用BrowserView来实现，BrowserView相当于在当前窗口独立盖了一层，边栏收起什么的都没办法控制了。我看蚂蚁那个开发者工具里的模拟器也是webview嵌入到IDE界面中的，没有用BrowserView，这块手势分离是怎么实现的？

[bytemain]

webContents.debugger.sendCommand('Emulation.setEmitTouchEventsForMouse', { enabled: true });
webContents.debugger.sendCommand('Emulation.setTouchEmulationEnabled', {
  enabled: true,
  configuration: 'mobile',
});

这里的命令确认是设置给的模拟器的 webview 吗？
按理说这里发给的是模拟器的 webContents，怎么会发到主的 browser window 里呢？

[bytemain]

我看了下 electron 的 issue，应该是它的 bug。我们并没有使用 electron 自己的能力来做模拟 touch 事件。

[bytemain]

可能方向有点走偏了，这个事情应该可以抛开 electron，因为模拟器是跑在一个 webview 上的，也得让它在 chrome 上也能跑起来。
应该采用诸如：

• https://www.npmjs.com/package/simulate-touch
  这些库来实现

[shilin8805]

好的，我先试试你这个方案，感谢~~~

[MMhunter]

“我看现在蚂蚁集团的小程序开发者工具里，模拟器和主界面是可以做到触屏手势和鼠标手势分离的，想问下这个是怎么做到的”

js 模拟的