Electron 常见问题

Posted 2020-10-29 anani

导读：

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

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
}