分享初学Electron遇到的坑和避免被坑

最近我在学习用electron打包js代码封装成桌面程序。
下面就把当中遇到的一些问题记下来免得自己忘记，同时也分享给初学electron遇到问题的童鞋。

首先是调出控制台的代码：

｛mainWindow｝.webContents.openDevTools();  //｛mainWindow｝是指你定义的窗口名字！！！

然后呢，是因为electron和jQuery /Vuejs/anglarjs冲突的问题。这里附上大神的骚操作：

//在开头引入：
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
............................//这里写你要引入的jQuery/Vuejs/angularjs包等等..
............................//你的代码
<script src="index.js"></script>    //自己的外部js代码
<script>if (window.module) module = window.module;</script>
//然后安安心心用类库吧.。

然后是关于页面的跳转：
第一次我使用的时候是用的window.location.href = ‘list.html’；这样的方法，结果就是确实可以跳转，并且在后面还可以加上’?canshu = 123’这样传递参数，我当时就感觉这个页面跳转传值挺轻松的嘛..结果..emm..遇到了一些bug。

主要问题在于我的开发系统是win8.并且是在触摸屏，对click事件一点都不友好，并且跳转过后很大几率会导致click事件触发不了，不仅仅是click事件，还有例如tap，mousedown 等等，最后还是用electron带的ipc接口来进行跳转，这里有2种方法进行跳转，一种是在接收到命令后创建下一个窗口：

//在main.js中：：
const ipc = require('electron').ipcMain;
//进行监控，如果有two-show 发送过来，则重新创建一个窗口，文件是list.html
   ipc.on('two-show',function() {
            mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, '/views/list.html'),
            protocol: 'file:',
            slashes: true
        }))
   })

这样的方法有个令人不爽的问题就是会有白屏，毕竟创建窗口也是要时间的。
还有一种方法就是，初始化程序的时候就把所有窗口加载了，然后把主窗口显示（show()）,其余的页面隐藏(hide()),这样就能有效防止白屏了，感觉贼流畅！

//首先创建2个窗口，一个叫mainWindow,一个叫twoWindow
const ipc = require('electron').ipcMain;
//进行监控，如果有two-show 发送过来，则重新创建一个窗口，文件是list.html
   ipc.on('two-show',function() {
            mainWindow.hide();
            twoWindow.show();
   })

但是问题又来了，这样的话，界面1想要给界面2传值，界面2通过这个值才去请求数据进行页面渲染，这种方法是不可行的。

最后我不得不选择ipc接口的第一种方法。

然后是关于在触摸屏上的点击事件：
请用touchstart！请用touchstart！请用touchstart！并且在main.js添加如下代码：

  ｛app｝.commandLine.appendSwitch('touch-events','enabled');  //app是我的electron创建的实例对象名

然后是关于触摸屏上禁止缩放的问题：

require('electron').webFrame.setZoomLevelLimits(1,1);

在自己的js文件或者在renderer.js 文件中添加上面那行代码并且引入到html文件中。