分享初学Electron遇到的坑和避免被坑
最近我在学习用electron打包js代码封装成桌面程序。下面就把当中遇到的一些问题记下来免得自己忘记,同时也分享给初学electron遇到问题的童鞋。首先是调出控制台的代码:{mainWindow}.webContents.openDevTools();//{mainWindow}是指你定义的窗口名字!!!然后呢,是因为electron和jQuery /Vuejs/anglarjs冲突的问
最近我在学习用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文件中。
更多推荐
所有评论(0)