最近我在学习用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文件中。

Logo

前往低代码交流专区

更多推荐