Electron 常见问题

导读：

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

一、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-一、使用 Electron 官方论坛提供的方法，改变require的写法。下面的代码各个框架通用：

//在引入框架以前先输入下面的代码
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>

1-二、禁用Node.js的require模块化引入（若是你不想使用 Node.js 模块）：

// In the main process.
let win = new BrowserWindow({
webPreferences: {
 nodeIntegration: false
}
});

1-三、为使 web 项目正常浏览，在引入 jquery 后进行判断：

//置于引入 jQuery 以后
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

二、关于页面跳转 的问题

刚开始看到页面跳转，你们通常会想到用 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
     }))
})

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

为了使窗口无边框，使得在某些时候让项目看起来更美观，因此在建立窗口的时候经过设置 frame 属性的值为 false 来建立无边框窗口。可是无边框窗口会产生没法移动的问题，对于这个问题咱们能够在渲染进程中经过编辑 css 文件来解决。

设置 -webkit-app-region: drag 把整个文档都变成了一个可拖拽的对象：

body,html {
    -webkit-app-region: drag;
}

 

如今拖动的问题解决了，可是原来全部的点击事件却失效了，为此咱们经过设置部分的这个属性值为 no-drag 来解决：

section {
    -webkit-app-region: no-drag
}