Electron 常见问题

2018/04/03 19:34
阅读数 286

导读:

以下记录了作者在实践中遇到的问题和最后的解决方法,如果有错误或者更新更完美的解决方案,欢迎留言指正、交流。

1、jQuery/RequireJS/Meteor/AngularJS 的问题

jQuery 等新版本的框架,在 Electron 中使用普通的引入的办法会引发异常,原因是 Electron 默认启用了 Node.js 的 require 模块,而这些框架为了支持 commondJS 标准,当 Window 中存在 require 时,会启用模块引入的方式。分别有以下几种解决方案:

1-0、去掉框架中的模块引入判断代码。例如:
//比如 jQuery 中的第一行代码中
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}
//改成:
!function(a,b){b(a)}
1-1、使用 Electron 官方论坛提供的方法,改变require的写法。下面的代码各个框架通用:
//在引入框架之前先输入下面的代码
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
1-2、禁用Node.js的require模块化引入(如果你不想使用 Node.js 模块):
// In the main process.
let win = new BrowserWindow({
webPreferences: {
 nodeIntegration: false
}
});
1-3、为使 web 项目正常浏览,在引入 jquery 后进行判断:
//置于引入 jQuery 之后
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

2、关于页面跳转 的问题

刚开始看到页面跳转,大家一般会想到用 window.location.href = './index.html'; 这样的代码。结果是可以跳转,但 DOM事件 基本都会失效。到最后还是使用的 electron 提供的 ipc 接口来创建新的窗口。

2-0、在接收到命令后创建下一个窗口(创建窗口需要时间,期间可能出现空白):
//在main.js中::
const ipc = require('electron').ipcMain;
//进行监控,如果有new-window 发送过来,则重新创建一个窗口,文件是list.html
ipc.on('new-window',function() {
         mainWindow.loadURL(url.format({
         pathname: path.join(__dirname, '/views/list.html'),
         protocol: 'file:',
         slashes: true
     }))
})

3、关于无边框窗口 的问题

为了使窗口无边框,使得在某些时候让项目看起来更美观,所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口。但是无边框窗口会产生无法移动的问题,对于这个问题我们可以在渲染进程中通过编辑 css 文件来解决。

设置 -webkit-app-region: drag 把整个文档都变成了一个可拖拽的对象:
body,html {
    -webkit-app-region: drag;
}

 

现在拖动的问题解决了,但是原来所有的点击事件却失效了,为此我们通过设置部分的这个属性值为 no-drag 来解决:
section {
    -webkit-app-region: no-drag
}

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部